/* 채점in 디자인 토큰 v1 — 방향 C "스캔 플로우" (재민 확정 2026-08-17)
   두 표면: 캡처(다크·카메라/진행/확인)  ·  데스크(라이트·홈/시험/결과/리포트/설정)
   플러그인 계약: 호스트는 --cj-* 변수만 덮어쓴다. 컴포넌트는 반드시 이 변수만 참조한다. */

:root{
  /* ---- 공통 원시 토큰 ---- */
  --cj-font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --cj-mono: ui-monospace, "Cascadia Mono", Consolas, "D2Coding", monospace;

  /* 타입 스케일 (px) — 제목 34/26/20, 본문 17/15, 보조 13/12 */
  --cj-t-display: 34px; --cj-t-h1: 26px; --cj-t-h2: 20px; --cj-t-body-lg: 17px; --cj-t-body: 15px; --cj-t-sub: 13px; --cj-t-cap: 12px;
  --cj-lh-tight: 1.2; --cj-lh-body: 1.5;
  --cj-track-head: -0.02em; --cj-track-cap: 0.02em;

  /* 간격 4px 그리드 */
  --cj-s-1: 4px; --cj-s-2: 8px; --cj-s-3: 12px; --cj-s-4: 16px; --cj-s-5: 20px; --cj-s-6: 24px; --cj-s-8: 32px; --cj-s-10: 40px;
  /* 라운드 */
  --cj-r-sm: 10px; --cj-r-md: 14px; --cj-r-lg: 18px; --cj-r-xl: 24px; --cj-r-pill: 999px;
  /* 치수 */
  --cj-tap-min: 44px; --cj-btn-lg: 52px; --cj-btn-md: 44px; --cj-btn-sm: 36px; --cj-shutter: 84px; --cj-appbar: 56px; --cj-tabbar: 64px;
  --cj-frame-w: 360px; --cj-frame-h: 780px;

  /* 모션 — 스프링 감각을 CSS로: 스텝 전환 320ms, 마이크로 160ms, 카드 뒤집기 220ms */
  --cj-ease-spring: cubic-bezier(.2,.8,.2,1);
  --cj-ease-out: cubic-bezier(.16,1,.3,1);
  --cj-dur-micro: 160ms; --cj-dur-card: 220ms; --cj-dur-step: 320ms; --cj-dur-screen: 420ms;

  /* ---- 의미 색 (표면과 무관) ---- */
  --cj-ok: #1E8E5A;      --cj-ok-soft: #E6F4EC;      --cj-on-ok: #FFFFFF;   /* 데스크용 초록 */
  --cj-x: #D6332C;       --cj-x-soft: #FBEBE9;       /* 빨간펜 — X·확인 필요·주 CTA(캡처) */
  --cj-hold: #B87700;    --cj-hold-soft: #FBF1D9;    --cj-on-hold: #FFFFFF; /* 불명·보류 */
  --cj-info: #2E5FCC;    --cj-info-soft: #E8EEFB;
  --cj-growth: #1E8E5A;                            /* 학부모 리포트 성장 곡선 */

  /* ---- 데스크 표면(라이트) 기본값 ---- */
  --cj-bg: #F4F5F7; --cj-surface: #FFFFFF; --cj-surface-2: #EEF0F4; --cj-line: #E4E7EE; --cj-line-2: #CDD2DA;
  --cj-ink: #161A22; --cj-ink-2: #3A404C; --cj-dim: #5A6272; --cj-faint: #8A92A0;
  --cj-primary: #161A22; --cj-on-primary: #FFFFFF;      /* 데스크 주 버튼 = 잉크색(검정) */
  --cj-focus: #2E5FCC;
  --cj-shadow: 0 1px 2px rgba(20,24,32,.06), 0 10px 28px -14px rgba(20,24,32,.22);
}

