/* AI 디자인 스튜디오 · 학습 포털
   - 색: 브랜드 액센트는 터미널 네온 그린. 네온은 면으로만, 글자는 딥그린으로.
   - 장식용 보더라인(좌측 스트라이프) 없음. 상태는 면(배경)으로만 구분합니다.
   - 타이포: 한글 기준으로 행간/자간을 크기별로 분리했습니다. 아래 토큰 참조. */

/* 값은 tokens.css 에. 여기서는 포털이 쓰던 이름만 이어줍니다.
   네온은 면에만, 흰 배경 위 글자는 --brand-ink. 어두운 사이드바 위는 --brand-on-dark. */
:root{
  --bg:var(--ds-bg);--surface:var(--ds-surface);--ink:var(--ds-ink-strong);
  --muted:var(--ds-muted);--line:var(--ds-line);
  --soft:var(--ds-surface-2);--soft-ink:#3f3f3a;

  --brand:var(--ds-neon);--brand-ink:var(--ds-brand);--brand-soft:var(--ds-brand-soft);
  --brand-on-dark:var(--ds-on-dark);--brand-line:var(--ds-brand-line);

  --red:var(--ds-red);--red-soft:var(--ds-red-soft);
  --nav-hover:#2b2b29;--nav-active:#333330;--nav-text:var(--ds-on-dark-text);--nav-dim:var(--ds-on-dark-dim);
  --shadow:var(--ds-sh-lg);--radius:var(--ds-r-lg);

  --lh-display:var(--ds-lh-display);
  --lh-title:var(--ds-lh-title);
  --lh-body:var(--ds-lh-body);
  --lh-ui:var(--ds-lh-ui);
  --lh-flat:var(--ds-lh-flat);

  --ls-display:var(--ds-ls-display);
  --ls-title:var(--ds-ls-title);
  --ls-body:var(--ds-ls-body);
  --ls-mono:var(--ds-ls-mono);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ds-font);
  line-height:var(--lh-ui);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  word-break:keep-all;overflow-wrap:break-word; /* 한글 어절 단위 줄바꿈 */
}
button,input,textarea,select{font:inherit;letter-spacing:inherit}
button,a{transition:.18s ease}
a{color:inherit}
.mono{font-family:var(--ds-mono)}
.muted{color:var(--muted)}
.hidden{display:none!important}

