:root{--ink:#252735;--muted:#686b7c;--purple:#7760c6;--line:#e8e8f0;--paper:#fff;--background:#f7f8fb}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--background);color:var(--ink);font-family:Arial,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;word-break:keep-all}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a996ef;outline-offset:4px}[hidden]{display:none!important}.site-header{background:#fff;border-bottom:1px solid var(--line)}.header-inner{max-width:1248px;margin:auto;padding:25px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{font-size:24px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#eeeafa;color:var(--purple);font-size:28px;margin-right:11px}.brand-dot{color:var(--purple)}.search{width:326px;display:flex;align-items:center;gap:11px;background:#f6f7fa;border:1px solid #ededf3;border-radius:9px;padding:11px 13px}.search svg{width:19px;height:19px;flex-shrink:0;color:#8b8d9d}.search input{width:100%;min-width:0;background:none;border:0;color:var(--ink);font-size:13px;outline:none}.search:focus-within{border-color:#a996ef;box-shadow:0 0 0 2px #eeeafa}.search input::placeholder{color:#9596a4}.search kbd{border:1px solid #dddfea;border-radius:4px;color:#a4a5b3;padding:0 5px;font:12px monospace}.page{max-width:1248px;padding:0 40px;margin:auto}.library{padding-top:28px}.browse-panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:17px 18px}.browse-row{display:flex;gap:20px;align-items:flex-start}.mode-switch{display:flex;flex-shrink:0;background:#f1f0f6;border-radius:7px;padding:4px}.mode{background:none;border:0;border-radius:5px;color:#92909f;padding:9px 14px;font-size:12px;font-weight:700;white-space:nowrap}.mode.active{background:#fff;color:#65529d;box-shadow:0 1px 5px #29213b12}.categories{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding-top:3px;min-width:0}.category{font-size:12px;border:0;background:transparent;color:#747585;border-radius:6px;padding:11px 12px;white-space:nowrap}.category:hover,.unit:hover{background:#f5f2fc;color:#6c54ad}.category.active{background:#eee9fa;color:#7256b0;font-weight:700}.units{display:flex;flex-wrap:wrap;gap:9px;border-top:1px solid var(--line);padding:14px 0 0 177px;margin-top:14px}.unit{background:none;border:1px solid var(--line);border-radius:20px;font-size:12px;padding:7px 17px;color:#7a7c8e}.unit.active{border-color:#bfb0e1;color:#7056aa;background:#f5f1fc}.results-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:29px 0 12px}.results-heading h3{font-size:16px;margin:0;letter-spacing:-.3px}.results-heading h3 span{color:var(--purple);font-size:13px;font-weight:500;margin-left:6px}#results-note{font-size:11px;color:#9798a5}.preview-notice{font-size:11px;color:#92919e;margin:0 0 19px;line-height:1.6}.experiment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}.experiment-card{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s}.experiment-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px #31254f09}.card-art{height:177px;position:relative;display:grid;place-items:center;overflow:hidden}.card-art svg{height:100%;width:100%;max-width:360px}.art-index{position:absolute;top:15px;left:17px;color:#81778d;font-size:9px;letter-spacing:1.5px;opacity:.65}.card-content{padding:20px}.card-label{font-size:10px;font-weight:700;display:block;margin-bottom:10px;color:#8b78b5}.card-content h4{font-size:18px;margin:0 0 9px;letter-spacing:-.5px}.card-content p{color:#92909d;font-size:12px;line-height:1.7;margin:0;min-height:41px}.card-footer{border-top:1px solid #f0eff4;margin-top:17px;padding-top:13px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#a1a0ac}.status{display:flex;align-items:center;gap:5px}.status:before{content:"";width:5px;height:5px;border-radius:50%;background:#bcafcf}.card-footer .arrow{font-size:17px;color:#c5bdcf}.empty-state{padding:60px 20px;text-align:center;background:#fff;border:1px dashed #ded9eb;border-radius:12px}.empty-state>span{font-size:40px;color:#ae9cca}.empty-state h3{font-size:17px}.empty-state p{font-size:13px;color:var(--muted);line-height:1.8}.empty-state button{margin-top:10px;background:#eee9fa;color:#7056aa;border:0;border-radius:7px;padding:11px 18px;font-size:12px}.bottom-note{display:flex;align-items:center;gap:18px;margin:44px 0 55px;padding:23px 26px;background:#efedf6;border-radius:10px}.note-icon{color:#8f7daf;font-size:31px}.bottom-note strong{font-size:13px;font-weight:600;color:#6d6182}.bottom-note p{font-size:11px;margin:7px 0 0;color:#968ba5;line-height:1.7}.note-decoration{margin-left:auto;color:#ab9cbd;font-size:26px}footer{border-top:1px solid var(--line);max-width:1168px;margin:auto;padding:28px 0 35px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-brand{font-weight:700;font-size:13px;color:#7a7488}footer p,footer>span{color:#aaa6b3;font-size:10px}footer p{margin:8px 0 0}@media(min-width:1200px){.categories{gap:7px}}@media(max-width:1050px){.browse-row{gap:12px}.category{padding:11px 9px}.experiment-grid{gap:17px}footer{margin:0 40px}}@media(max-width:760px){.header-inner{padding:19px 24px}.brand{font-size:20px}.brand-mark{width:30px;height:30px;font-size:24px;margin-right:8px}.search{width:255px}.page{padding:0 24px}.browse-row{flex-direction:column;gap:12px}.categories{gap:4px;width:100%}.units{padding-left:0}.experiment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-art{height:155px}footer{margin:0 24px}}@media(max-width:480px){.header-inner{padding:18px 20px;flex-wrap:wrap;gap:17px}.brand{font-size:22px}.search{width:100%;padding:12px}.page{padding:0 20px}.library{padding-top:20px}.browse-panel{padding:13px}.mode{padding:8px 16px}.category{font-size:11px;padding:10px}.categories{gap:3px}.units{gap:7px}.unit{padding:7px 16px}.experiment-grid{grid-template-columns:1fr;gap:20px}.card-art{height:183px}.card-content{padding:19px 21px}.card-content p{min-height:0}.results-heading{margin-top:24px}#results-note{font-size:10px}.bottom-note{margin:30px 0 35px;padding:20px 17px;gap:12px}.note-decoration{display:none}.bottom-note strong{font-size:12px}.bottom-note p{font-size:10px}footer{margin:0 20px;align-items:flex-start;flex-direction:column;padding:23px 0;gap:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.experiment-card{transition:none}}

/* 작은 안내 문구도 밝은 배경에서 선명하게 읽히도록 조정합니다. */
.brand-mark svg{width:28px;height:28px}.card-content p{color:#727080}.preview-notice,#results-note{color:#787684}.card-footer{color:#81798e}.category{color:#646575}

.experiment-link{display:block}.experiment-link:focus-visible{outline-offset:3px}.experiment-link .status:before{background:#77a492}.experiment-link .status{color:#678775}

.card-art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}

.chapters .unit{border-radius:6px;font-weight:600}#units .unit{white-space:normal;text-align:left;line-height:1.7}.results-heading h3{line-height:1.8}.results-heading{align-items:flex-start}#results-note{flex-shrink:0;padding-top:5px}@media(max-width:480px){.results-heading{flex-wrap:wrap}}

.experiment-navigation{max-width:1248px;margin:0 auto;padding:24px 40px 0}.category-results-link{display:block;width:fit-content;margin:16px 0 0 auto;color:#7760a2;font-size:12px;line-height:1.8}.category-results-link:hover{text-decoration:underline}@media(max-width:760px){.experiment-navigation{padding:20px 24px 0}}@media(max-width:480px){.experiment-navigation{padding:18px 16px 0}}

/* 메인 제목은 노이즈 캔슬링 실험 제목과 같은 반응형 크기를 사용합니다. */
.site-header .brand{font-size:32px}
/* 과목 메뉴는 데스크톱에서 고급 물리학까지 한 줄에 들어가도록 맞춥니다. */
[data-category-menu] .mode,[data-category-menu] .category{font-size:16.5px}
[data-category-menu] .unit,.category-results-link{font-size:18px}
@media(min-width:761px){[data-category-menu] .browse-row{gap:14px}[data-category-menu] .categories{gap:4px}[data-category-menu] .category{padding:11px 9px}}
@media(max-width:760px){.site-header .brand{font-size:28px}}
@media(max-width:480px){.site-header .brand{font-size:26px}}

/* 실험 목록은 한 페이지에 최대 15개씩 표시합니다. */
.pagination{margin:28px 0 0;text-align:center}.pagination-buttons{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}.pagination-buttons button{min-width:38px;min-height:40px;padding:9px 13px;border:1px solid #e0d8ec;border-radius:8px;background:white;color:#7d6a94;font-size:14px}.pagination-buttons button[aria-current=page]{background:#8064aa;color:white;border-color:#8064aa;font-weight:700}.pagination-buttons button:disabled{opacity:.4;cursor:default}.pagination-buttons>span{color:#95899f;padding:0 3px}.pagination-summary{font-size:13px;line-height:1.8;color:#8b7c98;margin:12px 0 0}#results-title:focus{outline:2px solid #b6a1db;outline-offset:5px}@media(max-width:480px){.pagination-buttons{gap:6px}.pagination-buttons button{min-width:34px;padding:8px 10px;font-size:13px}}

/* 영문 사이트 이름은 한글 제목 바로 아래에 절반 크기로 표시합니다. */
.site-header .brand-text{display:flex;flex-direction:column;gap:4px;line-height:1.15}.site-header .brand-subtitle{font-size:.5em;font-weight:500;letter-spacing:.02em;color:var(--muted)}