/* 사이트 전체 UI 기반 — 2026-09-15 UX 정리.
   기능별 스타일은 각 파일에 그대로 두고, 이 파일을 마지막에 읽어 토큰·글자 크기 바닥·페이지 머리·버튼·입력·간격·푸터를 한 기준으로 맞춘다.
   값은 1440px·390px 실제 Chromium 화면에서 확인했다. 색은 기존 graphite/cyan/neutral 방향을 유지한다. */

:root{
 --ui-ink:#1c2a33;--ui-ink-2:#3f4f5a;--ui-ink-3:#5b6d78;
 --ui-line:#dae2e7;--ui-line-strong:#c2ced6;
 --ui-surface:#f6f8fa;--ui-surface-2:#eef2f5;
 --ui-accent:#243440;--ui-accent-hover:#364d5d;--ui-accent-soft:#e4edf3;--ui-accent-soft-hover:#d7e4ec;
 --ui-link:#2a5e78;--ui-focus:#2f6f8f;
 --ui-radius-s:8px;--ui-radius-m:12px;--ui-radius-l:20px;--ui-pill:100px;
 --ui-shadow-1:0 1px 2px rgba(20,32,42,.05),0 4px 14px rgba(20,32,42,.05);
 --ui-shadow-2:0 8px 28px rgba(20,32,42,.12);
 --ui-h1:clamp(34px,3.6vw,52px);--ui-h2:clamp(28px,2.8vw,38px);
 --ui-section-y:72px;--ui-section-x:40px;
}

