:root{color-scheme:dark;--bg:#0b1210;--panel:#111e19;--line:#294337;--text:#f3f8f5;--muted:#bac9c1;--mint:#7cffcb;--gold:#ffd18c;font:16px/1.6 Inter,'Segoe UI',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}a{color:var(--mint);text-underline-offset:4px}button,input,textarea,select{font:inherit}button,.button{border:1px solid var(--line);border-radius:12px;padding:10px 17px;color:var(--text);background:var(--panel);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:600;gap:8px;min-height:44px}button:hover,.button:hover{border-color:var(--mint)}.primary{background:var(--mint);color:#052017;border-color:var(--mint)}button:disabled{opacity:.6;cursor:wait}h1{font-size:clamp(2.2rem,5vw,4.5rem);line-height:1.12;letter-spacing:-.035em;margin:18px 0 24px;max-width:940px}h2{font-size:1.6rem;line-height:1.25}h3{line-height:1.35}p{color:var(--muted)}header{border-bottom:1px solid var(--line);position:relative;z-index:5;background:var(--bg)}.header-inner{max-width:1380px;margin:auto;display:flex;align-items:center;gap:24px;padding:18px 24px}.brand{font-size:1.15rem;color:var(--text);text-decoration:none;display:flex;gap:9px;align-items:center;font-weight:750;white-space:nowrap}.brand img{width:32px;height:32px}.topnav{display:flex;gap:3px;align-items:center;flex:1}.topnav a{padding:8px 10px;font-size:.87rem;text-decoration:none;color:var(--muted);border-radius:10px;white-space:nowrap}.topnav a[aria-current],#bottom a[aria-current]{background:#203c30;color:var(--mint)}.header-actions{display:flex;align-items:center;gap:8px}.header-actions button,.header-actions a,.header-actions select{font-size:.84rem;padding:8px 11px;white-space:nowrap}.menu-toggle{display:none}main{max-width:1160px;margin:auto;padding:48px 24px 72px;min-height:60vh}main:focus{outline:none}.eyebrow{font:700 .75rem/1.5 ui-monospace,monospace;letter-spacing:.13em;color:var(--mint);text-transform:uppercase}.lead{font-size:1.15rem;max-width:840px}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:25px;margin:18px 0;min-width:0}.grid>.panel{margin:0}.metrics{margin:48px 0;display:flex;gap:60px;flex-wrap:wrap}.metrics strong{font-size:2.2rem;display:block;color:var(--gold)}.metrics span{font-size:.83rem;color:var(--muted)}.callout{border:1px solid #416353;border-radius:14px;padding:16px 20px;color:var(--muted);margin:20px 0;font-size:.91rem;background:#102b21}.sample-tag{display:inline-block;color:var(--gold);font-size:.8rem;font-weight:700}.score{font-size:3.5rem;font-weight:750;line-height:1.2;color:var(--mint)}label{display:block;font-weight:600;margin:14px 0 7px}input,textarea,select{background:#091510;color:var(--text);border:1px solid #456052;border-radius:10px;padding:11px 13px;max-width:100%;width:100%}select{width:auto}textarea{min-height:140px;resize:vertical}textarea.code{font:13px/1.6 ui-monospace,monospace;min-height:390px;tab-size:2}input[type=checkbox]{width:20px;height:20px;accent-color:var(--mint);vertical-align:middle;margin-right:8px}small,.muted{color:var(--muted)}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:.91rem}th,td{padding:13px 12px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--muted);font-weight:500}.table-wrap table{min-width:490px}.measure{margin-bottom:15px}.measure progress{width:100%;height:10px;accent-color:var(--mint)}.pill{display:inline-block;padding:4px 10px;border-radius:20px;background:#214334;color:var(--mint);font-size:.8rem}.danger{color:#ffc5b5}.break{overflow-wrap:anywhere}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.82rem;background:#08110e;padding:18px;border-radius:12px}details{border-bottom:1px solid var(--line);padding:14px 0}summary{cursor:pointer;font-weight:650}.page-title{font-size:clamp(2rem,4vw,3.2rem)}.subtle-link{color:var(--muted)}footer{border-top:1px solid var(--line);padding:45px 24px 100px}.footer-inner{max-width:1160px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:45px;font-size:.86rem}footer h3{font-size:.76rem;letter-spacing:.1em;color:var(--mint);text-transform:uppercase}footer a{display:block;color:var(--muted);text-decoration:none;margin:8px 0}#bottom{display:none}#notice{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#244235;color:var(--text);border:1px solid var(--mint);border-radius:14px;padding:14px 22px;max-width:min(90vw,650px);z-index:40;box-shadow:0 12px 40px #0008}#notice:empty{display:none}dialog{background:var(--panel);color:var(--text);border:1px solid #456c57;border-radius:22px;padding:27px;max-width:min(94vw,760px);max-height:90dvh;overflow:auto}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}dialog h2{margin-top:0}dialog video{width:100%;border-radius:14px;display:block;margin-bottom:12px}.intro-caption h3{margin:12px 0 3px}.intro-caption p{margin-top:0}.intro-steps{display:flex;gap:8px;margin-bottom:17px}.intro-steps span{height:3px;background:#385444;flex:1}.intro-steps span.active{background:var(--mint)}.skip-link{position:fixed;top:-100px;left:10px;z-index:100;background:var(--mint);color:#051c12;padding:12px}.skip-link:focus{top:10px}:focus-visible{outline:3px solid var(--gold);outline-offset:4px}[hidden]{display:none!important}.empty{padding:35px;border:1px dashed #4c6a58;border-radius:20px}.divider{margin:35px 0;border:0;border-top:1px solid var(--line)}.langFallback{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;border-bottom:1px solid var(--gold);background:#2b2312;color:var(--gold);font-size:.85rem;padding:10px 20px}.langFallback button{border-color:var(--gold);color:var(--gold);background:transparent;padding:6px 13px;min-height:34px;font-size:.8rem}.langFallback button:hover{background:#3a300f}
@media(max-width:1150px){.header-inner{flex-wrap:wrap;gap:12px}.brand{margin-right:auto}.header-actions{order:1}.topnav{order:2;flex-basis:100%;justify-content:center}.header-inner{padding:14px 22px}.header-actions select{max-width:130px}}
@media(max-width:700px){main{padding:30px 18px 80px}.header-inner{padding:12px 16px}.header-actions{gap:5px}.header-actions button,.header-actions a,.header-actions select{font-size:.76rem;padding:7px 9px}.brand{font-size:1rem}.brand img{width:28px;height:28px}.menu-toggle{display:inline-flex}.header-actions{width:100%;justify-content:space-between}.topnav{display:none;flex-wrap:wrap;justify-content:start}.topnav.open{display:flex}.topnav a{min-width:30%;font-size:.95rem;padding:10px}.grid,.two{grid-template-columns:1fr}.panel{padding:20px}.metrics{gap:24px;justify-content:space-between;margin:32px 0}.metrics strong{font-size:1.8rem}.metrics span{font-size:.73rem}.footer-inner{grid-template-columns:1fr 1fr;gap:22px}.footer-inner>div:first-child{grid-column:1/-1}#bottom{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:20;background:#0b1210f5;border-top:1px solid var(--line);padding:7px 8px max(7px,env(safe-area-inset-bottom));gap:3px}#bottom a{flex:1;text-align:center;font-size:.75rem;padding:11px 3px;text-decoration:none;color:var(--muted);border-radius:12px;overflow-wrap:anywhere}dialog{padding:19px}.score{font-size:2.7rem}.row>button,.row>.button{font-size:.87rem}h1{max-width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(max-width:700px){.header-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch}.header-actions button,.header-actions a{white-space:normal;overflow-wrap:anywhere;min-width:0;text-align:center;line-height:1.3}.header-actions select{width:100%;min-width:0;max-width:100%;padding:7px 4px}}

/* Sove Taste light refresh for trust.sovetrust.com. Keeps evidence-first UX, removes the dark-mode weight. */
:root{color-scheme:light;--bg:#F8FAFC;--panel:#FFFFFF;--line:#D9E3EE;--text:#111827;--muted:#516174;--mint:#2ECC9A;--gold:#F59E0B;font:16px/1.6 Inter,'Segoe UI',system-ui,sans-serif}
body{background:var(--bg);color:var(--text)}
a{color:#047857}
button,.button{background:#FFFFFF;color:#111827;border-color:var(--line);box-shadow:0 8px 18px rgba(15,23,42,.04)}
button:hover,.button:hover{border-color:#8BE6C9}.primary{background:var(--mint);border-color:var(--mint);color:#052017}
p,small,.muted,th,footer a{color:var(--muted)}
header{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);box-shadow:0 8px 30px rgba(15,23,42,.05)}
.brand{color:#111827}.topnav a{color:#475569}.topnav a[aria-current],#bottom a[aria-current]{background:#EAFBF5;color:#047857}
main{background:transparent}
h1,.page-title{font-family:Georgia,"Times New Roman",serif;color:#0F172A}
.eyebrow,footer h3{color:#047857}
.panel,.callout,.empty{background:#FFFFFF;border-color:var(--line);box-shadow:0 18px 45px rgba(15,23,42,.06)}
.metrics strong,.sample-tag{color:var(--gold)}.score{color:#047857}
input,textarea,select{background:#FFFFFF;color:#111827;border-color:var(--line)}
input[type=checkbox]{accent-color:var(--mint)}
pre{background:#F1F6FB;color:#334155}.pill{background:#EAFBF5;color:#047857}
table,th,td{border-color:var(--line)}.table-wrap table{background:#FFFFFF}
footer{background:#FFFFFF;border-top-color:var(--line)}
#notice{background:#FFFFFF;color:#111827;border-color:#8BE6C9;box-shadow:0 18px 45px rgba(15,23,42,.16)}
dialog{background:#FFFFFF;color:#111827;border-color:var(--line)}
dialog::backdrop{background:rgba(15,23,42,.22);backdrop-filter:blur(5px)}
.intro-steps span{background:#D9E3EE}.intro-steps span.active{background:var(--mint)}
.skip-link{background:var(--mint);color:#052017}
@media(max-width:700px){#bottom{background:rgba(255,255,255,.96);border-top-color:var(--line);box-shadow:0 -12px 32px rgba(15,23,42,.08)}#bottom a{color:#475569}}

/* sove-qa: mobile overflow fix (F-platform-003) — 기존 규칙을 덮지 않고 좁게 겹쳐 쓴다.
   왜: 390px 폭에서 가로 스크롤이 생겨 오른쪽 글자가 잘렸다. 측정한 범인은
   (1) .navActions 가 줄바꿈하지 않는 것, (2) 히어로 글자가 컨테이너를 넘는 것.
   overflow-x:hidden 으로 가리지 않는다 — 잘린 글자는 그대로 잘린다. */
@media (max-width: 620px) {
  /* 버튼이 한 줄에 안 들어가면 다음 줄로 내려간다 */
  .navActions { flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }

  /* 긴 낱말과 자간이 겹쳐 폭을 넘기는 것을 막는다.
     낱말 중간을 끊지 않도록 break-word 를 쓴다 — break-all 은 읽기 어려워진다. */
  .eyebrow, .lead, h1, h2 { max-width: 100%; overflow-wrap: break-word; }

  /* 자간이 큰 라벨은 마지막 글자 뒤 여백이 그대로 폭에 더해진다 */
  .eyebrow { letter-spacing: .22em; }

  /* 탭 띠는 **자기 안에서** 가로로 스크롤한다.
     측정해 보니 .mobileBar 는 폭이 366px 로 멀쩡한데 그 안의 탭이 521px 까지
     뻗어 문서 전체를 밀고 있었다. 탭을 줄이거나 숨기는 대신 띠 안에서 밀리게
     한다 — 탭 바의 표준 동작이고, 항목이 사라지지 않는다.
     스크롤 막대는 숨긴다: 모바일에서는 손가락으로 미는 것이 자연스럽다. */
  .mobileBar, .tabs, .tabbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mobileBar::-webkit-scrollbar, .tabs::-webkit-scrollbar, .tabbar::-webkit-scrollbar { display: none; }

  /* 상단 우측 영역은 스크롤보다 줄바꿈이 낫다 — 로그인 버튼이 숨으면 안 된다 */
  .topbar-right, .navRight, .headerRight { flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }

  /* 그리드·플렉스 항목의 기본 min-width:auto 를 푼다.
     이것이 agora/vcf/shield 의 진짜 원인이었다. .hero 는 모바일에서
     grid-template-columns:1fr 로 바뀌는데, 항목의 최소 폭이 '내용의 최소 폭'
     이라서 안의 버튼 줄이 열을 뷰포트 폭까지 밀어 올렸다 — 부모가 16px 패딩
     안에 있는데도 390px 를 차지해 오른쪽으로 16px 삐져나갔다.
     min-width:0 은 이 상황의 표준 해법이고, 내용을 자르지 않는다. */
  .hero > *, .workspace > *, .grid > * { min-width: 0; }

  /* 버튼 줄도 접히게 한다. 접히지 않으면 위의 min-width:0 이 글자를 짓눌러
     가로 스크롤 대신 레이아웃이 깨진 것처럼 보인다. */
  .actions { flex-wrap: wrap; row-gap: 8px; }
}