/* ---- 캡처 표면(다크) — 화면 루트에 .cj-capture 를 붙인다 ---- */
.cj-capture{
  --cj-bg: #0B0D12; --cj-surface: #171B22; --cj-surface-2: #1F242D; --cj-line: #2A303B; --cj-line-2: #3A414E;
  --cj-ink: #F4F5F7; --cj-ink-2: #D5D9E0; --cj-dim: #9AA2B0; --cj-faint: #6B7382;
  --cj-primary: #F4F5F7; --cj-on-primary: #0B0D12;      /* 캡처 주 버튼 = 흰색(셔터) */
  --cj-ok: #7CFF9B; --cj-ok-soft: rgba(124,255,155,.14); --cj-on-ok: #0B0D12;
  --cj-x: #F0574E;  --cj-x-soft: rgba(240,87,78,.16);
  --cj-hold: #FFC857; --cj-hold-soft: rgba(255,200,87,.16); --cj-on-hold: #0B0D12;
  --cj-info: #7CA0F5; --cj-info-soft: rgba(124,160,245,.16);
  --cj-focus: #7CFF9B;
  --cj-shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -14px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* ---- 학부모 리포트(라이트 종이) — .cj-parent ---- */
.cj-parent{
  --cj-bg: #FBFAF7; --cj-surface: #FFFFFF; --cj-surface-2: #F3F1EC; --cj-line: #EAE6DE; --cj-line-2: #D8D2C6;
  --cj-ink: #1B1D24; --cj-ink-2: #3D4048; --cj-dim: #6B6F7A; --cj-faint: #9A9EA8;
  --cj-primary: #1B1D24; --cj-on-primary: #FFFFFF;
}

/* ---- 리셋·프레임 ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#0E1014;font-family:var(--cj-font);color:var(--cj-ink);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;line-height:var(--cj-lh-body);font-size:var(--cj-t-body);word-break:keep-all}
/* 데스크톱에서 볼 때: 어두운 배경 가운데 360×780 프레임. 실제 폰에서는 프레임이 화면을 채운다. */
.cj-stage{min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;padding:24px 0}
.cj-app{position:relative;width:var(--cj-frame-w);height:var(--cj-frame-h);background:var(--cj-bg);color:var(--cj-ink);overflow:hidden;border-radius:28px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6);isolation:isolate}
@media (max-width:420px){.cj-stage{padding:0}.cj-app{width:100vw;height:100dvh;border-radius:0;box-shadow:none}}
.cj-app *:focus-visible{outline:2px solid var(--cj-focus);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){.cj-app *,.cj-app *::before,.cj-app *::after{animation-duration:1ms!important;transition-duration:1ms!important}}

/* ---- 타이포 유틸 ---- */
.cj-display{font-size:var(--cj-t-display);line-height:var(--cj-lh-tight);letter-spacing:var(--cj-track-head);font-weight:800;font-variant-numeric:tabular-nums}
.cj-h1{font-size:var(--cj-t-h1);line-height:var(--cj-lh-tight);letter-spacing:var(--cj-track-head);font-weight:800}
.cj-h2{font-size:var(--cj-t-h2);line-height:1.3;letter-spacing:-0.01em;font-weight:750}
.cj-body-lg{font-size:var(--cj-t-body-lg)}
.cj-sub{font-size:var(--cj-t-sub);color:var(--cj-dim)}
.cj-cap{font-size:var(--cj-t-cap);letter-spacing:var(--cj-track-cap);color:var(--cj-dim);font-weight:700}
.cj-num{font-variant-numeric:tabular-nums}
.cj-mono{font-family:var(--cj-mono)}

/* ---- 앱바·탭바·스텝바 ---- */
.cj-appbar{height:var(--cj-appbar);display:flex;align-items:center;justify-content:space-between;padding:0 var(--cj-s-4);gap:var(--cj-s-3)}
.cj-appbar .t{font-size:var(--cj-t-body-lg);font-weight:800;letter-spacing:-0.01em}
.cj-iconbtn{width:var(--cj-tap-min);height:var(--cj-tap-min);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--cj-r-sm);color:var(--cj-ink);background:transparent;border:0;cursor:pointer;transition:background var(--cj-dur-micro) var(--cj-ease-out),transform var(--cj-dur-micro) var(--cj-ease-out)}
.cj-iconbtn:active{transform:scale(.94);background:var(--cj-surface-2)}
.cj-tabbar{position:absolute;left:0;right:0;bottom:0;height:calc(var(--cj-tabbar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--cj-surface);border-top:1px solid var(--cj-line);display:grid;grid-template-columns:repeat(4,1fr)}
.cj-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:700;color:var(--cj-dim);text-decoration:none;min-height:var(--cj-tap-min)}
.cj-tab.on{color:var(--cj-ink)}
.cj-tab svg{width:22px;height:22px}