/* ── 로그인 ───────────────────────────────────────────────────────── */
.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(320px,.9fr) minmax(460px,1.1fr)}
.auth-intro{padding:clamp(34px,7vw,92px);background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.auth-logo{display:flex;align-items:center;gap:12px;font-weight:700;line-height:var(--lh-flat)}
.logo-mark{width:42px;height:42px;border-radius:12px;background:var(--brand);color:var(--ink);display:grid;place-items:center;font:700 14px var(--ds-mono);line-height:var(--lh-flat)}
.auth-copy h1{font-size:clamp(44px,5.6vw,74px);line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:20px 0 22px}
.auth-copy p{max-width:30em;color:#c2c2bd;font-size:17px;line-height:var(--lh-body);margin:0}
.auth-route{display:grid;gap:11px;margin-top:34px}
.auth-route span{display:flex;align-items:center;gap:11px;font-size:13px;line-height:var(--lh-ui);color:#d5d5d0}
.auth-route i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#2c2c2a;color:var(--brand-on-dark);font:700 10px var(--ds-mono);font-style:normal;line-height:var(--lh-flat)}
.auth-side{display:grid;place-items:center;padding:32px}
.auth-card{width:min(470px,100%);background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:var(--shadow)}
.eyebrow{font:700 11px var(--ds-mono);letter-spacing:var(--ls-mono);line-height:var(--lh-flat);color:var(--muted);text-transform:uppercase}
.auth-card h2{font-size:31px;line-height:var(--lh-title);letter-spacing:var(--ls-title);margin:14px 0 9px}
.auth-card>p{color:var(--muted);line-height:var(--lh-body);margin:0 0 26px}
.field{display:grid;gap:7px;margin:15px 0}
.field span{font-size:13px;font-weight:700;line-height:var(--lh-ui)}
.input{width:100%;border:1px solid var(--line);background:#fbfbf8;border-radius:12px;padding:13px 14px;color:var(--ink);line-height:var(--lh-ui);outline:none}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea.input{min-height:118px;resize:vertical;line-height:var(--lh-body)}
.btn{border:0;border-radius:12px;padding:12px 15px;background:var(--ink);color:#fff;font-weight:700;line-height:var(--lh-title);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(25,25,24,.13)}
.btn.primary{background:var(--brand);color:var(--ink)}
.btn.soft{background:var(--brand-soft);color:var(--brand-ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:#fff0f0;color:var(--red)}
.btn.full{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.auth-note{font-size:12.5px;color:var(--muted);line-height:var(--lh-body);margin-top:18px}
.auth-sep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;line-height:var(--lh-flat);margin:22px 0}
.auth-sep:before,.auth-sep:after{content:"";height:1px;background:var(--line);flex:1}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.message{padding:12px 14px;border-radius:12px;background:var(--soft);color:var(--ink);font-size:13px;line-height:var(--lh-ui);margin:14px 0}
.message.error{background:#fff0f0;color:var(--red)}

/* ── 앱 셸 ────────────────────────────────────────────────────────── */
.app-shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}
.app-nav{position:sticky;top:0;height:100vh;background:var(--ink);color:#fff;padding:24px 18px;display:flex;flex-direction:column}
.app-brand{text-decoration:none;display:flex;align-items:center;gap:10px;padding:4px 7px 24px;border-bottom:1px solid #333330;font-size:14px;line-height:var(--lh-title)}
.app-brand:hover .logo-mark{transform:translateX(-2px)}
.logo-mark{transition:.18s ease}
.app-brand small{display:block;color:var(--nav-dim);font:400 10px var(--ds-mono);letter-spacing:var(--ls-mono);line-height:var(--lh-ui);margin-top:3px}
.role-pill{margin:20px 7px 12px;padding:9px 11px;border-radius:10px;background:#292928;font:700 10px var(--ds-mono);letter-spacing:var(--ls-mono);line-height:var(--lh-flat);color:var(--brand-on-dark)}
.nav-list{display:grid;gap:4px}
.nav-btn{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;color:var(--nav-text);padding:11px 12px;border-radius:10px;text-align:left;cursor:pointer;font-size:13px;line-height:var(--lh-ui)}
.nav-ico{width:19px;height:19px;flex:none}
.nav-btn:hover{background:var(--nav-hover);color:#fff}
.nav-btn.active{background:var(--nav-active);color:var(--brand-on-dark);font-weight:700}  /* 활성 표시는 조용하게 — 강한 네온은 로고·주버튼·진행바처럼 의미 있는 곳에만 */
.nav-bottom{margin-top:auto;display:grid;gap:7px}
.nav-link{color:#aaa9a4;text-decoration:none;padding:8px 10px;font-size:12px;line-height:var(--lh-ui)}
.app-main{min-width:0}
.topbar{height:74px;padding:0 clamp(20px,4vw,52px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(246,246,242,.9);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}
.topbar h1{font-size:16px;line-height:var(--lh-title);letter-spacing:var(--ls-title);margin:0}
.user-chip{display:flex;align-items:center;gap:10px}
.avatar{flex:none;width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;font-weight:800;line-height:var(--lh-flat)}
.user-chip span{font-size:12px;line-height:var(--lh-ui)}
.content{padding:clamp(25px,4vw,52px);max-width:1240px}

/* ── 페이지 헤더 ──────────────────────────────────────────────────── */
.page-head{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:30px}
.page-head h2{font-size:clamp(31px,3.8vw,46px);line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:11px 0 0}
.page-head p{max-width:34em;margin:0;color:var(--muted);line-height:var(--lh-body)}

.next-step{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px}
.next-step h3{margin:9px 0 6px;font-size:20px;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.next-step p{margin:0;max-width:46em;font-size:13.5px;line-height:var(--lh-body)}
.next-step .btn{flex:none}

/* ── 지표 카드 ────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:17px 18px}
.stat span{display:block;color:var(--muted);font-size:12px;line-height:var(--lh-ui)}
.stat strong{display:block;font-size:28px;line-height:1.12;letter-spacing:-.02em;margin-top:5px}

/* ── 패널 ─────────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.panel.wide{grid-column:1/-1}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:17px}
.panel-head h3{margin:0;font-size:18px;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.panel .muted{line-height:var(--lh-body)}
.tag{padding:6px 9px;border-radius:99px;background:var(--soft);color:var(--soft-ink);font:700 9px var(--ds-mono);letter-spacing:var(--ls-mono);line-height:var(--lh-flat)}
.tag.accent{background:var(--brand-soft);color:var(--brand-ink)}
.empty{padding:34px 18px;text-align:center;border:1px dashed var(--line);border-radius:14px;color:var(--muted);line-height:var(--lh-body)}

/* ── 리스트 ───────────────────────────────────────────────────────── */
.list{display:grid;gap:10px}
.list-row{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:13px}
.list-row .grow{min-width:0;flex:1}
.list-row b{display:block;font-size:13px;line-height:var(--lh-ui)}
.list-row small{display:block;color:var(--muted);font-size:11.5px;line-height:var(--lh-ui);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{font:700 9px var(--ds-mono);letter-spacing:var(--ls-mono);line-height:var(--lh-flat);padding:6px 9px;border-radius:99px;background:var(--brand-soft);color:var(--brand-ink)}
.status.wait{background:#f0f0ec;color:var(--muted)}
.status.warn{background:var(--red-soft);color:var(--red)}

.sec-title{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--muted);margin:0 0 12px}
.fb-list{margin:0;display:grid;gap:14px}
.fb-list dt{font:700 10px var(--ds-mono);letter-spacing:var(--ls-mono);color:var(--brand-ink);text-transform:uppercase}
.fb-list dd{margin:5px 0 0;font-size:13.5px;line-height:var(--lh-body)}

/* ── 폼 ───────────────────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.form-grid .full{grid-column:1/-1}
.help{font-size:11.5px;color:var(--muted);line-height:var(--lh-ui);margin-top:6px}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}

/* ── 차시 행 / 동기화 줄 ──────────────────────────────────────────── */
.lesson-row,.sync-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.lesson-row h3{margin:9px 0 5px;font-size:19px;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.lesson-row p{margin:0;font-size:13px;line-height:var(--lh-body)}
.lesson-row .card-actions{margin-top:0;flex:none}
.sync-row{margin-top:18px}
.sync-row b{font-size:14px}
.sync-row p{margin:5px 0 0;font-size:12.5px;line-height:var(--lh-body);max-width:44em}

/* ── 제출 폼 단계 ─────────────────────────────────────────────────── */
.form-step{margin-bottom:16px}
.step-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;
  padding-bottom:17px;border-bottom:1px solid var(--line)}
.step-no{flex:none;width:30px;height:30px;border-radius:9px;background:var(--brand-soft);color:var(--brand-ink);
  display:grid;place-items:center;font:700 11px var(--ds-mono);line-height:var(--lh-flat)}
.step-head h3{margin:4px 0 5px;font-size:18px;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.step-head p{margin:0;font-size:13px;line-height:var(--lh-body);max-width:52em}
.field .help{margin-top:5px}

.file-input{padding:10px 12px;background:var(--surface);cursor:pointer}
.file-input::file-selector-button{margin-right:12px;border:0;border-radius:8px;padding:7px 12px;
  background:var(--brand-soft);color:var(--brand-ink);font-weight:700;cursor:pointer}
.attach-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px}
.attach-row .check-card{font-size:12px;color:var(--muted)}

/* ── 제출물 카드 ──────────────────────────────────────────────────── */
.submission-card{border:1px solid var(--line);border-radius:16px;padding:18px}
.submission-card h3{margin:5px 0 9px;font-size:20px;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.submission-card p{color:var(--muted);font-size:13px;line-height:var(--lh-body);margin:0}
.submission-meta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:10px}

/* ── 과제 공지 ────────────────────────────────────────────────────── */
/* 안 읽은 게 몇 건인지는 탭에서 바로 보여야 합니다 — 공지는 늦게 보면 의미가 없습니다. */
.nav-btn{position:relative}
/* 펼친 사이드바에서는 줄 끝의 작은 알약. 좁아지면 아이콘 위로 올라갑니다(아래 미디어쿼리). */
.nav-dot{margin-left:auto;min-width:17px;height:17px;padding:0 5px;border-radius:99px;
  background:var(--brand);color:#08210F;font:700 9.5px/17px var(--ds-mono);text-align:center;letter-spacing:0}
.status.new{background:var(--brand);color:#08210F}
.new-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brand);
  margin-right:6px;vertical-align:1px}

.notice-card h3{margin:4px 0 0;font-size:19px;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.notice-card.is-fresh{border-color:var(--brand-line);box-shadow:0 0 0 1px var(--brand-line) inset}
.notice-card.is-late{opacity:.72}
.notice-body{margin-top:11px;font-size:14px;line-height:var(--lh-body);color:var(--ink);word-break:keep-all;overflow-wrap:break-word}
.notice-body a{color:var(--brand-ink);text-underline-offset:3px}
.notice-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.notice-foot .card-actions{margin-top:0;margin-left:auto}

/* 남은 날짜는 숫자 하나로 읽혀야 합니다. 날짜는 그 아래 작게. */
.due-chip{display:inline-flex;flex-direction:column;gap:1px;padding:7px 12px;border-radius:11px;
  background:var(--soft);color:var(--soft-ink);font:700 12.5px var(--ds-mono);letter-spacing:var(--ls-mono);
  line-height:var(--lh-flat);white-space:nowrap;font-variant-numeric:tabular-nums}
.due-chip small{font:600 10px var(--ds-font);letter-spacing:0;opacity:.72}
.due-chip.soon{background:var(--brand-soft);color:var(--brand-ink)}
.due-chip.over{background:var(--red-soft);color:var(--red)}

/* ── 결과물 갤러리 ────────────────────────────────────────────────── */
.chip-row{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 18px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:99px;padding:8px 14px;font-size:12.5px;font-weight:600;line-height:var(--lh-ui);cursor:pointer}
.chip:hover{border-color:var(--brand-line);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.show-grid{gap:18px}
.show-card h3{margin:4px 0 9px;font-size:20px;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.show-card p{margin:0;font-size:13.5px;line-height:var(--lh-body)}
.show-by{margin-left:auto;font-size:11.5px;line-height:var(--lh-ui)}
.show-shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}
.show-shots figure{margin:0}
.show-shots img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:11px;border:1px solid var(--line);background:var(--soft);display:block}
.show-shots figcaption{margin-top:6px;font:700 9px var(--ds-mono);letter-spacing:var(--ls-mono);color:var(--muted)}
/* 판단 기록은 접어둡니다 — 카드가 길어지면 갤러리를 훑을 수가 없습니다. */
.show-more{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.show-more summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--brand-ink);line-height:var(--lh-ui);list-style:none}
.show-more summary::-webkit-details-marker{display:none}
.show-more summary::before{content:"＋ ";font-family:var(--ds-mono)}
.show-more[open] summary::before{content:"－ "}
.show-more .fb-list{margin-top:14px}
/* 공개 범위 토글은 한 줄짜리 체크가 아니라 설명이 붙습니다. */
.check-card.wide{align-items:flex-start;padding:15px}
.check-card.wide input{margin-top:2px}
.check-card.wide b{display:block;font-size:13.5px;margin-bottom:2px}
.check-card.wide .help{margin-top:0}

/* ── 진행률 ───────────────────────────────────────────────────────── */
.progress-line{height:8px;background:#e6e6e1;border-radius:99px;overflow:hidden}
.progress-line i{height:100%;display:block;background:var(--brand);border-radius:99px}

/* ── 표 ───────────────────────────────────────────────────────────── */
.table-wrap{overflow:auto}
.data-table{width:100%;border-collapse:collapse;font-size:12.5px}
.data-table th,.data-table td{text-align:left;padding:13px 10px;line-height:var(--lh-ui);border-bottom:1px solid var(--line);white-space:nowrap}
.data-table th{color:var(--muted);font-weight:600;font-size:11.5px;letter-spacing:.02em}

/* ── 체크 목록 ────────────────────────────────────────────────────── */
.check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.check-card{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;padding:11px;font-size:12.5px;line-height:var(--lh-ui);cursor:pointer}

/* ── 안내 박스 ────────────────────────────────────────────────────── */
.notice{border:1px solid var(--line);background:var(--soft);padding:15px 17px;border-radius:12px;font-size:13px;line-height:var(--lh-body);margin-bottom:20px}
.setup-box{max-width:760px;margin:8vh auto;padding:34px;border:1px solid var(--line);background:var(--surface);border-radius:24px;box-shadow:var(--shadow)}
.setup-box h1,.setup-box h2{font-size:clamp(26px,3vw,34px);line-height:var(--lh-title);letter-spacing:var(--ls-title);margin:13px 0 12px}
.setup-box p{line-height:var(--lh-body);max-width:36em}
/* 초대받을 주소는 진행자에게 그대로 불러줄 값이라 골라 읽히게 둡니다. */
.wait-mail{margin:18px 0 8px!important;padding:13px 16px;border-radius:12px;background:var(--soft);
  font:700 15px var(--ds-mono);letter-spacing:var(--ls-mono);word-break:break-all;user-select:all}
/* 대기실의 지름길. 코드를 받은 사람은 여기서 기다릴 이유가 없습니다. */
.wait-code{margin:24px 0 4px;padding:20px;border:1px solid var(--brand-line);border-radius:16px;background:var(--brand-soft)}
.wait-code h3{margin:6px 0 6px;font-size:18px;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.wait-code p{margin:0 0 13px;font-size:13px}
#join-form{display:flex;gap:9px;flex-wrap:wrap}
#join-form .input{flex:1;min-width:190px;font-family:var(--ds-mono);font-weight:700;letter-spacing:.14em}

/* 진행자 화면의 참여 코드 */
.code-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.code-box{font:700 30px var(--ds-mono);letter-spacing:.18em;line-height:var(--lh-flat);
  padding:14px 20px;border-radius:14px;background:var(--ink);color:var(--brand-on-dark);user-select:all}
.code-meta{min-width:0}
.code-meta b{display:block;font-size:14px}
.code-meta span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.row-act{text-align:right;white-space:nowrap}
.row-act .btn{padding:7px 12px;font-size:12px}
.setup-box code{background:#f0f0ec;padding:2px 5px;border-radius:5px;font-size:.92em}
.loading{min-height:65vh;display:grid;place-items:center;color:var(--muted)}

/* ── 반응형 ───────────────────────────────────────────────────────── */
@media(max-width:950px){
  .app-shell{grid-template-columns:82px 1fr}
  .app-nav{padding:20px 10px}
  .app-brand>div:last-child,.role-pill,.nav-btn span,.nav-link span{display:none}
  .app-brand{justify-content:center}
  .nav-btn{justify-content:center;padding:13px 0}
  /* 라벨이 사라지므로 배지는 아이콘 오른쪽 위로 */
  .nav-dot{position:absolute;top:6px;left:50%;margin-left:4px}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .auth-page{grid-template-columns:1fr}
  /* 휴대폰에서는 소개를 접습니다. QR 로 들어온 사람의 첫 화면에 입력칸이 보여야 합니다.
     (2026-09-11 발표 때는 아이폰 첫 화면 전체가 검은 소개였고, 입력칸은 스크롤해야 나왔습니다) */
  .auth-intro{min-height:0;padding:22px 20px;gap:12px}
  .auth-copy h1{font-size:30px;margin:14px 0 0}
  .auth-copy p,.auth-route,.auth-intro>.mono{display:none}
  .auth-copy h1 br{display:none}  /* 세 줄 대구를 휴대폰에선 두 줄로 흘립니다 — 입력칸을 한 줄만큼 더 위로 */
  .auth-side{padding:18px}
  .app-shell{display:block}
  /* 하단 탭바. iOS 홈 인디케이터에 가리지 않도록 safe-area 를 더합니다. */
  .app-nav{position:fixed;top:auto;bottom:0;width:100%;height:auto;z-index:20;
    display:flex;flex-direction:row;align-items:stretch;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:rgba(25,25,24,.96);backdrop-filter:blur(10px);border-top:1px solid #2e2e2c}
  .app-brand,.role-pill,.nav-bottom{display:none}
  .nav-list{display:flex;justify-content:space-around;width:100%;gap:2px}
  .nav-btn{flex:1;flex-direction:column;gap:4px;justify-content:center;
    min-height:52px;padding:7px 4px;font-size:11px;line-height:1.2;text-align:center}
  .nav-btn span{display:block}
  .nav-ico{width:21px;height:21px}
  .nav-btn.active{background:transparent;color:var(--brand-on-dark)}
  .nav-btn.active .nav-ico{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--brand) 55%,transparent))}
  .nav-dot{top:4px;margin-left:5px}
  /* 탭이 여섯 개까지 늘어납니다. 글자를 한 단계 줄여 두 줄로 접히는 걸 막습니다. */
  .nav-btn{font-size:10.5px;padding:7px 2px}
  .topbar{top:0;padding:0 18px;height:62px}
  .topbar h1{font-size:15px}
  .user-chip span{display:none}
  .content{padding:22px 16px calc(104px + env(safe-area-inset-bottom))}
  .page-head h2{font-size:30px}
  .panel,.submission-card{padding:18px}
  .next-step,.lesson-row,.sync-row{gap:14px}
  .next-step .btn,.lesson-row .card-actions{width:100%}
  .notice-foot .card-actions{margin-left:0;width:100%}
  .notice-foot .card-actions .btn{flex:1}
  .lesson-row .card-actions .btn{flex:1}
  .step-head{gap:11px}
  .auth-card{padding:26px 22px;border-radius:20px}
  .data-table th,.data-table td{padding:11px 8px}
  .page-head{align-items:start;flex-direction:column}
  .stats,.grid,.form-grid,.check-list{grid-template-columns:1fr}
  .panel.wide,.form-grid .full{grid-column:auto}
  .demo-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* 둘러보기 입구 — 로그인 카드 맨 아래. 가입 흐름과 시각적으로 분리해야
   "이것도 가입 단계인가" 하는 오해가 없습니다. 그래서 구분선을 둡니다. */
.auth-guest{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);text-align:center}
.auth-guest .auth-or{display:block;font-size:12.5px;color:var(--muted);margin-bottom:11px}
.auth-guest small{display:block;margin-top:9px;font-size:11.5px;color:var(--muted);line-height:var(--lh-body)}

/* ── 데모 안내 ──────────────────────────────────────────────────────────
   로그인 화면에서 "멤버 화면 미리보기"로 바로 들어올 수 있게 되면서,
   지어낸 데이터를 진짜로 오해할 여지가 생겼습니다. 화면 안에서 분명히 밝힙니다.
   사이드바 아래 "데모 종료" 하나로는 부족합니다 — 스크롤해야 보입니다. */
.demo-note{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:0;padding:13px clamp(16px,3vw,28px);
  background:var(--ds-surface-2,#F2EFE7);border-bottom:1px solid var(--ds-line,#E2DED2);
  font-size:13px;line-height:1.5}
.demo-note b{font-family:var(--ds-mono),ui-monospace,monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;color:var(--ds-muted,#77746A);white-space:nowrap}
.demo-note p{margin:0;flex:1 1 260px;min-width:0;color:var(--ds-ink,#2B2A26)}
.demo-note a{color:var(--ds-brand-strong,#0B6B3A);font-weight:700;text-decoration:none;white-space:nowrap}
.demo-note a:hover{text-decoration:underline}
@media(max-width:560px){.demo-note b{flex-basis:100%}}