/* story.crowny.org 테마 — 색은 중앙 크라우니디자인.css 토큰(--crowny-*)만 소비. 상태색(가동 녹색)만 로컬 정의. 중앙 CSS 한 파일 수정 → 전 서비스 반영 */
:root{
  --st-bg:var(--crowny-cream); --st-ink:var(--crowny-ink); --st-ink2:var(--crowny-mut);
  --st-accent:var(--crowny-gold); --st-line:var(--crowny-line); --st-card:var(--crowny-card);
  --st-ok:#3F7D4B; --st-off:var(--crowny-terracotta);
}
:root:not([data-theme="light"]){}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --st-bg:var(--crowny-dark); --st-ink:var(--crowny-dark-txt); --st-ink2:var(--crowny-mut);
  --st-accent:var(--crowny-gold); --st-line:var(--crowny-dark-line); --st-card:var(--crowny-panel);
  --st-ok:#6FBE7C; --st-off:var(--crowny-terracotta);
}}
:root[data-theme="dark"]{
  --st-bg:var(--crowny-dark); --st-ink:var(--crowny-dark-txt); --st-ink2:var(--crowny-mut);
  --st-accent:var(--crowny-gold); --st-line:var(--crowny-dark-line); --st-card:var(--crowny-panel);
  --st-ok:#6FBE7C; --st-off:var(--crowny-terracotta);
}

*{box-sizing:border-box}
body{margin:0;background:var(--st-bg);color:var(--st-ink);
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}

a{color:inherit}

/* ---- 공통 레이아웃 ---- */
.st-hero{max-width:820px;margin:0 auto;padding:96px 24px 56px;text-align:center}
.st-eyebrow{color:var(--st-accent);font-size:13px;letter-spacing:.22em;margin:0 0 20px;text-transform:uppercase}
.st-hero h1{font-size:clamp(28px,5.2vw,50px);line-height:1.32;margin:0 0 22px;font-weight:700;letter-spacing:-.02em}
.st-lead{color:var(--st-ink2);font-size:16px;margin:0 auto 32px;max-width:36em}
.st-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.st-btn{display:inline-block;padding:12px 22px;border-radius:999px;font-size:14.5px;font-weight:600;
  text-decoration:none;border:1px solid var(--st-line);transition:transform .15s ease,background .15s ease}
.st-btn:hover{transform:translateY(-1px)}
.st-btn.st-primary{background:var(--st-accent);color:var(--st-bg);border-color:var(--st-accent)}
.st-btn.st-ghost{background:transparent;color:var(--st-ink)}

.st-main{max-width:1040px;margin:0 auto;padding:0 24px 40px}
.st-sec{padding:56px 0;border-top:1px solid var(--st-line)}
.st-sec h2{font-size:24px;margin:0 0 6px;letter-spacing:-.01em}
.st-sub{color:var(--st-ink2);font-size:14px;margin:0 0 32px}

/* ---- 계기판 ---- */
.st-meter{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:0}
.st-meter-cell{width:150px;padding:8px 4px}
.st-meter-cell span{display:block;font-size:26px;font-weight:700;color:var(--st-accent);
  font-variant-numeric:tabular-nums;opacity:0;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease}
.st-meter-cell span.st-in{opacity:1;transform:translateY(0)}
.st-meter-cell em{display:block;font-style:normal;font-size:12px;color:var(--st-ink2);margin-top:4px}
.st-meter-stamp{text-align:right;color:var(--st-ink2);font-size:11.5px;margin-top:8px;max-width:820px;margin-left:auto;margin-right:auto;padding:0 24px}

/* ---- 카드 3종 ---- */
.st-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.st-card{background:var(--st-card);border:1px solid var(--st-line);border-radius:14px;padding:20px;transition:transform .15s ease}
.st-card:hover{transform:translateY(-2px)}
.st-card h3{margin:0 0 10px;font-size:16.5px}
.st-card p{margin:0;font-size:14.5px;color:var(--st-ink)}
.st-card small{display:block;margin-top:10px;color:var(--st-ink2);font-size:11.5px}

/* ---- 트랙 칩 + 인용 카드 ---- */
.st-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.st-chip{font-size:12.5px;padding:5px 12px;border-radius:999px;border:1px solid var(--st-line);color:var(--st-ink2)}
.st-quotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.st-quote{display:block;background:var(--st-card);border:1px solid var(--st-line);border-radius:12px;
  padding:16px;text-decoration:none;color:var(--st-ink);font-size:14px}
.st-quote:hover{border-color:var(--st-accent)}
.st-quote .st-track{font-size:11.5px;color:var(--st-accent);margin-bottom:6px;display:block}
.st-quote .st-date{font-size:11.5px;color:var(--st-ink2);margin-top:8px;display:block}

