/* AX Lab 화면 다듬기 — 페이지 안 <style> 뒤에 불러와 덮어쓴다. 계산 로직과 무관한 겉모습만 바꾼다.
   원칙: 빨강은 '지금 위치'와 '다음에 누를 버튼'에만. 나머지는 회색 단계로 위계를 만든다. */
:root{
  --bg:#FFFFFF; --panel:#F4F5F7; --line:#E3E5E9; --ink:#14161B; --body:#3A3F48; --mute:#6A717D; --faint:#9AA1AC;
  --red:#DB082F; --red-soft:#FDEEF1;
  --ok:#17794A; --okbg:#E9F6EF; --warn:#9A5B00; --warnbg:#FFF4E0; --bad:#C8102E; --badbg:#FDEEF1;
  --code:#1B1E24; --code-fg:#EEF0F3;
  --f-ko:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --f-lat:var(--f-ko);
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,"D2Coding",monospace;
  --r-s:8px; --r-m:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121418; --panel:#1B1E24; --line:#2C3038; --ink:#F1F2F4; --body:#CDD1D8; --mute:#9AA1AC; --faint:#6E7581;
  --red:#FF3D5E; --red-soft:#2E1419; --ok:#5CC88E; --okbg:#14271D; --warn:#E8AB45; --warnbg:#2A2213; --bad:#FF5A74; --badbg:#2E1419;
  --code:#0B0D10; --code-fg:#E8EAED}}
:root[data-theme="dark"]{
  --bg:#121418; --panel:#1B1E24; --line:#2C3038; --ink:#F1F2F4; --body:#CDD1D8; --mute:#9AA1AC; --faint:#6E7581;
  --red:#FF3D5E; --red-soft:#2E1419; --ok:#5CC88E; --okbg:#14271D; --warn:#E8AB45; --warnbg:#2A2213; --bad:#FF5A74; --badbg:#2E1419;
  --code:#0B0D10; --code-fg:#E8EAED}

body{font-size:16px;line-height:1.65;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
b,strong{color:var(--ink);font-weight:700}

/* ---------- 상단: 1줄 브랜드·설정, 2줄 일차, 3줄 이 날의 실습 ---------- */
header.top{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.bar{padding-block:14px 10px;gap:12px 24px}
.brand{text-decoration:none;align-items:center}
.brand b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.brand span{font-size:13px}
.ctl{gap:6px 8px}
.ctl label{font-size:13px;letter-spacing:0;color:var(--mute);margin-left:6px}
.ctl select,.ctl input{height:34px}
.ctl input#team{width:72px}

.daybar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border:0;padding-bottom:12px}
.daybar a{display:grid;gap:1px;padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-s);color:var(--mute);text-decoration:none;font-size:14px;line-height:1.35;min-width:0}
.daybar a:last-child{border-right:1px solid var(--line)}
.daybar a em{font-style:normal;font-size:12px;font-weight:600;color:var(--faint)}
.daybar a span{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.daybar a:hover{border-color:var(--faint);color:var(--ink)}
.daybar a[aria-current=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.daybar a[aria-current=true] em{color:color-mix(in srgb,var(--bg) 65%,transparent)}
@media (max-width:640px){.daybar a{padding:8px 10px}.daybar a span{font-size:13px}}

nav.tabs{gap:4px;margin-inline:-2px;padding-bottom:0}
nav.tabs a{padding:10px 12px 11px;font-size:15px;border-bottom-width:2px;color:var(--mute)}
nav.tabs a:hover{color:var(--ink)}
nav.tabs a .blk{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:0;padding:1px 6px;margin-right:7px;border-radius:5px;background:var(--panel);color:var(--mute);vertical-align:1px}
nav.tabs a[aria-current=page]{border-bottom-color:var(--red)}
nav.tabs a[aria-current=page] .blk{background:var(--red-soft);color:var(--red)}

/* ---------- 본문 ---------- */
main{padding-block:36px 80px}
section.view{gap:22px}
h1{font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.3;display:block}
h1::before{content:none}
h2{font-size:19px;font-weight:700;letter-spacing:-.015em;margin-bottom:12px}
.lede{margin:10px 0 0;font-size:16px;color:var(--mute);max-width:70ch}

.panel{border-radius:var(--r-m);padding:20px 22px}
.box{border-radius:var(--r-m);padding:18px 22px}
.small{font-size:14px}

/* 입력 */
select,input[type=text],input[type=number],textarea{border-radius:var(--r-s);padding:7px 10px;border-color:var(--line);transition:border-color .12s}
select:hover,input[type=text]:hover,input[type=number]:hover,textarea:hover{border-color:var(--faint)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
textarea{border-radius:var(--r-s)}

/* 버튼: 주 버튼 하나만 빨강 */
.btn{border-radius:var(--r-s);padding:9px 16px;font-weight:600;font-size:15px;border-color:var(--line);color:var(--ink);transition:background .12s,border-color .12s}
.btn:hover:not(:disabled){border-color:var(--ink)}
.btn.primary{padding:11px 22px;font-size:15.5px}
.btn.primary:hover:not(:disabled){filter:brightness(1.07);border-color:var(--red)}
.btn.ghost{color:var(--body);background:var(--bg)}
.seg{border-radius:var(--r-s);overflow:hidden}
.seg button{padding:6px 12px;transition:background .12s}
.seg button:hover:not([aria-pressed=true]){background:var(--panel)}

/* 명령줄 */
.cmdline{border-radius:var(--r-s);overflow:hidden}
.cmdline code{font-size:13.5px;padding:12px 14px}
.copy{padding:0 16px;font-weight:600}

/* 표 — 입력용 표에 .form(그리드)이 같이 걸려 폭이 줄던 것을 표로 되돌린다 */
table.form{display:table;width:100%}
table{font-size:14.5px}
th,td{padding:11px 12px}
th{font-size:13px;font-weight:600;letter-spacing:0;color:var(--mute);background:var(--panel);border-bottom:0}
thead th:first-child,tr:first-child>th:first-child{border-radius:var(--r-s) 0 0 var(--r-s)}
thead th:last-child,tr:first-child>th:last-child{border-radius:0 var(--r-s) var(--r-s) 0}
tbody tr:hover td{background:color-mix(in srgb,var(--panel) 55%,transparent)}
.tag{border-radius:5px;padding:2px 8px}
.chip{border-radius:999px;letter-spacing:0;font-size:12px}

/* 숫자 카드 */
.stats{gap:10px;background:none;border:0}
.stat{border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px}
.stat .k{font-size:13px}
.stat .v{font-size:30px;font-weight:800;letter-spacing:-.02em}
.verdict{border-radius:var(--r-m);border-left-width:4px}

/* 막대 */
.track{border-radius:4px;overflow:visible}
.fill{border-radius:4px}

/* 실습 고유 요소 */
.case{border-radius:var(--r-m);overflow:hidden}
.judge-btns button{border-radius:var(--r-m)}
.minis button{border-radius:6px}
.rb .item{border-radius:0 var(--r-s) var(--r-s) 0}
.trig div{border-radius:var(--r-s)}
.gatebox{border-radius:var(--r-m)}
.ev pre,pre.report{border-radius:var(--r-s)}
.fp{border-radius:5px}
.sample-badge{border-radius:5px}
.progress i{border-radius:3px}
.steps>li::before{font-weight:800}
.note{font-size:14px}

.toast{border-radius:999px;padding:10px 18px;font-weight:600}
footer{font-size:13px;padding-block:22px}

/* 실습 파일 받기·QR — 상단 오른쪽 */
.ctl .dl,.ctl .qr-link{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:var(--r-s);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.ctl .dl{margin-left:6px;background:var(--ink);color:var(--bg)}
.ctl .dl::before{content:"";width:14px;height:14px;margin-right:6px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5M2 12v2h12v-2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5M2 12v2h12v-2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ctl .dl:hover{filter:brightness(1.25)}
.ctl .qr-link{border:1px solid var(--line);color:var(--ink);padding:0 11px}
.ctl .qr-link:hover{border-color:var(--ink)}