/* ═══════════════════════════════════════════════════════════════════
   더 메이커 공통 UI — "학습지" 테마 (단일 파일 디자인 킷)
   ═══════════════════════════════════════════════════════════════════
   파이보 랩 · Sense Lab · 온디바이스 비전툴이 한 제품으로 보이게 하는
   공통 규격을 한 파일로 정리한 것이다. 새 서비스는 이 파일 하나를 복사해
   그대로 쓰고, 서비스 전용 스타일만 별도 파일로 얹는다.

   구성 (위에서 아래로):
     1. 색·글꼴 토큰        5. 버튼 · 입력
     2. 기본 리셋·배경      6. 카드 · 목록 · 표
     3. 헤더 · 탭           7. 진행률 · 확률 막대 · 순서도
     4. 단계 표시 · 3단 패널 8. 토스트 · 반응형

   지켜야 할 것:
     · 새 색을 만들지 않는다. 아래 토큰만 쓴다.
     · 그라디언트 장식·이모지 장식·새 폰트 금지.
     · 글꼴: Pretendard(본문) + Gowun Batang 계열(서비스명). 셀프호스팅.
     · 화면 문구는 해요체 존댓말, 한 문장 20자 이내 (초등 눈높이).
     · 자산 경로는 전부 상대경로 (하위 경로 배포 대비).
   ─────────────────────────────────────────────────────────────────── */

/* ── 1. 색·글꼴 토큰 : "학습지" (미색 종이 + 갈색 괘선 + 남색 펜) ── */
:root{
  --paper:      #FBF7EF;   /* 활동지 바탕 */
  --line-d:     #4A3F2E;   /* 표 괘선 (짙은 갈색) — 헤더 외곽선 */
  --pen-blue:   #1F5F7A;   /* 남색 펜 — 주 색 */
  --pen-blue-d: #12455C;
  --pen-red:    #B4451C;   /* 빨간 펜 — 경고·오답 */

  --bg:        var(--paper);
  --panel:     #FFFFFF;    /* 패널·카드 */
  --panel2:    #FBFAF5;    /* 패널 안 옅은 면 */
  --line:      #9A8F7D;    /* 테두리 */
  --line-soft: #DCD5C6;    /* 옅은 테두리·구분선 */
  --ink:       #2A2620;    /* 본문 */
  --ink2:      #4A423A;    /* 보조 본문 */
  --ink3:      #6B6255;    /* 힌트·라벨 */
  --acc:       var(--pen-blue);
  --acc-ink:   var(--pen-blue-d);
  --acc-soft:  #E6EEF6;    /* 선택·활성 면 */
  --ok:        #2E7D4F;    /* 성공 */
  --ok-soft:   #EEF5EF;
  --warn:      var(--pen-red);

  --r-s: 6px; --r-m: 6px;
  --shadow: 0 1px 0 rgba(44,74,124,.18);
  --mono: ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;
  --sans: 'Gowun Dodum','Pretendard Variable',Pretendard,-apple-system,'Segoe UI',sans-serif;
  --serif: 'Gowun Batang','Nanum Myeongjo','Apple SD Gothic Neo',serif;
}

/* ── 2. 기본 리셋 · 종이 배경 (미색 + 옅은 점무늬) ── */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background-color:var(--paper);
  background-image:radial-gradient(rgba(31,95,122,.07) 1px,transparent 1px);
  background-size:22px 22px;
  color:var(--ink);font-family:var(--sans);font-size:13.5px;
  display:flex;flex-direction:column;height:100vh;overflow:hidden;
  padding-bottom:8px;-webkit-font-smoothing:antialiased;
}
.num{font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}

