/* 공통 디자인 시스템: 테스트(index) · 판매자(seller) · 보증서(certificate) 화면이 함께 씁니다.
   디자인을 바꿀 때는 먼저 :root 토큰만 바꿔 보세요. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root{
  --bg:#f2f4f6;
  --surface:#ffffff;
  --surface-2:#f7f8fa;
  --ink:#191f28;
  --ink-2:#4e5968;
  --ink-3:#8b95a1;
  --line:#e5e8eb;
  --line-strong:#d1d6db;
  --primary:#0a7a58;
  --primary-press:#086548;
  --primary-weak:#e7f4ee;
  --on-primary:#ffffff;
  --danger:#e0403f;
  --danger-weak:#fdecec;
  --warn:#b86e00;
  --warn-weak:#fff4e0;
  --paper:#fffdf7;
  --eco:#9a5b1e;          /* 환경 강조색(구리): 탄소·환경 온도에만 사용 */
  --eco-weak:#f8eee4;
  --paper-ink:#2a2925;
  --radius:16px;
  --radius-sm:10px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#101215;--surface:#1a1d21;--surface-2:#22262b;--ink:#eef0f2;--ink-2:#b0b8c1;--ink-3:#7e8792;
    --line:#2b3036;--line-strong:#3a4047;--primary:#2fb383;--primary-press:#27a074;--primary-weak:#163328;--on-primary:#06150f;
    --danger:#ff6b6a;--danger-weak:#3a1f1f;--warn:#f0aa45;--warn-weak:#3a2c14;--paper:#23231f;--paper-ink:#ecebe3;--eco:#e2a66b;--eco-weak:#3a2a1c;
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--font);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
a{color:inherit}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}

/* 레이아웃 */
.appbar{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent}
.appbar-in{max-width:640px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;text-decoration:none}
.brand-mark{width:22px;height:22px;flex:none;background:url(/assets/logo.svg) center/contain no-repeat}
@media (prefers-color-scheme:dark){.brand-mark{background-image:url(/assets/logo-dark.svg)}}
.appbar-meta{font-size:13px;color:var(--ink-3)}
.page{max-width:640px;margin:0 auto;padding:8px 20px 96px}
.page-head{padding:16px 0 20px}
.eyebrow{font-size:13px;font-weight:600;color:var(--primary);margin:0 0 6px}
.title{font-size:24px;line-height:1.35;font-weight:700;letter-spacing:-.025em;margin:0}
.lead{font-size:15px;color:var(--ink-2);margin:8px 0 0}

/* 섹션 */
.section{background:var(--surface);border-radius:var(--radius);padding:20px;margin-bottom:12px}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.section-title{font-size:17px;font-weight:700;letter-spacing:-.02em;margin:0}
.section-sub{font-size:14px;color:var(--ink-2);margin:4px 0 0}
.section-label{font-size:13px;font-weight:600;color:var(--ink-3);margin:0 0 10px}
.step-no{font-size:13px;font-weight:700;color:var(--ink-3);margin-bottom:2px}
.divider{height:1px;background:var(--line);margin:16px 0;border:0}

/* 텍스트 */
.muted{color:var(--ink-3);font-size:13px}
.small{font-size:13px;color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums}
.big-num{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.25}

/* 버튼 */
.btn{appearance:none;border:0;border-radius:var(--radius-sm);padding:0 16px;height:44px;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;transition:background .15s,opacity .15s}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:active{background:var(--primary-press)}
.btn-secondary{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-text{background:transparent;color:var(--ink-2);padding:0 8px}
.btn-danger{background:var(--danger-weak);color:var(--danger)}
.btn-good{background:var(--primary-weak);color:var(--primary)}
.btn-block{width:100%;height:52px;font-size:16px;border-radius:12px}
.btn:disabled{opacity:.4;cursor:default}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn-row .btn{flex:1 1 0;min-width:120px}

/* 하단 고정 버튼 */
.cta{position:fixed;left:0;right:0;bottom:0;z-index:10;background:linear-gradient(to top,var(--bg) 70%,transparent);padding:16px 20px calc(16px + env(safe-area-inset-bottom))}
.cta-in{max-width:600px;margin:0 auto}

/* 입력 */
.field{margin-top:14px}
.field:first-child{margin-top:0}
.field-label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.input,.select{width:100%;height:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238b95a1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.input:focus,.select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-weak)}
.select:disabled{background-color:var(--surface-2);color:var(--ink-3)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* 선택지 */
.choices{display:grid;gap:8px}
.choice{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s}
.choice input{accent-color:var(--primary);width:18px;height:18px;margin:2px 0 0;flex:none}
.choice-title{font-size:15px;font-weight:600;display:block}
.choice-desc{font-size:13px;color:var(--ink-3);display:block;margin-top:1px}
.choice:has(input:checked){border-color:var(--primary);background:var(--primary-weak)}
.choice.is-muted .choice-title{color:var(--ink-2)}
.seg{display:flex;background:var(--surface-2);border-radius:12px;padding:4px;gap:4px}
.seg label{flex:1;text-align:center;padding:10px 0;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* 상태 표시 */
.status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.status.pass{color:var(--primary)}.status.pass::before{background:var(--primary)}
.status.fail{color:var(--danger)}.status.fail::before{background:var(--danger)}
.status.unsupported,.status.skipped,.status.warn{color:var(--warn)}.status.unsupported::before,.status.skipped::before,.status.warn::before{background:var(--warn)}
.status.running{color:var(--ink-2)}.status.running::before{background:var(--ink-2);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:6px;background:var(--surface-2);color:var(--ink-2);font-size:12px;font-weight:600}
.tag.good{background:var(--primary-weak);color:var(--primary)}
.tag.bad{background:var(--danger-weak);color:var(--danger)}
.tag.warn{background:var(--warn-weak);color:var(--warn)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.notice{background:var(--warn-weak);color:var(--warn);border-radius:12px;padding:12px 14px;font-size:14px}
.notice.danger{background:var(--danger-weak);color:var(--danger)}
.notice.info{background:var(--surface-2);color:var(--ink-2)}

/* 표 형태 목록 */
.rows{margin:0}
.rows>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line)}
.rows>div:first-child{border-top:0;padding-top:0}
.rows dt{color:var(--ink-3);font-size:14px;flex:none}
.rows dd{margin:0;text-align:right;font-size:14px;font-weight:500}

details>summary{cursor:pointer;list-style:none;font-size:14px;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:6px}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px;transition:transform .15s}
details[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}

@media (min-width:720px){
  .page{padding-top:16px}
  .title{font-size:28px}
}