/* 아이콘 자산 — 단색 라인 PNG(알파)를 mask 로 얹어 currentColor 를 그대로 입힌다.
   재민 지침(2026-07-20 · 2026-08-25 재확인): 컬러 일러스트·이모지 아이콘 금지, 색은 부모가 정하고 아이콘은 형태만 담당한다.
   원본 2026-08-25 발주(gpt-image-1) · Design Assets 창고 편입(app=chaejeomin, concept=line-mono). */
.cj-ic{display:inline-block;flex:0 0 auto;width:24px;height:24px;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center}
.cj-ic.sm{width:20px;height:20px}
.cj-ic.lg{width:36px;height:36px}
.cj-tab .cj-ic{width:24px;height:24px}
.cj-ic-cam{-webkit-mask-image:url(../img/icons/cam.png);mask-image:url(../img/icons/cam.png)}
.cj-ic-gallery{-webkit-mask-image:url(../img/icons/gallery.png);mask-image:url(../img/icons/gallery.png)}
.cj-ic-home{-webkit-mask-image:url(../img/icons/home.png);mask-image:url(../img/icons/home.png)}
.cj-ic-exam{-webkit-mask-image:url(../img/icons/exam.png);mask-image:url(../img/icons/exam.png)}
.cj-ic-student{-webkit-mask-image:url(../img/icons/student.png);mask-image:url(../img/icons/student.png)}
.cj-ic-settings{-webkit-mask-image:url(../img/icons/settings.png);mask-image:url(../img/icons/settings.png)}
.cj-ic-bell{-webkit-mask-image:url(../img/icons/bell.png);mask-image:url(../img/icons/bell.png)}
.cj-ic-back{-webkit-mask-image:url(../img/icons/back.png);mask-image:url(../img/icons/back.png)}
.cj-ic-close{-webkit-mask-image:url(../img/icons/close.png);mask-image:url(../img/icons/close.png)}
.cj-ic-save{-webkit-mask-image:url(../img/icons/save.png);mask-image:url(../img/icons/save.png)}
.cj-ic-more{-webkit-mask-image:url(../img/icons/more.png);mask-image:url(../img/icons/more.png)}
.cj-ic-checkc{-webkit-mask-image:url(../img/icons/checkc.png);mask-image:url(../img/icons/checkc.png)}
.cj-steps{display:flex;align-items:center;justify-content:center;gap:10px}
.cj-steps .dot{width:8px;height:8px;border-radius:var(--cj-r-pill);background:var(--cj-line-2);transition:width var(--cj-dur-step) var(--cj-ease-spring),background var(--cj-dur-step)}
.cj-steps .dot.on{width:22px;background:var(--cj-ink)}
.cj-steps-label{display:flex;justify-content:center;gap:16px;font-size:11px;color:var(--cj-dim);font-weight:700}
.cj-steps-label b{color:var(--cj-ink)}