/* 1. 초점·선택 — 화면 전환 뒤 main에 걸리는 브라우저 기본 초점 테두리를 없애고, 조작 요소의 초점 고리는 한 색으로 맞춘다. */
#main:focus,#main:focus-visible{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}
::selection{background:#cfe3ee;color:var(--ui-ink)}
.skip:focus{border-radius:var(--ui-radius-s);box-shadow:var(--ui-shadow-2);font-weight:600}

/* 2. 글자 크기 바닥 — 보조 정보도 12px 아래로 내려가지 않게 한다. 한글 11px 이하는 1440px에서도 읽기 어려웠다. */
.caption,.meta,.result-count,.tag,.notes-list .tag,small{font-size:12px}
.eyebrow,.editorial-label,.tips-start .editorial-label,.community-welcome>.editorial-label,.guide-starter .editorial-label,.physical-copy .editorial-label,.premium-label,.premium-phase-title>span,.premium-choice-label,.journey-eyebrow,.lounge-kicker,.showcase-kicker,.stage-kicker,.showcase-motion .stage-kicker,.home-story-type,.community-sidebar .eyebrow,.download-head .eyebrow{font-size:12px}
.nav-dropdown a span,.header .nav-dropdown a span{font-size:12px}
.hero-agent-link{font-size:12px}
.hero-agent-link strong{font-size:13px}
.brand-signature{font-size:11px}
.idea-signature{font-size:10px}
.stage-description,.stage-note,.showcase-motion .stage-description,.showcase-motion .stage-note,.showcase-copy .showcase-fineprint,.showcase-comparison figcaption span,.showcase-choices button,.showcase-tools a,.showcase-navigation>[data-showcase-count]{font-size:12px}
.stage-topline button,.stage-controls button,.motion-control>span,.bom-title,.bom-item{font-size:12px}
.home-post-topic,.home-post-meta,.home-post .feed-like,.home-post-topic .community-example,.home-case-note,.home-community-paths,.home-post>.feed-actions,.home-community-actions{font-size:12px}
.home-community-actions{font-size:13px}
.board-row,.board-category,.board-time,.board-author,.board-likes,.board-options,.board-result-bar,.board-foot p,.board-column-head,.board-refresh,.board-search input,.board-post-form .community-draft-note,.board-post-form .writer-optional{font-size:12px}
.board-title{font-size:15px}
.board-example,.board-best{font-size:11px;padding:2px 5px}
.news-category,.news-meta time,.news-edition,.news-takeaway>span,.news-context summary,.news-context small,.news-editor-note,.news-links a,.news-picture figcaption{font-size:12px}
.community-example,.community-story-tags,.community-story-meta,.community-smallprint,.community-sidebar p.community-smallprint,.community-result-summary,.community-starters span,.community-article-cover figcaption,.post-example-caption,.post-management{font-size:12px}
.feed-byline,.example-label,.concept-badge,.lounge-footnote,.lounge-aside-section>button>span:first-child,.lounge-links a,.concept-guide p,.waiting-filter,.lounge-main .chip{font-size:12px}
.journey-index,.journey-image-caption,.journey-steps li>span,.journey-next>a>span:first-child,.journey-page-note,.journey-ai .journey-ai-note,.journey-section-heading p{font-size:12px}
.download-render figcaption span,.download-render-note,.download-channel,.download-file-format,.download-integrity p,.download-steps li>span,.download-explore>div>span,.download-section-head a{font-size:12px}
.download-install .checksum,.checksum{font-size:11px}
.agent-start-copy .agent-local-note,.agent-start-preview>span,.agent-start-preview details,.agent-start-preview>a,.ai-entry-boundary,.ai-entry-config,.ai-entry-prompt{font-size:12px}
.physical-steps,.physical-film figcaption,.film-play small,.film-play>span{font-size:12px}
.supplier-quote .supplier-label,.supplier .tags span,.guide-scenario>span,.guide-article .tool-meta>span,.guide-starter>.guide-run-proof,.guide-sources>div>span,.directory-footer .text-button{font-size:12px}
.premium-status,.premium-teaser-copy .premium-teaser-note,.premium-checkpoint,.premium-checkpoint strong,.premium-current-note{font-size:12px}
.project-toolbar small,.project-org,.project-item p,.project-item small,.project-item>span,.project-version,.project-design-summary,.project-footnote,.project-record-row p{font-size:12px}
.home-mission-copy a,.premium-text-link,.link-arrow{font-size:13px}
.step>span,.steps li:before,.note-index,.journey-index{font-size:12px}
@media(max-width:760px){
 .board-category,.board-author,.board-time,.board-likes,.board-result-bar,.board-foot p,.board-options{font-size:12px}
 .board-example,.board-best{font-size:11px}
 .feed-byline,.example-label,.concept-badge,.waiting-filter,.lounge-main .chip,.lounge-head p{font-size:12px}
 .home-post-meta,.home-post .feed-like,.home-community-actions{font-size:12px}
 .hero-agent-link,.showcase-choices button,.showcase-copy>p,.product-intro>p{font-size:13px}
 .stage-controls button,.showcase-motion .stage-controls button,.motion-control>span,.showcase-motion .motion-control>span,.stage-note,.showcase-motion .stage-note,.stage-description,.showcase-motion .stage-description{font-size:12px}
 .download-render figcaption a,.download-render-note,.news-edition,.premium-label{font-size:12px}
 .brand-signature{font-size:10px}
 .idea-signature{font-size:9px}
}

/* 3. 페이지 머리 — 모든 목록·문서 페이지가 같은 라벨·제목·설명 리듬을 쓴다. 커뮤니티 보드의 압축 머리는 제외한다. */
.eyebrow,.editorial-label,.premium-label>span:first-child,.journey-eyebrow,.lounge-kicker,.showcase-kicker,.stage-kicker,.showcase-motion .stage-kicker,.home-story-type,.premium-phase-title>span,.premium-choice-label,.community-sidebar .eyebrow,.tips-start .editorial-label,.community-welcome>.editorial-label,.guide-starter .editorial-label,.physical-copy .editorial-label{font-weight:600;letter-spacing:.06em;line-height:1.6;color:#456c7f}
.eyebrow{gap:0;margin-bottom:18px}
.eyebrow:before{display:none}
.dark-section .eyebrow,.download-box .eyebrow{color:#a9c4d3}
.page-head h1,.design-reading-head h1,.community-intro h1,.journeys-intro h1,.premium-hero h1,.download-head h1,.project-header h1,.lounge-head h1{font-size:var(--ui-h1);line-height:1.22;letter-spacing:-.05em;font-weight:600;color:var(--ui-ink)}
.article h1,.community-article h1,.guide-article h1,.social-article>h1{font-size:clamp(30px,3vw,42px);line-height:1.3;letter-spacing:-.045em;font-weight:600}
.page-head p,.design-reading-head p,.community-intro p:not(.eyebrow),.journeys-intro>p,.download-head>p,.project-header p,.lounge-head p{font-size:16px;line-height:1.8;color:var(--ui-ink-3);max-width:60ch}
.page-head{margin-bottom:40px}
.page-head h1{margin-bottom:16px}
.premium-hero h1{margin:26px 0 30px}
.design-reading-head{margin:48px 0 32px}
@media(max-width:760px){
 .page-head{margin-bottom:28px}
 .page-head p,.design-reading-head p,.community-intro p:not(.eyebrow),.journeys-intro>p,.download-head>p,.project-header p{font-size:15px}
 .design-reading-head{margin:28px 0 22px}
}
@media(max-width:360px){
 .page-head h1,.design-reading-head h1,.community-intro h1,.journeys-intro h1,.premium-hero h1,.download-head h1,.project-header h1,.lounge-head h1{font-size:30px}
}

/* 4. 홈 섹션 리듬 — 폭·세로 여백·h2 크기를 하나로 맞춰 섹션마다 다른 무게로 보이지 않게 한다. */
.home-community,.home-journeys,.premium-teaser-inner,.agent-start,.section{max-width:1280px}
.home-community{padding:56px var(--ui-section-x) 48px}
.home-journeys,.agent-start,.section{padding:var(--ui-section-y) var(--ui-section-x)}
.premium-teaser-inner{padding:64px var(--ui-section-x)}
.home-mission{padding-top:64px;padding-bottom:64px}
.home-community-head h2,.journey-heading h2,.premium-teaser h2,.home-mission h2,.agent-start h2,.section>.section-heading h2,.section-heading h2,.community-welcome h3,.premium-section-heading h2,.premium-choice>h2,.download-section-head h2,.journey-section-heading h2,.ai-entry-next h2{font-size:var(--ui-h2);font-weight:600;line-height:1.35;letter-spacing:-.045em;color:var(--ui-ink)}
.home-community-head h2{font-size:clamp(26px,2.4vw,32px)}
.download-section-head h2,.journey-section-heading h2,.premium-section-heading h2,.premium-choice>h2,.ai-entry-next h2{font-size:clamp(24px,2.2vw,30px)}
.home-mission h2{margin-bottom:0}
.section-heading{margin-bottom:28px;align-items:end}
@media(max-width:760px){
 .home-community,.home-journeys,.agent-start,.section{padding:48px 20px}
 .premium-teaser-inner{padding:44px 20px}
 .home-mission{padding:44px 20px}
 .home-community-head h2{font-size:24px}
}

/* 5. 버튼 — 주 버튼은 짙은 graphite 알약형, 보조 버튼은 옅은 표면. 높이 48/40을 두 단계로만 쓴다. */
.button{border-radius:var(--ui-pill);min-height:48px;padding:12px 22px;gap:14px;font-size:14px;font-weight:600;letter-spacing:-.01em;background:var(--ui-accent-soft);color:var(--ui-ink);border:1px solid transparent;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s}
.button:hover{filter:none;background:var(--ui-accent-soft-hover)}
.button:active{transform:translateY(1px)}
.button.dark{background:var(--ui-accent);color:#fff}
.button.dark:hover{background:var(--ui-accent-hover)}
.button.outline{background:#fff;border-color:var(--ui-line-strong);color:var(--ui-ink-2)}
.button.outline:hover{background:var(--ui-surface-2);border-color:#adbcc6}
.button.small{min-height:40px;padding:8px 16px;font-size:13px;gap:10px}
.header .nav-actions>.button.dark,.is-home .header .nav-actions>.button.dark{min-height:40px;padding:8px 18px;border-radius:var(--ui-pill);gap:12px;box-shadow:none;border-color:transparent}
.header .nav-actions>.text-button{border-radius:var(--ui-pill)}
.board-write{border-radius:var(--ui-pill);min-height:40px;padding:8px 18px}
.home-community-actions button{border-radius:var(--ui-pill);border-color:var(--ui-line-strong);padding:0 16px}
.home-community-actions button:hover{background:var(--ui-surface-2)}
.download-primary,.premium-now .premium-action{border-radius:var(--ui-radius-m)}
.chip,.community-controls .chip,.journey-switcher>a{border-radius:var(--ui-pill);min-height:40px;padding:8px 16px;font-size:13px;border:1px solid var(--ui-line);background:#fff;color:var(--ui-ink-2);transition:background .15s,border-color .15s,color .15s}
.chip:hover,.journey-switcher>a:hover:not([aria-current]){background:var(--ui-surface-2);border-color:var(--ui-line-strong);color:var(--ui-ink)}
.chip.active,.journey-switcher>a[aria-current]{background:var(--ui-accent);border-color:var(--ui-accent);color:#fff}
.board-categories .chip{border-radius:var(--ui-pill);border-color:transparent;background:transparent;min-height:36px;padding:7px 14px;font-size:13px}
.board-categories .chip.active{border-color:transparent}
.lounge-main .chip{border-radius:var(--ui-pill);min-height:36px;padding:7px 12px}
.text-button{min-height:40px;border-radius:var(--ui-radius-s)}
.text-button:hover{text-decoration:underline;text-underline-offset:4px}
@media(prefers-reduced-motion:reduce){.button,.chip,.journey-switcher>a,.card{transition:none}.button:active{transform:none}}

/* 6. 입력 — 검색·폼·선택 상자의 테두리·모서리·초점을 한 모양으로 맞춘다. */
.search input,.form input,.form select,.form textarea,.board-search input,.lounge-search input,.community-options select,.board-options select,.news-toolbar input,.project-workspace select,.project-workspace input,.project-workspace textarea,.copy-prompt-text,.design-part-edit textarea{border-radius:var(--ui-radius-s);border:1px solid var(--ui-line-strong);background:#fff;color:var(--ui-ink);transition:border-color .15s,box-shadow .15s}
.search input:hover,.form input:hover,.form textarea:hover,.board-search input:hover,.lounge-search input:hover{border-color:#a9b9c3}
.search input:focus-visible,.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible,.board-search input:focus-visible,.lounge-search input:focus-visible,.community-options select:focus-visible,.board-options select:focus-visible,.news-toolbar input:focus-visible,.project-workspace input:focus-visible,.project-workspace select:focus-visible,.project-workspace textarea:focus-visible,.copy-prompt-text:focus-visible,.design-part-edit textarea:focus-visible{outline:2px solid var(--ui-focus);outline-offset:0;border-color:var(--ui-focus)}
.search input{height:48px;padding:12px 16px 12px 44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6d78' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px;background-position:16px center}
.board-search input{height:38px;padding-left:12px;background-image:none}
.form input,.form select{min-height:46px}
.form label{font-size:13px;font-weight:500;color:var(--ui-ink-2)}
.form .error{border-left:2px solid #c65a4a;padding:8px 12px;background:#fdf3f0;border-radius:0 var(--ui-radius-s) var(--ui-radius-s) 0}
.form .error:empty{display:none}

/* 7. 표면·카드·링크 — 모서리와 그림자 단계를 통일하고, 호버는 색보다 위치·그림자로 알린다. */
.card{border-radius:var(--ui-radius-m);border-color:var(--ui-line);transition:border-color .15s,box-shadow .15s,transform .15s}
.card:hover{border-color:var(--ui-line-strong);box-shadow:var(--ui-shadow-1)}
#tip-results .card:hover{box-shadow:none}
.side-note,.community-sidebar,.lounge-about,.note,.empty,.error-panel,.detail-block,.visual-frame,.guide-prompt,.community-resources,.community-example-note,.premium-now,.download-stage,.project-decision-form,.project-record-preview,.feed-empty{border-radius:var(--ui-radius-m)}
.download-stage{overflow:hidden}
.link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--ui-link);font-weight:500;min-height:40px}
.link-arrow:hover,.home-story-link:hover,.home-community-paths a:hover,.premium-text-link:hover,.showcase-tools a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.card .link-arrow{min-height:0}
.notes-list>a:hover h3,.path-links a:hover h3,.tips-start>a:hover h3,.journey-entry-list>a:hover h3,.download-explore>a:hover strong,.community-story h2 a:hover,.feed-post h2 a:hover{color:var(--ui-link)}
.notes-list>a,.journey-entry-list>a,.path-links>a{border-radius:var(--ui-radius-s);transition:background .15s}
.notes-list>a:hover,.journey-entry-list>a:hover,.path-links>a:hover{background:rgba(36,52,64,.035)}
.tag{border-radius:6px;padding:4px 9px;color:var(--ui-link);background:var(--ui-accent-soft);letter-spacing:0}
dialog{border-radius:16px;box-shadow:var(--ui-shadow-2);border-color:var(--ui-line)}
dialog::backdrop{background:rgba(16,28,36,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#toast{border-radius:var(--ui-radius-m);box-shadow:var(--ui-shadow-2)}
.empty{padding:56px 24px}
.empty h3{font-size:20px}
.error-panel{border-color:#e6c4bb}

/* 8. 헤더 — 높이를 72px 한 가지로 맞춰(커뮤니티 포함) 페이지 이동 시 헤더가 튀지 않게 하고, 밑줄 위치를 새 높이에 맞춘다. 실제 높이는 app.js의 --header-height가 계속 측정한다. 모바일 메뉴는 완전히 불투명하게 덮는다. */
.header .nav-wrap,.is-community .nav-wrap{min-height:72px;gap:40px;max-width:1360px}
.header .brand,.is-community .header .brand{font-size:28px}
.header nav>a,.header .nav-group>summary,.is-community .header nav>a,.is-community .header .nav-group>summary{padding-top:25px;padding-bottom:25px}
.header nav>a.active,.header .nav-group.active>summary{border-bottom-color:var(--ui-accent)}
.nav-dropdown{border-radius:var(--ui-radius-m);top:calc(100% - 2px)}
.header .nav-dropdown a,.nav-dropdown a{padding:13px 13px;border-radius:var(--ui-radius-s)}
.header .menu-button{border-radius:var(--ui-radius-s)}
.is-community .header{box-shadow:0 3px 18px rgba(21,32,43,.035)}
@media(max-width:760px){
 .header .nav-wrap,.is-community .nav-wrap{min-height:68px;padding:8px 20px}
 .header .brand,.is-community .header .brand{font-size:26px}
 .header nav,.is-home .header nav,.is-home nav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
 .header nav>a,.header .nav-group>summary,.is-community .header nav>a,.is-community .header .nav-group>summary{padding:13px 8px}
 .is-community .header nav{top:100%}
 .is-community .header .menu-button{width:44px;height:44px;border:1px solid rgba(36,49,61,.13);background:rgba(255,255,255,.55)}
 .header .nav-dropdown a{padding:12px 13px}
}

/* 9. 푸터 — 드롭다운에 숨은 목적지를 한눈에 펼쳐 두 번째 탐색 경로로 쓴다. */
.site-footer{max-width:1280px;margin:auto;padding:56px var(--ui-section-x) 40px;border-top:1px solid var(--ui-line);display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px 40px;color:var(--ui-ink-2)}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.footer-brand .brand{font-size:26px}
.footer-brand p{font-size:14px;line-height:1.7;color:var(--ui-ink-3);max-width:28ch;margin:0}
.footer-brand .button{margin-top:6px}
.footer-nav{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.footer-nav h2{font-size:12px;font-weight:600;letter-spacing:.06em;color:#456c7f;margin-bottom:10px;line-height:1.6}
.footer-nav a{display:inline-flex;align-items:center;min-height:36px;font-size:14px;color:var(--ui-ink-2);border-radius:6px}
.footer-nav a:hover{color:var(--ui-ink);text-decoration:underline;text-underline-offset:4px}
.site-footer>small{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:24px;border-top:1px solid var(--ui-line);color:var(--ui-ink-3);font-size:12px}
.is-community .site-footer{padding-top:40px;padding-bottom:32px}
@media(max-width:1050px){.site-footer{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.footer-brand{grid-column:1/-1}}
@media(max-width:760px){
 .site-footer{padding:44px 20px 32px;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
 .footer-brand{grid-column:1/-1}
 .footer-brand .button{width:100%;justify-content:space-between}
 .footer-nav a{min-height:40px}
 .site-footer>small{padding-top:20px}
}

/* 10. 커뮤니티 보드 — 밀도를 유지하며 행 높이와 제목 크기만 올리고, 분류 칩과 보기 옵션을 한 줄로 합쳐 목록 위 제어를 네 줄에서 세 줄로 줄인다. */
.board-row{min-height:52px}
.board-heading h1{font-size:26px;letter-spacing:-.04em}
.board-list{border-radius:0}
.board-pagination button{border-radius:var(--ui-radius-s)}
.compact-board{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center}
.compact-board>.board-heading,.compact-board>.board-topline,.compact-board>.community-results,.compact-board>.board-foot{grid-column:1/-1}
.compact-board>.board-categories{grid-column:1;min-width:0}
.compact-board>.board-options{grid-column:2;border-bottom:1px solid #e8ece9;align-self:stretch;min-height:44px}
.compact-board>.board-options select{margin-left:0}
.compact-board>.board-topline{margin-bottom:0}
.compact-board>.community-results{margin-top:12px}
@media(max-width:760px){
 .compact-board{display:block}
 .compact-board>.board-options{border-bottom:0}
}

/* 12. 모바일 하단 탭 바 — 햄버거 메뉴 뒤에 숨은 네 목적지를 한 번 탭으로 옮긴다. 데스크톱에는 없고, 메뉴가 열리면 숨겨 겹치지 않는다. */
.tab-bar{display:none}
@media(max-width:760px){
 body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
 .tab-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--ui-line);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -6px 20px rgba(20,32,42,.05)}
 .tab-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:64px;font-size:12px;font-weight:500;color:var(--ui-ink-3);position:relative;border-radius:0}
 .tab-bar svg{width:22px;height:22px}
 .tab-bar a.active{color:var(--ui-ink);font-weight:600}
 .tab-bar a.active::before{content:"";position:absolute;top:0;left:50%;width:28px;height:2px;transform:translateX(-50%);background:var(--ui-accent);border-radius:0 0 2px 2px}
 .tab-bar a:focus-visible{outline-offset:-3px}
 body:has(#main-navigation.open) .tab-bar,body:has(#modal[open]) .tab-bar{display:none}
 #toast{bottom:calc(64px + 16px + env(safe-area-inset-bottom,0px))}
 .header nav.open{max-height:calc(100dvh - var(--review-height,0px) - var(--header-height,68px))}
}
@media(prefers-reduced-transparency:reduce){.tab-bar{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(forced-colors:active){.tab-bar{background:Canvas;border-color:CanvasText}.tab-bar a.active::before{background:Highlight}}

/* 13. 화면 전환과 대기 상태 — 본문이 바뀔 때 짧게 떠오르고, 불러오는 동안은 문장 대신 얇은 진행 막대를 보인다. */
@keyframes ui-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ui-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
#main>*{animation:ui-fade .22s ease-out both}
.page-loading{padding-top:96px;padding-bottom:96px;text-align:center;color:var(--ui-ink-3)}
.page-loading .eyebrow{justify-content:center;margin-bottom:12px}
.page-loading::after,.community-results[aria-busy=true]::before,#supplier-results:empty::before,#tip-results:empty::before{content:"";display:block;height:3px;width:120px;margin:18px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--ui-line) 0 30%,var(--ui-accent-soft-hover) 50%,var(--ui-line) 70% 100%);background-size:200% 100%;animation:ui-shimmer 1.1s linear infinite}
.community-results[aria-busy=true]::before{margin:0 auto 14px}
.community-results[aria-busy=true]{opacity:1;color:var(--ui-ink-3);font-size:13px;text-align:center}
.community-results[aria-busy=true]>*{opacity:.55}
@media(prefers-reduced-motion:reduce){#main>*{animation:none}.page-loading::after,.community-results[aria-busy=true]::before,#supplier-results:empty::before,#tip-results:empty::before{animation:none}}

/* 11. 3D 무대·홈 카드 — 알약형 버튼과 어울리도록 무대 조작 버튼의 모서리를 맞춘다. */
.showcase-motion .stage-controls button,.showcase-motion .stage-topline button{border-radius:var(--ui-radius-s)}
.showcase-choices button{color:var(--ui-ink-3);font-weight:500}
.showcase-choices button[aria-pressed=true]{color:var(--ui-ink);border-color:var(--ui-accent)}