@import url('/fonts/fonts.css');
:root{color-scheme:light;--bg:#F8FAFC;--panel:#FFFFFF;--panel2:#F1F5F9;--line:#D9E2EC;--text:#101828;--muted:#5B6678;--mint:#2ECC9A;--gold:#D97706;font-family:Inter,'Segoe UI',Arial,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 4%,#2ECC9A14,transparent 35%),var(--bg);color:var(--text);line-height:1.65}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 19px;border:1px solid var(--line);border-radius:10px;background:#FFFFFF;color:var(--text);font-size:.88rem;font-weight:600;cursor:pointer;line-height:1.35;min-height:42px}button:hover,.btn:hover{border-color:var(--mint);background:#E7FAF3}button:disabled{opacity:.5;cursor:wait}.primary{background:var(--mint);border-color:var(--mint);color:#09201c}.primary:hover{background:#89ebce}.danger{border-color:#FCA5A5;color:#B91C1C}.plain{background:transparent}a:hover{color:var(--mint)}:focus-visible{outline:3px solid var(--gold);outline-offset:4px}[hidden]{display:none!important}.skip-link{position:fixed;top:-100px;z-index:20;padding:12px;background:var(--mint);color:#062318}.skip-link:focus{top:0}header{background:#ffffffee;border-bottom:1px solid var(--line);backdrop-filter:blur(14px);position:sticky;top:0;z-index:5}.ecosystem-bar{font-size:.7rem;text-align:end;max-width:1250px;margin:auto;padding:5px 28px;color:var(--mint);letter-spacing:.04em}.head-row{display:flex;gap:20px;align-items:center;max-width:1250px;margin:auto;padding:13px 28px}.brand{display:flex;gap:10px;align-items:center;white-space:nowrap;font-weight:800;font-size:1.15rem;letter-spacing:-.04em}.brand img{width:35px;height:35px}.brand span em{color:var(--mint);font-style:normal}.head-nav{display:flex;gap:3px;margin-inline-start:auto}.head-nav a{font-size:.8rem;white-space:nowrap;padding:9px 10px;border-radius:8px;color:var(--muted)}.head-nav a.active,.head-nav a:hover{color:var(--text);background:var(--panel2)}.head-tools{display:flex;gap:8px;align-items:center}.head-tools button{padding:9px 12px;font-size:.78rem;white-space:nowrap}.head-tools select{max-width:60px;padding:8px 6px;font-size:.78rem;text-align:center;text-align-last:center}#mobile-menu{display:none}main{min-height:62vh;max-width:1194px;margin:auto;padding:48px 28px 48px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(2.2rem,4.4vw,4.2rem);line-height:1.1;letter-spacing:-.045em;max-width:900px;margin-bottom:24px}h2{font-size:clamp(1.6rem,2.5vw,2.35rem);line-height:1.22;letter-spacing:-.035em}h3{font-size:1.13rem;line-height:1.35}p{color:var(--muted)}.eyebrow{color:var(--mint);font-size:.69rem;font-weight:700;letter-spacing:.14em;margin-bottom:20px}.hero{padding:35px 0 42px;display:grid;grid-template-columns:1.3fr 1fr;gap:54px;align-items:center}.hero h1{max-width:700px}.hero-copy>p:not(.eyebrow){font-size:1.03rem;max-width:630px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px}.fine{font-size:.78rem;color:var(--muted);line-height:1.6}.hero .fine{margin-top:18px}.seal{border:1px solid #B7F4DD;border-radius:24px;padding:32px;background:linear-gradient(140deg,#E7FAF3,#FFFFFF);position:relative;box-shadow:0 25px 80px rgba(15,23,42,.08)}.seal-top{display:flex;justify-content:space-between;align-items:center;font-size:.65rem;color:var(--gold);letter-spacing:.13em}.seal-graphic{display:flex;justify-content:center;align-items:center;min-height:215px}.seal-graphic img{width:180px;filter:drop-shadow(0 12px 22px #0005)}.seal h3{text-align:center;font-size:1.35rem;margin-bottom:8px}.seal p{text-align:center;font-size:.83rem}.seal-steps{display:flex;justify-content:space-between;gap:12px;margin-top:28px;border-top:1px solid #B7F4DD;padding-top:22px}.seal-steps span{font-size:.68rem;color:var(--muted)}.seal-steps b{display:block;color:var(--mint);font-size:1.2rem}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:25px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.card{border:1px solid var(--line);background:var(--panel);padding:25px;border-radius:16px;min-width:0}.card p:last-child{margin-bottom:0}.card p{font-size:.91rem}.card .number{color:var(--gold);display:block;margin-bottom:22px;font-size:.8rem}.card.link:hover{border-color:var(--mint)}.banner{margin-top:35px;border:1px solid #B7F4DD;border-radius:18px;padding:30px;background:#E7FAF3;display:flex;gap:35px;align-items:center;justify-content:space-between}.banner h2{font-size:1.7rem}.banner .btn{white-space:nowrap}.page-title{max-width:860px;margin-bottom:35px}.page-title h1{font-size:clamp(2rem,3.7vw,3.4rem)}.page-title p{max-width:760px}.badge{display:inline-block;border:1px solid #B8EBD8;border-radius:30px;color:#087F62;background:#E7FAF3;font-size:.68rem;font-weight:600;padding:3px 10px}.badge.gold{border-color:#FBBF77;color:var(--gold);background:#FFF6E5}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid .full{grid-column:1/-1}label{display:block;margin-bottom:18px;font-size:.86rem;color:var(--text)}input,textarea,select{display:block;width:100%;background:#FFFFFF;border:1px solid #CBD5E1;border-radius:9px;color:var(--text);padding:11px 13px;margin-top:7px;min-height:44px}textarea{resize:vertical;min-height:100px}select option{background:var(--bg);color:var(--text)}input[type=radio],input[type=checkbox]{display:inline;width:auto;min-height:auto;margin:0 10px 0 0}fieldset{border:0;padding:0;margin:0}fieldset legend{font-weight:700;margin-bottom:16px}.question{margin:0 0 23px;padding-bottom:22px;border-bottom:1px solid var(--line)}.question legend{font-size:.96rem}.question label{background:var(--bg);padding:12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;margin:8px 0}.progress{height:4px;background:var(--line);border-radius:4px;overflow:hidden}.progress span{display:block;background:var(--mint);height:100%}.tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:0 0 20px;margin:20px 0}.tabs button.active{background:var(--mint);color:var(--bg)}.empty{text-align:center;padding:55px 25px;border:1px dashed #CBD5E1;border-radius:18px}.empty img{width:70px;margin-bottom:18px}.empty p{max-width:560px;margin:0 auto}.course-code{font-family:monospace;color:var(--gold);font-size:.8rem}.prose{white-space:pre-line;color:var(--muted);max-width:800px}.notice{border:1px solid #FBBF77;background:#FFF6E5;padding:16px 20px;border-radius:10px;font-size:.87rem;color:#92600A;margin:20px 0}.langFallback{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;border-bottom:1px solid #FBBF77;background:#FFF6E5;color:#92600A;font-size:.8rem;padding:8px 16px}.langFallback button{padding:5px 12px;min-height:30px;font-size:.75rem;border-color:#FBBF77;background:#FFFFFF;color:#92600A}.langFallback button:hover{background:#FFEBC2}.price{font-size:2rem;color:var(--text);font-weight:750;line-height:1.2;margin:20px 0}.price-card{display:flex;flex-direction:column}.price-card .actions{margin-top:auto;padding-top:25px}.price-card.featured{border-color:var(--mint);background:linear-gradient(145deg,#E7FAF3,var(--panel))}.details{margin-top:22px}.details summary{cursor:pointer;padding:15px 0;font-weight:600;border-bottom:1px solid var(--line)}.details p{padding:14px 0}.record{border-bottom:1px solid var(--line);padding:15px 0}.record:last-child{border-bottom:0}.record p{margin-bottom:7px;overflow-wrap:anywhere}.mono{font-family:monospace;font-size:.78rem;word-break:break-all}.metrics{display:flex;flex-wrap:wrap;gap:15px;margin:22px 0}.metric{flex:1;min-width:140px;background:var(--panel);padding:20px;border:1px solid var(--line);border-radius:12px}.metric b{display:block;color:var(--mint);font-size:1.8rem}.metric span{font-size:.8rem;color:var(--muted)}.score{font-size:4rem;color:var(--mint);font-weight:800}.assistant-log{max-height:340px;overflow:auto;display:flex;flex-direction:column;gap:12px;margin:18px 0}.bubble{white-space:pre-wrap;padding:14px 17px;border:1px solid var(--line);border-radius:12px;font-size:.9rem;background:var(--bg)}.bubble.user{background:#E7FAF3;margin-inline-start:24px}.companion-orb{width:120px;height:120px;border-radius:50%;margin:15px auto 25px;background:radial-gradient(circle at 35% 30%,#c8f2cc,#5cbbad 37%,#275161 70%,#15272c);box-shadow:0 0 75px #5de1ba22;border:1px solid #8edcc5}.footer-inner{border-top:1px solid var(--line);background:#FFFFFF;padding:45px max(28px,calc((100% - 1138px)/2)) 95px}.footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:45px}.footer-cols h4{font-size:.7rem;letter-spacing:.08em;color:var(--gold);margin:0 0 15px}.footer-cols a:not(.brand){display:block;color:var(--muted);font-size:.8rem;margin:7px 0}.footer-cols .brand{margin-bottom:13px}.footer-cols p{font-size:.78rem}.footer-copy{margin-top:28px;color:#667085;font-size:.7rem}#bottom{display:none!important}#bottom a{flex:1;font-size:.71rem;text-align:center;padding:10px 4px;color:var(--muted);border-radius:10px;line-height:1.3}#bottom a.active{background:#1b3a33;color:var(--mint)}[dir=rtl] #bottom{transform:translateX(50%)}#help{position:fixed;bottom:22px;inset-inline-end:22px;border-radius:50%;width:49px;height:49px;padding:0;font-size:1.35rem;background:var(--mint);color:#062318;z-index:6;box-shadow:0 5px 25px rgba(15,23,42,.18)}#notice{position:fixed;top:105px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 36px);background:#E7FAF3;color:var(--text);padding:12px 20px;border:1px solid var(--mint);border-radius:12px;z-index:30;font-size:.88rem;box-shadow:0 15px 40px rgba(15,23,42,.15)}#notice:empty{display:none}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:22px;width:min(620px,calc(100vw - 28px));max-height:calc(100dvh - 40px);padding:28px;box-shadow:0 35px 100px rgba(15,23,42,.25);overflow:auto}dialog::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(7px)}dialog h2{margin-bottom:14px}dialog .modal-top{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:16px}dialog .modal-top button{padding:7px 12px;min-height:36px}dialog.intro-modal{padding:0;overflow:hidden;background:#FFFFFF}dialog.intro-modal .intro-toolbar{padding:16px 20px;display:flex;justify-content:space-between;align-items:center}.intro-toolbar span{font-size:.72rem;color:var(--gold);letter-spacing:.1em}.intro-toolbar button{padding:6px 12px;min-height:33px;font-size:.75rem}.intro-visual{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 20px 6px;background:linear-gradient(140deg,#E7FAF3,#FFFFFF)}.intro-visual img{filter:drop-shadow(0 10px 18px #0002)}.intro-step{font-size:.7rem;color:var(--gold);letter-spacing:.14em;font-weight:700}.intro-caption{padding:20px 25px 12px} .intro-caption h2{font-size:1.7rem}.intro-controls{display:flex;justify-content:space-between;gap:10px;padding:12px 24px 22px}.intro-controls button{font-size:.78rem}.intro-dots{display:flex;gap:5px;padding:0 24px 22px}.intro-dots span{height:3px;background:var(--line);flex:1}.intro-dots span.active{background:var(--mint)}.admin-code{min-height:240px;font-family:monospace;font-size:.78rem}.wide{max-width:100%}.error-panel{padding:30px;border:1px solid #FCA5A5;border-radius:15px}.question-count{color:var(--gold);font-size:.8rem;margin-bottom:6px}@media(max-width:1140px){.head-row{flex-wrap:wrap;gap:12px}.head-nav{display:none;order:4;width:100%;margin:0;grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 0}.head-nav.open{display:grid}#mobile-menu{display:inline-flex}.head-tools{margin-inline-start:auto}.hero{gap:25px}}@media(max-width:740px){main{padding:26px 18px 32px}.head-row{padding:10px 16px}.ecosystem-bar{padding:4px 18px}.brand{font-size:1rem}.brand img{width:29px;height:29px}.head-tools{gap:5px}.head-tools button{font-size:.71rem;padding:8px;min-height:36px}.head-tools select{font-size:.72rem;max-width:52px;min-height:36px;padding:5px;margin:0}.hero{grid-template-columns:1fr;padding:12px 0 30px;gap:27px}.hero h1{font-size:2.75rem;max-width:600px}.seal{padding:23px}.seal-graphic{min-height:135px}.seal-graphic img{width:130px}.grid,.grid.two,.form-grid{grid-template-columns:1fr}.banner{display:block;padding:23px}.footer-cols{grid-template-columns:1fr 1fr;gap:26px}.footer-cols>div:first-child{grid-column:1/-1}.footer-inner{padding:32px 20px 95px}h1{font-size:2.3rem}.card{padding:21px}#bottom a{font-size:.66rem;padding:11px 4px}#help{bottom:15px;inset-inline-end:15px;width:44px;height:44px}dialog{padding:22px}.intro-caption h2{font-size:1.35rem}.intro-caption p{font-size:.87rem}.intro-controls{padding:7px 18px 14px}.head-nav a{font-size:.79rem}.head-tools #install{display:none}.head-row #install-mobile{display:inline-flex}.head-nav .nav-install{display:block}}@media(min-width:741px){.head-nav .nav-install{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media print{header,footer,#bottom,#help,.actions,dialog{display:none!important}body{background:white;color:black}.card{background:white;border-color:#aaa}.prose,p{color:#333}main{max-width:100%}}

/* 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; }
}