:root{--bg:#f4f6f8;--panel:#fff;--text:#17202a;--muted:#68717c;--line:#dde2e7;--accent:#0675c9;--accent2:#084b83;--chip:#eaf3fb;--shadow:0 10px 28px rgba(20,35,50,.07);--safe-bottom:max(10px,env(safe-area-inset-bottom))}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,'Noto Sans KR','Malgun Gothic',sans-serif}button,input,select{font:inherit}button{cursor:pointer}img{max-width:100%}.app{min-height:100vh;padding-bottom:80px}.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.topbar-inner{max-width:1500px;margin:auto;padding:12px 18px;display:flex;align-items:center;gap:16px}.brand{display:flex;align-items:center;min-width:max-content;text-decoration:none}.brand-logo{height:42px;width:auto;display:block;object-fit:contain}.search-wrap{flex:1;position:relative}.search-wrap input{width:100%;border:1px solid var(--line);background:#f8fafc;border-radius:14px;padding:12px 42px 12px 15px;outline:none}.search-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(6,117,201,.12)}.search-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted)}.toolbar{display:flex;gap:8px}.btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 13px;color:var(--text)}.btn:hover{border-color:#b8c1ca;background:#fafbfd}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.icon-action{display:flex;align-items:center;gap:7px}.layout{max-width:1500px;margin:auto;display:grid;grid-template-columns:260px 1fr;gap:20px;padding:18px}.sidebar{position:sticky;top:83px;height:max-content;background:var(--panel);border:1px solid var(--line);border-radius:19px;padding:16px;box-shadow:var(--shadow)}.side-head{margin-bottom:12px}.side-title{font-weight:800}.side-sub{font-size:12px;color:var(--muted);margin-top:3px}.category-list{display:grid;gap:6px;max-height:calc(100vh - 240px);overflow:auto;padding-right:4px}.cat-btn{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;background:transparent;border-radius:11px;padding:10px 12px;text-align:left;color:var(--text)}.cat-btn:hover{background:#f4f7fa}.cat-btn.active{background:var(--chip);color:var(--accent2);font-weight:700}.count{font-size:12px;color:var(--muted);background:#f1f3f5;border-radius:999px;padding:2px 8px}.side-note{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;color:var(--muted);font-size:12px;line-height:1.55}.content{min-width:0}.hero{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;margin-bottom:16px}.hero h1{font-size:28px;margin:0 0 7px}.hero p{margin:0;color:var(--muted);line-height:1.5}.stats{display:flex;gap:8px;flex-wrap:wrap}.stat{background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:999px;font-size:13px}.mobile-panel{display:none}.filters{display:flex;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);padding:11px 12px;border-radius:16px;margin-bottom:18px;align-items:flex-end;box-shadow:var(--shadow)}.filter-field{display:grid;gap:5px;min-width:190px}.filter-field>span{font-size:11px;color:var(--muted);padding-left:3px;font-weight:700}.filter-field select{border:1px solid var(--line);border-radius:11px;background:#fff;padding:9px 34px 9px 11px;width:100%}.install-btn{white-space:nowrap}.result-count{margin-left:auto;color:var(--muted);font-size:13px;align-self:center}.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.section-head h2{font-size:18px;margin:0}.text-btn{border:0;background:transparent;color:var(--accent);padding:0}.recent-section{margin-bottom:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow)}.recent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.case-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.2s;position:relative;box-shadow:var(--shadow)}.case-card:hover{transform:translateY(-2px);border-color:#c8d1db}.case-card.compact .card-body{padding:12px}.case-card.compact .card-title{font-size:15px;min-height:auto;margin-bottom:6px}.card-image{aspect-ratio:16/10;background:#e8edf2;position:relative;overflow:hidden;cursor:pointer}.card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:.25s}.case-card:hover .card-image img{transform:scale(1.02)}.photo-count{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.68);color:#fff;font-size:12px;padding:5px 8px;border-radius:999px}.fav{position:absolute;right:10px;top:10px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.94);font-size:20px;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.12)}.fav.on{color:#e8a100}.card-body{padding:15px}.badge{display:inline-block;background:var(--chip);color:var(--accent2);font-size:11px;font-weight:700;border-radius:999px;padding:5px 9px;margin-bottom:8px}.card-title{font-size:17px;font-weight:700;margin:0 0 9px;line-height:1.35;min-height:44px}.spec-line{display:flex;gap:8px;font-size:13px;margin-top:5px;min-width:0}.spec-line span:first-child{width:58px;flex:0 0 58px;color:var(--muted)}.spec-line b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-actions{display:flex;gap:8px;margin-top:14px}.card-actions .btn{flex:1;padding:9px 10px;font-size:13px}.empty{padding:80px 20px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:18px;grid-column:1/-1}.load-more{display:flex;justify-content:center;padding:22px 0 8px}.load-more .btn{min-width:180px}.modal{position:fixed;inset:0;z-index:100;background:rgba(8,13,20,.78);display:none;align-items:center;justify-content:center;padding:18px}.modal.open{display:flex}.dialog{width:min(1420px,100%);max-height:95vh;background:#fff;border-radius:22px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.7fr);box-shadow:0 30px 90px rgba(0,0,0,.35)}.viewer{background:#0f141a;min-height:650px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.viewer-main{width:100%;height:650px;object-fit:contain;display:block}.viewer-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.45);color:#fff;font-size:24px}.viewer-btn.prev{left:16px}.viewer-btn.next{right:16px}.viewer-bottom{position:absolute;bottom:13px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;color:#fff;gap:8px}.viewer-actions{display:flex;gap:8px}.viewer-bottom .btn{background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.25);color:#fff;padding:8px 11px}.details{padding:24px;overflow:auto;max-height:95vh}.details-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.details h2{font-size:24px;margin:6px 0 4px;line-height:1.35}.close{border:0;background:#f1f3f5;border-radius:50%;width:40px;height:40px;font-size:20px}.mobile-detail-actions{margin-top:12px}.detail-meta{display:grid;gap:10px;margin:20px 0}.meta-row{display:grid;grid-template-columns:100px 1fr;gap:12px;border-bottom:1px solid #edf0f2;padding-bottom:9px}.meta-row dt{color:var(--muted);font-size:13px}.meta-row dd{margin:0;font-weight:600;word-break:break-word}.system{background:#f6f8fa;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.6;margin:12px 0}.note{background:#fff8e7;border:1px solid #f2dfad;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.55;margin:12px 0}.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}.thumb{aspect-ratio:16/10;border:2px solid transparent;padding:0;background:#eee;border-radius:8px;overflow:hidden}.thumb.active{border-color:var(--accent)}.thumb img{width:100%;height:100%;object-fit:cover}.case-nav{display:flex;gap:8px;margin-top:20px}.case-nav .btn{flex:1}.kbd{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.4}.footer{max-width:1500px;margin:12px auto 28px;padding:0 18px;color:var(--muted);font-size:12px;text-align:center}.mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:35;display:none;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:8px 8px calc(8px + var(--safe-bottom))}.mobile-bottom-nav .nav-btn{flex:1;border:0;background:transparent;border-radius:12px;padding:7px 6px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:4px}.mobile-bottom-nav .nav-btn span{font-size:18px;line-height:1}.mobile-bottom-nav .nav-btn b{font-size:11px;font-weight:700}.mobile-bottom-nav .nav-btn.active{color:var(--accent);background:#eef6fd}.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:#17202a;color:#fff;padding:12px 16px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:140;white-space:nowrap;max-width:min(90vw,420px);overflow:hidden;text-overflow:ellipsis}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.mobile-category-strip{display:flex;gap:8px;overflow:auto;padding:2px 0 4px;-ms-overflow-style:none;scrollbar-width:none}.mobile-category-strip::-webkit-scrollbar{display:none}.mobile-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 12px;white-space:nowrap;color:var(--text)}.mobile-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}.sheet-backdrop{position:fixed;inset:0;z-index:80;background:rgba(8,13,20,.45);display:none;align-items:flex-end}.sheet-backdrop.open{display:flex}.category-sheet{width:100%;background:#fff;border-radius:24px 24px 0 0;padding:8px 16px calc(18px + var(--safe-bottom));max-height:76vh;overflow:auto;box-shadow:0 -20px 55px rgba(0,0,0,.16)}.sheet-handle{width:42px;height:4px;background:#cfd5db;border-radius:999px;margin:3px auto 14px}.sheet-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.sheet-head h2{margin:0 0 4px;font-size:21px}.sheet-head p{margin:0;color:var(--muted);font-size:13px}.sheet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.sheet-cat{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px;text-align:left;display:flex;justify-content:space-between;gap:8px;align-items:center}.sheet-cat.active{border-color:var(--accent);background:var(--chip);color:var(--accent2);font-weight:700}.sheet-cat span:last-child{font-size:12px;color:var(--muted)}.presentation .topbar,.presentation .sidebar,.presentation .filters,.presentation .hero,.presentation .mobile-panel,.presentation .recent-section,.presentation .mobile-bottom-nav{display:none!important}.presentation .app{padding-bottom:0}.presentation .layout{display:block;max-width:none;padding:0}.presentation .grid{display:none}.presentation .modal{background:#000;padding:0}.presentation .dialog{width:100%;height:100vh;max-height:none;border-radius:0;grid-template-columns:minmax(0,1fr) 360px}.presentation .viewer,.presentation .viewer-main{height:100vh}.presentation .details{height:100vh;max-height:none}
@media(max-width:1200px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.recent-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.layout{grid-template-columns:230px 1fr}.dialog{grid-template-columns:1fr 340px}.viewer,.viewer-main{height:560px;min-height:560px}}
@media(max-width:860px){.app{padding-bottom:86px}.topbar-inner{padding:9px 12px;gap:9px;flex-wrap:wrap}.brand-logo{height:36px}.brand{width:auto}.toolbar{margin-left:auto}.toolbar .action-text{display:none}.icon-action{width:48px;height:48px;padding:0;justify-content:center;border-radius:14px}.action-icon{font-size:18px}.search-wrap{order:3;width:100%;flex-basis:100%}.search-wrap input{padding:11px 40px 11px 14px}.layout{display:block;padding:12px}.sidebar{display:none}.hero{display:block;margin:7px 0 12px}.hero h1{font-size:25px;margin-bottom:8px}.hero p{display:none}.stats{gap:6px}.stat{padding:7px 10px;font-size:12px}.mobile-panel{display:block;margin-bottom:10px}.filters{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px;margin-bottom:14px}.filter-field{min-width:0}.filter-field>span{font-size:10px}.filter-field select{font-size:14px}.result-count{grid-column:1/-1;width:100%;margin:0;padding:2px 3px 0}.install-btn{grid-column:1/-1}.grid{grid-template-columns:1fr;gap:14px}.recent-section{padding:12px;margin-bottom:14px}.recent-grid{display:flex;overflow:auto;gap:10px;padding-bottom:3px;scrollbar-width:none}.recent-grid::-webkit-scrollbar{display:none}.recent-grid .case-card{flex:0 0 72%;}.recent-grid .spec-line,.recent-grid .card-actions{display:none}.dialog{height:100%;max-height:none;border-radius:0;display:block;overflow:auto}.modal{padding:0}.viewer{height:52vh;min-height:320px}.viewer-main{height:52vh}.details{max-height:none;padding:18px 18px 24px}.thumbs{grid-template-columns:repeat(5,1fr)}.mobile-bottom-nav{display:flex}.footer{padding-bottom:6px}.sheet-backdrop{display:none}.sheet-backdrop.open{display:flex}}
@media(max-width:520px){.brand-logo{height:34px}.toolbar{gap:7px}.icon-action{width:46px;height:46px}.hero h1{font-size:23px}.stats .stat:nth-child(3){display:none}.filters{grid-template-columns:1fr 1fr}.case-card{border-radius:16px}.card-body{padding:13px}.card-title{font-size:16px;min-height:auto}.viewer{height:48vh;min-height:280px}.viewer-main{height:48vh}.viewer-btn{width:42px;height:42px}.viewer-bottom{align-items:flex-end}.viewer-actions{flex-direction:column}.details h2{font-size:21px}.meta-row{grid-template-columns:1fr}.case-nav{flex-direction:column}.sheet-grid{grid-template-columns:1fr 1fr}.sheet-cat{padding:11px 10px;font-size:14px}.presentation .dialog{display:block;height:100vh}.presentation .viewer,.presentation .viewer-main{height:62vh}.presentation .details{height:38vh;overflow:auto}}