/* ---- 버튼 ---- */
.cj-btn{height:var(--cj-btn-md);flex-shrink:0;padding:0 var(--cj-s-5);border-radius:var(--cj-r-md);border:0;font:inherit;font-weight:800;font-size:var(--cj-t-body);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:var(--cj-ink);background:var(--cj-surface-2);transition:transform var(--cj-dur-micro) var(--cj-ease-out),background var(--cj-dur-micro),opacity var(--cj-dur-micro);min-width:var(--cj-tap-min)}
.cj-btn:active{transform:scale(.97)}
.cj-btn.primary{background:var(--cj-primary);color:var(--cj-on-primary)}
.cj-btn.danger{background:var(--cj-x);color:#fff}
.cj-btn.ok{background:var(--cj-ok);color:var(--cj-on-ok)}
.cj-btn.hold{background:var(--cj-hold);color:var(--cj-on-hold)}
.cj-btn.ghost{background:transparent;border:1px solid var(--cj-line-2)}
.cj-btn.lg{height:var(--cj-btn-lg);font-size:var(--cj-t-body-lg);border-radius:var(--cj-r-lg)}
.cj-btn.sm{height:var(--cj-btn-sm);font-size:var(--cj-t-sub);padding:0 var(--cj-s-3);border-radius:var(--cj-r-sm)}
.cj-btn.full{width:100%}
.cj-btn[disabled]{opacity:.45;pointer-events:none}
.cj-btn.busy{position:relative;color:transparent}
.cj-btn.busy::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;color:var(--cj-on-primary);animation:cj-spin .8s linear infinite}
@keyframes cj-spin{to{transform:rotate(360deg)}}
.cj-shutter{width:var(--cj-shutter);height:var(--cj-shutter);border-radius:50%;background:var(--cj-primary);border:6px solid var(--cj-line-2);box-shadow:0 0 0 3px var(--cj-primary) inset;cursor:pointer;transition:transform var(--cj-dur-micro) var(--cj-ease-out)}
.cj-shutter:active{transform:scale(.92)}

/* ---- 터치 타깃 확장: 시각 크기는 그대로, 히트 영역만 44px 이상 (::before 투명 확장) ---- */
button.cj-chip,.cj-chip[role=button],.cj-toggle,.cj-btn.sm,.cj-link{position:relative}
button.cj-chip,.cj-chip[role=button]{min-width:44px;justify-content:center;flex-shrink:0}
button.cj-chip::before,.cj-chip[role=button]::before,.cj-toggle::before,.cj-btn.sm::before,.cj-link::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
.cj-btn.sm::before{top:-4px;bottom:-4px}
.cj-link{display:inline-block;padding:4px 2px;color:var(--cj-dim);text-decoration:none;font-size:var(--cj-t-sub);border-radius:6px}
.cj-link::before{top:-9px;bottom:-9px}