/* ---- 생태계 지도 5레이어 ---- */
.st-layers{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.st-layer{background:var(--st-card);border:1px solid var(--st-line);border-radius:14px;padding:18px 14px;
  text-decoration:none;color:var(--st-ink);text-align:center;display:block;transition:transform .15s ease}
.st-layer:hover{transform:translateY(-2px);border-color:var(--st-accent)}
.st-layer h4{margin:0 0 8px;font-size:14.5px}
.st-layer p{margin:0;font-size:12.5px;color:var(--st-ink2)}
.st-layer .st-num{display:block;margin-top:8px;font-size:15px;font-weight:700;color:var(--st-accent);font-variant-numeric:tabular-nums}

/* ---- 배역 CTA ---- */
.st-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.st-role{background:var(--st-card);border:1px solid var(--st-line);border-radius:14px;padding:22px 16px;text-align:center;text-decoration:none;color:var(--st-ink)}
.st-role:hover{border-color:var(--st-accent)}
.st-role .st-role-t{font-weight:700;font-size:15.5px;margin-bottom:6px;display:block}
.st-role .st-role-d{font-size:12.5px;color:var(--st-ink2)}
.st-feedback{display:block;text-align:center;margin-top:16px;font-size:13px;color:var(--st-ink2)}

.st-foot{max-width:1040px;margin:0 auto;padding:44px 24px 96px;border-top:1px solid var(--st-line);
  color:var(--st-ink2);font-size:13px;text-align:center}
.st-foot a{margin:0 8px}

/* ---- 카탈로그(/ecosystem) ---- */
.st-cat-head{max-width:1040px;margin:0 auto;padding:40px 24px 20px;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:12px}
.st-cat-title{font-size:22px;margin:0;font-weight:700}
.st-cat-count{color:var(--st-ink2);font-size:13.5px;margin-top:4px}
.st-kbtn{border:1px solid var(--st-line);background:var(--st-card);color:var(--st-ink2);
  padding:8px 14px;border-radius:10px;font-size:13px;cursor:pointer}
.st-kbtn:hover{border-color:var(--st-accent);color:var(--st-ink)}

.st-tabs{max-width:1040px;margin:0 auto;padding:0 24px;display:flex;gap:8px;flex-wrap:wrap}
.st-tab{border:1px solid var(--st-line);background:transparent;color:var(--st-ink2);
  padding:8px 16px;border-radius:999px;font-size:13.5px;cursor:pointer}
.st-tab.st-active{background:var(--st-accent);color:var(--st-bg);border-color:var(--st-accent)}

.st-chipbar{max-width:1040px;margin:0 auto;padding:14px 24px 0;display:flex;gap:8px;flex-wrap:wrap}
.st-chipbtn{border:1px solid var(--st-line);background:transparent;color:var(--st-ink2);
  padding:5px 12px;border-radius:999px;font-size:12.5px;cursor:pointer}
.st-chipbtn.st-active{border-color:var(--st-accent);color:var(--st-accent)}

.st-grid{max-width:1040px;margin:0 auto;padding:24px 24px 80px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.st-svc{background:var(--st-card);border:1px solid var(--st-line);border-radius:14px;padding:16px}
.st-svc-domain{font-weight:700;font-size:14.5px;text-decoration:none;color:var(--st-ink)}
.st-svc-domain:hover{color:var(--st-accent)}
.st-svc-name{color:var(--st-ink2);font-size:12.5px;margin:4px 0 8px}
.st-svc-title{font-size:13px;color:var(--st-ink);margin:0 0 8px}
.st-svc-status{font-size:12px;display:flex;align-items:center;gap:6px;color:var(--st-ink2)}
.st-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.st-dot.st-up{background:var(--st-ok)}
.st-dot.st-down{background:var(--st-off)}
.st-empty{max-width:1040px;margin:0 auto;padding:60px 24px;text-align:center;color:var(--st-ink2)}

/* ---- 팔레트(⌘K) ---- */
.st-palette-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:flex-start;
  justify-content:center;padding-top:12vh;z-index:100}
.st-palette{width:min(560px,90vw);background:var(--st-card);border:1px solid var(--st-line);
  border-radius:16px;padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.st-palette input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--st-line);
  background:var(--st-bg);color:var(--st-ink);font-size:15px;outline:none}
.st-palette input:focus{border-color:var(--st-accent)}
.st-palette-list{margin-top:10px;max-height:50vh;overflow-y:auto}
.st-palette-item{padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px;display:flex;
  justify-content:space-between;gap:8px}
.st-palette-item.st-sel{background:var(--st-bg)}
.st-palette-item span.st-p-domain{color:var(--st-ink2);font-size:12px}
.st-palette-empty{padding:16px;text-align:center;color:var(--st-ink2);font-size:13px}

@media (max-width:760px){
  .st-cards,.st-roles{grid-template-columns:1fr}
  .st-layers{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .st-hero{padding:64px 20px 40px}
  .st-meter-cell{width:110px}
}

/* 다듬기(S15 M3): 링크·버튼·입력의 hover/focus-visible/transition 일관 규칙 — 색은 토큰만 */
.st-m3-polish{}
a{transition:color .15s ease,border-color .15s ease,background-color .15s ease}
a:hover{color:var(--st-accent)}
a:focus-visible{outline:2px solid var(--st-accent);outline-offset:3px;border-radius:6px}
button{transition:background-color .15s ease,color .15s ease,transform .12s ease,box-shadow .15s ease}
button:hover{filter:brightness(1.04)}
button:focus-visible{outline:2px solid var(--st-accent);outline-offset:3px}
input{transition:border-color .15s ease,box-shadow .15s ease}
input:focus{border-color:var(--st-accent)}
input:focus-visible{outline:2px solid var(--st-accent);outline-offset:2px;box-shadow:none}

/* D: hidden 속성이 author display 규칙(flex/grid)에 지던 결함 — 실렌더(S12)에서 팔레트가 로드 직후 열려 보임(2026-09-10). UA 규칙보다 우선하도록 명시 */
[hidden]{display:none!important}

/* 팔레트 취소 버튼(가시적 취소 — S15 M9 취소가시성). 색은 토큰만 */
.st-palette{position:relative}
.st-palette-close{position:absolute;right:10px;top:10px;height:32px;padding:0 10px;border:1px solid var(--st-line);border-radius:8px;background:var(--st-card);color:var(--st-ink2);font:inherit;font-size:12px;cursor:pointer}
.st-palette-close kbd{font-family:inherit;font-size:11px;color:var(--st-ink2);border:1px solid var(--st-line);border-radius:4px;padding:0 4px;margin-left:2px}
.st-palette-close:hover{color:var(--st-ink);border-color:var(--st-accent)}
#st-palette-input{padding-right:110px}