/* ── 3. 헤더 : 흰 상자 + 갈색 외곽선, 서비스명은 명조 ── */
header{
  background:#fff;border:2px solid var(--line-d);border-radius:3px;
  box-shadow:var(--shadow);margin:8px 8px 0;padding:0 12px;height:54px;
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
header h1{
  display:flex;align-items:center;gap:9px;height:100%;padding-right:14px;
  font-family:var(--serif);font-size:15.5px;font-weight:700;letter-spacing:.02em;color:var(--ink);
}
header h1 img{height:30px;width:auto;display:block}

/* 탭: 테두리 없는 밑줄 탭 — 선택된 탭만 남색 줄 */
.navlink{
  background:transparent;border:none;border-bottom:3px solid transparent;border-radius:0;
  color:var(--ink2);padding:6px 12px 4px;font-size:12.5px;font-weight:400;
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  transition:all .12s;cursor:pointer;
}
.navlink:hover{border-bottom-color:#CFC7B8;color:var(--ink)}
.navlink.on,.navlink[aria-current]{border-bottom-color:var(--pen-blue);color:var(--pen-blue-d);font-weight:700}

/* 상태 배지 (준비/완료) */
.badge{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line-soft);color:var(--ink3)}
.badge.ok{color:var(--ok);background:var(--ok-soft);border-color:#C9DCCB}

/* 한/영 토글 (헤더 맨 오른쪽) */
#langToggle,.lang-toggle{
  border:1.5px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:var(--r-s);padding:6px 10px;font-size:12.5px;font-weight:600;
  min-width:46px;text-align:center;line-height:1;font-family:inherit;cursor:pointer;
}

/* 헤더 아이콘 버튼 (도움말 ? · 전체화면) */
.hbtn{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);color:var(--ink2);
  font-size:13px;cursor:pointer;transition:all .12s;flex-shrink:0;
}
.hbtn:hover{border-color:var(--acc);color:var(--acc-ink);background:var(--acc-soft)}

/* ── 4. 단계 표시 · 본문 3단 패널 ── */
#steps,.steps{display:flex;align-items:center;gap:0;padding:11px 16px;background:var(--panel2);
  border-bottom:1px solid var(--line);flex-shrink:0;overflow-x:auto}
.stp{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink3);
  white-space:nowrap;flex-shrink:0}
.stp .cir{width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--line);color:#fff;font-size:11px;font-weight:700}
.stp.on{color:var(--acc-ink)}
.stp.on .cir{background:var(--acc)}
.stp.done{color:var(--ink2)}
.stp.done .cir{background:var(--ok)}
.stpline{flex:1;height:1px;background:var(--line);margin:0 12px;max-width:70px;min-width:16px}

/* 본문: 가운데가 넓은 3단. 페이지마다 좌우 폭만 조절해 쓴다 */
.mk-main{flex:1;min-height:0;display:flex;gap:12px;padding:12px;background:var(--bg)}
.pan{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  display:flex;flex-direction:column;min-width:0;overflow:hidden}
.pan > .ph{display:flex;align-items:center;gap:7px;padding:10px 13px;font-size:12.5px;font-weight:700;
  color:var(--ink);border-bottom:1px solid var(--line-soft);flex-shrink:0}
.pan > .pb{padding:12px 13px;overflow-y:auto;flex:1}
.pan-side{width:270px;flex-shrink:0}      /* 왼쪽 */
.pan-wide{flex:1}                          /* 가운데 */
.pan-out{width:320px;flex-shrink:0}       /* 오른쪽 */

.pb-label{font-size:11px;font-weight:700;color:var(--ink3);margin-bottom:6px}
.hint{font-size:11px;color:var(--ink3);margin-top:9px;line-height:1.6}
.sec2{border-top:1px solid var(--line-soft);margin-top:13px;padding-top:12px}
.sec2 .st{font-size:11px;font-weight:700;color:var(--ink3);margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.04em}