/* ---- 카드·리스트·칩·배지 ---- */
.cj-card{background:var(--cj-surface);border:1px solid var(--cj-line);border-radius:var(--cj-r-lg);padding:var(--cj-s-4);box-shadow:var(--cj-shadow)}
.cj-card.flat{box-shadow:none}
.cj-row{display:flex;align-items:center;gap:var(--cj-s-3);min-height:56px;padding:0 var(--cj-s-4);background:var(--cj-surface);border-bottom:1px solid var(--cj-line)}
.cj-row:last-child{border-bottom:0}
.cj-chip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:var(--cj-r-pill);font-size:var(--cj-t-cap);font-weight:800;background:var(--cj-surface-2);color:var(--cj-ink-2);border:1px solid transparent;white-space:nowrap}
.cj-chip.on{background:var(--cj-ink);color:var(--cj-bg)}
.cj-chip.ok{background:var(--cj-ok-soft);color:var(--cj-ok)}
.cj-chip.x{background:var(--cj-x-soft);color:var(--cj-x)}
.cj-chip.hold{background:var(--cj-hold-soft);color:var(--cj-hold)}
.cj-chip.info{background:var(--cj-info-soft);color:var(--cj-info)}
.cj-av{width:32px;height:32px;border-radius:50%;background:var(--cj-surface-2);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--cj-ink-2);flex:0 0 auto}
.cj-badge-dot{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ---- 입력 ---- */
.cj-input{height:var(--cj-btn-md);width:100%;border-radius:var(--cj-r-md);border:1px solid var(--cj-line-2);background:var(--cj-surface);color:var(--cj-ink);padding:0 var(--cj-s-4);font:inherit;font-size:var(--cj-t-body)}
.cj-input:focus{outline:2px solid var(--cj-focus);outline-offset:1px;border-color:transparent}
.cj-textarea{min-height:96px;padding:var(--cj-s-3) var(--cj-s-4);resize:vertical}
.cj-toggle{width:52px;height:32px;border-radius:var(--cj-r-pill);background:var(--cj-line-2);position:relative;border:0;cursor:pointer;transition:background var(--cj-dur-micro)}
.cj-toggle::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform var(--cj-dur-micro) var(--cj-ease-spring);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cj-toggle.on{background:var(--cj-ok)}
.cj-toggle.on::after{transform:translateX(20px)}

/* ---- 진행·게이지 ---- */
.cj-prog{height:6px;border-radius:var(--cj-r-pill);background:var(--cj-surface-2);overflow:hidden}
.cj-prog i{display:block;height:100%;background:var(--cj-ink);border-radius:var(--cj-r-pill);transition:width var(--cj-dur-step) var(--cj-ease-spring)}
.cj-prog.ok i{background:var(--cj-ok)}
.cj-ring{--size:132px;--stroke:10px;width:var(--size);height:var(--size)}
.cj-ring circle{fill:none;stroke-width:var(--stroke);stroke-linecap:round}
.cj-ring .track{stroke:var(--cj-surface-2)}
.cj-ring .val{stroke:var(--cj-ok);transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset var(--cj-dur-screen) var(--cj-ease-spring)}

/* ---- 카메라 뷰파인더 ---- */
.cj-vf{position:relative;border-radius:var(--cj-r-lg);background:linear-gradient(160deg,#1E232C,#0F1217);border:1px solid var(--cj-line);overflow:hidden}
.cj-vf .corner{position:absolute;width:26px;height:26px;border:3px solid var(--cj-ok);border-radius:4px}
.cj-vf .corner.tl{left:18px;top:18px;border-right:0;border-bottom:0}
.cj-vf .corner.tr{right:18px;top:18px;border-left:0;border-bottom:0}
.cj-vf .corner.bl{left:18px;bottom:18px;border-right:0;border-top:0}
.cj-vf .corner.br{right:18px;bottom:18px;border-left:0;border-top:0}
.cj-vf .paper{position:absolute;left:12%;right:12%;top:10%;bottom:10%;background:#F3F1EA;border-radius:6px;transform:rotate(-2.5deg)}
.cj-vf .paper i{position:absolute;left:14px;right:14px;height:6px;background:#CFCBBF;border-radius:3px}

/* ---- 화면 전환(4막) ---- */
.cj-screen{position:absolute;inset:0;transition:transform var(--cj-dur-step) var(--cj-ease-spring),opacity var(--cj-dur-step) var(--cj-ease-out);will-change:transform,opacity}
.cj-screen.enter-right{transform:translateX(24px);opacity:0}
.cj-screen.exit-left{transform:translateX(-24px);opacity:0;pointer-events:none}
.cj-fade-up{animation:cj-fade-up var(--cj-dur-screen) var(--cj-ease-out) both}
@keyframes cj-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cj-flip{perspective:900px}
.cj-flip .inner{transition:transform var(--cj-dur-card) var(--cj-ease-spring);transform-style:preserve-3d}
.cj-flip.done .inner{transform:rotateY(180deg)}

/* ---- 상태(빈·에러·로딩) ---- */
.cj-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--cj-s-3);padding:var(--cj-s-10) var(--cj-s-6);text-align:center;color:var(--cj-dim)}
.cj-empty .t{font-weight:800;color:var(--cj-ink);font-size:var(--cj-t-body-lg)}
.cj-skel{background:linear-gradient(90deg,var(--cj-surface-2) 25%,var(--cj-line) 37%,var(--cj-surface-2) 63%);background-size:400% 100%;animation:cj-skel 1.2s ease infinite;border-radius:8px}
@keyframes cj-skel{0%{background-position:100% 0}100%{background-position:0 0}}
.cj-toast{position:absolute;left:16px;right:16px;bottom:calc(var(--cj-tabbar) + 16px);background:var(--cj-ink);color:var(--cj-bg);border-radius:var(--cj-r-md);padding:12px 16px;font-weight:700;font-size:var(--cj-t-sub);box-shadow:var(--cj-shadow);animation:cj-fade-up var(--cj-dur-step) var(--cj-ease-out) both}