/* ── 5. 버튼 · 입력 ── */
.row{display:flex;gap:6px}
.db{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink2);border-radius:8px;padding:6px 12px;
  font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .12s;
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
.db:hover{border-color:var(--acc);color:var(--acc-ink);background:var(--acc-soft)}
.db:disabled{opacity:.4;cursor:default}
.db.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc-ink)}   /* 토글 눌림 */
.db.go{background:var(--acc);color:#fff;border-color:var(--acc)}                  /* 주 동작 */
.db.go:hover{background:var(--acc-ink);border-color:var(--acc-ink);color:#fff}
.db.go:disabled{background:var(--acc);border-color:var(--acc);color:#fff}
.db.warn{background:var(--warn);color:#fff;border-color:var(--warn)}              /* 강한 경고 */
.db.danger{color:var(--ink3)}                                                     /* 조용한 지우기 */
.db.danger:hover{border-color:var(--warn);color:var(--warn);background:transparent}

.inp{flex:1;min-width:0;border:1px solid var(--line);background:var(--panel2);
  border-radius:7px;padding:6px 9px;font-size:12px;font-family:inherit;color:var(--ink);outline:none}
.inp:focus{border-color:var(--acc)}
input[type=range]{width:100%;height:3px;-webkit-appearance:none;appearance:none;
  background:var(--line);border-radius:999px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
  background:#fff;border:2.5px solid var(--acc);border-radius:50%;
  box-shadow:0 1px 3px rgba(35,54,66,.2);transition:transform .1s}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}
input[type=file]{display:none}

/* ── 6. 카드 · 목록 · 표 ── */
/* 고르는 카드 (종류·모델 등). .on = 선택됨 */
.cls,.mradio{border:1px solid var(--line);border-radius:9px;padding:9px 10px;margin-top:8px;
  cursor:pointer;transition:all .12s;display:block}
.cls:hover,.mradio:hover{border-color:var(--acc)}
.cls.on,.mradio.on{border-color:var(--acc);background:var(--acc-soft)}
.cls .top,.mradio{display:flex;align-items:center;gap:6px}
.cls .nm,.mradio .nm{flex:1;font-size:12.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cls .ct,.mradio .mt{font-size:11px;color:var(--ink3);font-weight:600;flex-shrink:0}
.cls .del{border:0;background:none;color:var(--ink3);cursor:pointer;padding:2px 3px;font-size:11px}
.cls .del:hover{color:var(--warn)}

/* 얇은 목록 줄 */
.saved{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:7px;
  background:var(--panel2);margin-bottom:5px;font-size:11.5px}
.saved .nm{flex:1;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved .mt{color:var(--ink3);flex-shrink:0;font-size:10.5px}

/* 표 */
.mk-table{width:100%;border-collapse:collapse;font-size:12px}
.mk-table th{text-align:left;font-size:11px;color:var(--ink3);font-weight:700;padding:7px 9px;
  border-bottom:1px solid var(--line)}
.mk-table td{padding:8px 9px;border-bottom:1px solid var(--line-soft);color:var(--ink2);vertical-align:middle}
.mk-table td.nm{font-weight:700;color:var(--ink)}

/* 파일 놓는 곳 */
.dropzone{border:1.5px dashed var(--line);border-radius:10px;padding:18px;text-align:center;
  color:var(--ink3);font-size:12px;font-weight:600;margin-top:12px;transition:all .15s;cursor:pointer}
.dropzone:hover,.dropzone.over{border-color:var(--acc);color:var(--acc-ink);background:var(--acc-soft)}

/* ── 7. 진행률 · 확률 막대 · 큰 답 · 순서도 ── */
.prg .lb{display:flex;justify-content:space-between;font-size:11px;color:var(--ink3);
  font-weight:600;margin-bottom:5px}
.track{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.fill{height:100%;width:0;background:var(--acc);transition:width .2s}

/* 확률 막대: 1등만 강조 (.top) */
.bar{margin-bottom:7px}
.bar .bl{display:flex;justify-content:space-between;font-size:11.5px;font-weight:600;
  color:var(--ink2);margin-bottom:3px}
.bar .bt{height:8px;border-radius:4px;background:var(--line-soft);overflow:hidden}
.bar .bf{height:100%;width:0;background:var(--ink3);transition:width .15s}
.bar.top .bl{color:var(--acc-ink)}
.bar.top .bf{background:var(--acc)}

/* 큰 답 상자: .sure = 확신, .idk = 안내·모름 */
.answer{padding:14px 10px;border-radius:10px;background:var(--panel2);text-align:center;
  font-size:19px;font-weight:800;color:var(--ink);min-height:52px;
  display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere}
.answer.sure{background:var(--acc-soft);color:var(--acc-ink)}
.answer.idk{color:var(--ink3)}

/* 순서도: 시작 → 단계 카드 → 성공. .cur = 지금, .done = 통과 */
.seq-node{width:fit-content;margin:0 auto;padding:5px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel2);font-size:11.5px;font-weight:700;color:var(--ink2)}
.seq-node.goal.done{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.seq-arrow{width:0;height:16px;border-left:2px solid var(--line);margin:0 auto;position:relative}
.seq-arrow::after{content:'';position:absolute;left:-5px;bottom:-1px;
  border:4px solid transparent;border-top-color:var(--line)}
.seq-step{border:1px solid var(--line);border-radius:9px;padding:8px 10px;transition:all .15s}
.seq-step .top{display:flex;align-items:center;gap:7px}
.seq-step .sq-idx{width:21px;height:21px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;background:var(--line);color:#fff;font-size:11px;font-weight:700}
.seq-step .sq-track{height:5px;border-radius:3px;background:var(--line-soft);overflow:hidden;margin-top:7px}
.seq-step .sq-fill{height:100%;width:0;background:var(--acc);border-radius:3px;transition:width .1s linear}
.seq-step.cur{border-color:var(--acc);background:var(--acc-soft)}
.seq-step.cur .sq-idx{background:var(--acc)}
.seq-step.done{border-color:var(--ok)}
.seq-step.done .sq-idx{background:var(--ok)}
.seq-step.done .sq-fill{background:var(--ok)}

/* ── 8. 토스트 · 반응형 ── */
#toast,.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;
  background:#233642;color:#fff;font-size:12.5px;font-weight:600;padding:10px 18px;border-radius:9px;
  box-shadow:0 6px 20px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on,.toast.on{opacity:1}

@media (max-width:1100px){
  html,body{overflow:auto;height:auto;min-height:100vh}
  .mk-main{flex-direction:column}
  .pan-side,.pan-out{width:100%}
}
@media (max-width:700px){
  /* 폰: 전체 글자 한 단계 확대. 입력칸은 16px (iOS 포커스 확대 방지) */
  body{font-size:15px}
  header{overflow-x:auto;padding:0 10px;gap:6px;scrollbar-width:none}
  header::-webkit-scrollbar{display:none}
  header h1{font-size:16px;padding-right:8px;flex-shrink:0}
  header h1 img{height:26px}
  .navlink{flex-shrink:0;padding:7px 12px;font-size:14px}
  #langToggle,.lang-toggle{font-size:14px;padding:7px 11px;margin-right:4px}
  .stp{font-size:13.5px}
  .stp .cir{width:24px;height:24px;font-size:12.5px}
  .mk-main{padding:8px;gap:8px}
  .pan > .ph{font-size:14.5px;padding:12px 13px}
  .pan > .pb{padding:11px}
  .db{font-size:14px;padding:9px 13px}
  .inp,select.inp{font-size:16px;padding:9px 11px}
  .hint{font-size:13px;line-height:1.65}
  .cls .nm,.mradio .nm{font-size:14.5px}
  .answer{font-size:20px;min-height:60px}
  .bar .bl{font-size:13px}
  .bar .bt{height:10px}
  .mk-table{font-size:13.5px}
  .mk-table th{font-size:12px;padding:8px 7px}
  .mk-table td{padding:9px 7px}
  input[type=range]::-webkit-slider-thumb{width:20px;height:20px}
  #toast,.toast{font-size:14px}
}