/* =========================================================
   Stackpia — 공통 스타일
   화면 0 (업로드 랜딩): 다크 잉크 + 앰버 (기존 유지)
   분석 중 · 전체 흐름 · 상세: 밝은 배경 + 흰 카드 + 앰버 강조
========================================================= */
:root{
  /* ---- 다크 (랜딩/모달/토스트) ---- */
  --ink:#191411;
  --ink-soft:#1F1915;
  --panel:#241D18;
  --panel-hi:#2D241D;
  --line:#3A2F27;
  --line-soft:rgba(238,230,217,.06);
  --paper:#F0E8DB;
  --paper-dim:#C9BCA8;
  --muted:#93826C;
  --amber:#E2A13B;
  --amber-hi:#F0B75C;
  --amber-deep:#C8871F;
  --amber-wash:rgba(226,161,59,.13);
  --amber-line:rgba(226,161,59,.34);
  --danger:#C1524A;

  /* ---- 라이트 (분석/흐름/상세 화면) ---- */
  --lbg:#F7F4ED;
  --lcard:#FFFFFF;
  --lcard-soft:#FBF9F4;
  --ltext:#2B2217;
  --ltext-dim:#6C5F4F;
  --lmuted:#9A8B75;
  --lline:#E8E0D0;
  --lline-soft:#F1EBDF;
  --lamber-text:#A96F10;
  --lamber-wash:rgba(226,161,59,.14);
  --lamber-line:rgba(200,135,31,.38);
  --ldanger:#A6423A;
  --lshadow:0 1px 2px rgba(60,45,20,.04), 0 10px 28px rgba(60,45,20,.06);
  --code-bg:#221A12;
  --code-text:#EDE3CE;

  --lvl-beginner:#517A36;
  --lvl-beginner-bg:rgba(101,150,70,.14);
  --lvl-intermediate:#39678F;
  --lvl-intermediate-bg:rgba(80,125,170,.14);
  --lvl-advanced:#9E5A28;
  --lvl-advanced-bg:rgba(190,120,70,.16);

  --font-ui:"Pretendard Variable",Pretendard,"Malgun Gothic","맑은 고딕","Segoe UI",system-ui,sans-serif;
  --font-mono:"Cascadia Mono","Consolas","D2Coding",ui-monospace,monospace;
  --radius:10px;
  --radius-card:18px;
  --shadow-float:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 48px rgba(0,0,0,.45);
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family:var(--font-ui);
  background:var(--ink);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.light{ background:var(--lbg); }
[hidden]{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* 얇은 커스텀 스크롤바 */
*{ scrollbar-width:thin; scrollbar-color:#C9BCA855 transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:#B7A88F66; border-radius:99px; }
*::-webkit-scrollbar-track{ background:transparent; }

.brand{ font-weight:800; font-size:15.5px; letter-spacing:-.01em; color:var(--paper); flex-shrink:0; }
.brand span{ color:var(--amber); }

/* ---------- 로그인 영역 (다크 기본 — 랜딩에서 사용) ---------- */
.nav-auth{ display:flex; align-items:center; gap:10px; }
.google-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg, var(--panel-hi), var(--panel));
  border:1px solid var(--line); color:var(--paper);
  font-family:var(--font-ui); font-size:13px; font-weight:600;
  padding:8px 15px; border-radius:8px; cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.google-btn:hover{ border-color:var(--amber-line); transform:translateY(-1px); }
.google-btn:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.auth-email{ font-size:12px; color:var(--paper-dim); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ghost-btn{
  background:none; border:1px solid var(--line); color:var(--paper-dim);
  font-family:var(--font-ui); font-size:12.5px; font-weight:500; padding:6px 12px;
  border-radius:8px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.ghost-btn:hover{ border-color:var(--muted); color:var(--paper); background:var(--panel); }
.ghost-btn:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

/* ---------- 화면 0: 랜딩/업로드 (기존 유지) ---------- */
.landing{
  min-height:100vh; display:flex; flex-direction:column;
  background:
    radial-gradient(ellipse 1000px 540px at 50% 24%, rgba(226,161,59,.08), transparent 62%),
    radial-gradient(ellipse 700px 500px at 82% 88%, rgba(226,161,59,.03), transparent 60%),
    var(--ink);
}
.landing-nav{ display:flex; align-items:center; justify-content:space-between; padding:22px 34px; }
.landing-main{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 24px 90px; text-align:center; }
.landing-eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.22em; color:var(--amber);
  text-transform:uppercase; margin-bottom:18px;
  padding:6px 14px; border:1px solid var(--amber-line); border-radius:999px;
  background:var(--amber-wash);
}
.landing-headline{
  font-size:clamp(30px,4.4vw,48px); font-weight:800; line-height:1.24;
  letter-spacing:-.025em; max-width:660px; text-wrap:balance; margin:0 0 18px; color:var(--paper);
}
.landing-headline .dot{ color:var(--amber); }
.landing-sub{ font-size:15.5px; line-height:1.75; color:var(--paper-dim); max-width:470px; margin:0 0 40px; }

.upload-card{
  width:100%; max-width:568px;
  background:linear-gradient(180deg, #281F19, var(--panel));
  border:1px solid var(--line); border-radius:12px; padding:28px;
  box-shadow:var(--shadow-float); text-align:left;
}
.dropzone{
  border:1.5px dashed var(--line); border-radius:8px;
  padding:34px 20px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  cursor:pointer; color:var(--muted);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.dropzone:hover, .dropzone.drag{ border-color:var(--amber); background:var(--amber-wash); color:var(--amber); }
.dropzone:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.dropzone-icon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:var(--amber-wash); color:var(--amber);
  transition:transform .15s ease;
}
.dropzone:hover .dropzone-icon, .dropzone.drag .dropzone-icon{ transform:translateY(-2px); }
.dropzone-title{ font-size:14.5px; font-weight:700; color:var(--paper); }
.dropzone-sub{ font-size:12px; color:var(--muted); text-align:center; line-height:1.6; }

.chip-list{ display:flex; flex-direction:column; gap:8px; margin-top:16px; max-height:224px; overflow-y:auto; padding-right:2px; }
.chip-file{
  display:flex; align-items:center; gap:10px;
  background:var(--panel-hi); border:1px solid var(--line);
  border-radius:8px; padding:9px 12px;
}
.chip-file.invalid{ border-color:rgba(193,82,74,.55); background:rgba(193,82,74,.06); }
.chip-file-icon{ color:var(--muted); flex-shrink:0; display:flex; }
.chip-file-meta{ flex:1; min-width:0; }
.chip-file-name{ font-size:12.5px; color:var(--paper); font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip-file-sub{ font-size:11px; color:var(--muted); margin-top:1px; }
.chip-file.invalid .chip-file-sub{ color:var(--danger); }
.chip-file-remove{ background:none; border:none; color:var(--muted); cursor:pointer; padding:5px; flex-shrink:0; display:flex; border-radius:4px; transition:color .12s ease, background .12s ease; }
.chip-file-remove:hover{ color:var(--paper); background:rgba(255,255,255,.05); }
.chip-file-remove:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }

.start-upload-btn{
  width:100%; margin-top:18px;
  background:linear-gradient(180deg, var(--amber-hi), var(--amber));
  color:#241A0C; border:none; border-radius:8px; padding:14px;
  font-family:var(--font-ui); font-weight:800; font-size:14px; letter-spacing:-.01em; cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px rgba(226,161,59,.16);
  transition:filter .15s ease, transform .12s ease, opacity .15s ease;
}
.start-upload-btn:hover:not(:disabled){ filter:brightness(1.06); transform:translateY(-1px); }
.start-upload-btn:active:not(:disabled){ transform:translateY(0); }
.start-upload-btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }
.start-upload-btn:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.upload-note{ font-size:12px; color:var(--muted); margin:13px 0 0; line-height:1.6; }

.text-link-btn{
  display:block; margin:14px auto 0; background:none; border:none; cursor:pointer;
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--amber);
  text-decoration:underline; text-underline-offset:3px;
}
.text-link-btn:hover{ color:var(--amber-hi); }
.text-link-btn:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

/* =========================================================
   분석 중: 스켈레톤 로딩 (라이트)
========================================================= */
.analyzing{ min-height:100vh; background:var(--lbg); padding:30px 20px 80px; }
.an-inner{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; }
.an-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:46px; }
.analyzing .brand{ color:var(--ltext); }
.an-project{ font-family:var(--font-mono); font-size:12.5px; color:var(--lmuted); max-width:50%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-title{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ltext); margin:0 0 8px; }
.an-stage{ font-size:14px; font-weight:600; color:var(--lamber-text); margin:0 0 26px; min-height:1.6em; }

.an-skeletons{ display:flex; flex-direction:column; gap:12px; }
.sk-card{
  background:var(--lcard); border:1px solid var(--lline); border-radius:16px;
  padding:20px 22px; box-shadow:var(--lshadow);
  display:flex; flex-direction:column; gap:10px;
}
.sk-card.sk-step{ flex-direction:row; align-items:center; gap:14px; }
.sk-step-body{ flex:1; display:flex; flex-direction:column; gap:8px; }
.sk-line, .sk-num, .sk-badge{
  background:linear-gradient(90deg, #EDE6D8 25%, #F7F2E8 45%, #EDE6D8 65%);
  background-size:200% 100%;
  animation:shimmer 1.7s linear infinite;
}
.sk-line{ height:12px; border-radius:6px; }
.sk-num{ width:28px; height:28px; border-radius:50%; flex-shrink:0; }
.sk-badge{ width:64px; height:22px; border-radius:999px; }
.sk-badge-row{ display:flex; gap:6px; margin-top:4px; }
.w35{width:35%} .w40{width:40%} .w45{width:45%} .w50{width:50%}
.w55{width:55%} .w65{width:65%} .w70{width:70%} .w75{width:75%}
.w80{width:80%} .w85{width:85%} .w90{width:90%}
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

.an-error{
  background:var(--lcard); border:1px solid rgba(166,66,58,.4); border-radius:16px;
  padding:26px; box-shadow:var(--lshadow);
  display:flex; flex-direction:column; gap:10px;
}
.an-error h3{ margin:0; font-size:17px; font-weight:800; color:var(--ldanger); }
.an-error p{ margin:0; font-size:14px; line-height:1.7; color:var(--ltext-dim); }
.an-error-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

.primary-btn{
  background:linear-gradient(180deg, var(--amber-hi), var(--amber));
  color:#241A0C; border:none; border-radius:10px; padding:12px 22px;
  font-family:var(--font-ui); font-weight:800; font-size:13.5px; cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(226,161,59,.2);
  transition:filter .15s ease, transform .12s ease;
}
.primary-btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.primary-btn:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:2px; }
.soft-btn{
  background:var(--lcard); border:1px solid var(--lline); color:var(--ltext);
  border-radius:10px; padding:11px 18px;
  font-family:var(--font-ui); font-weight:700; font-size:13px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.soft-btn:hover{ border-color:var(--lmuted); background:var(--lcard-soft); }
.soft-btn:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:2px; }

/* =========================================================
   도구 화면 공통 (라이트): 상단바 + 중앙 콘텐츠
========================================================= */
.app{ min-height:100vh; background:var(--lbg); }
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:14px; padding:12px 22px;
  background:rgba(247,244,237,.92);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--lline);
  flex-wrap:wrap; row-gap:8px;
}
.app .brand{ color:var(--ltext); }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
@media (max-width: 480px){
  .topbar-right{ margin-left:0; width:100%; justify-content:flex-end; }
}
.app .ghost-btn{
  border-color:var(--lline); color:var(--ltext-dim); background:var(--lcard);
}
.app .ghost-btn:hover{ border-color:var(--lmuted); color:var(--ltext); background:var(--lcard-soft); }
.app .usage-chip{
  font-size:11.5px; font-weight:600; color:var(--ltext-dim); background:var(--lcard);
  border:1px solid var(--lline); border-radius:999px; padding:5px 12px;
  font-variant-numeric:tabular-nums;
}
.app .auth-email{ color:var(--ltext-dim); }
.app .google-btn{
  background:var(--lcard); border-color:var(--lline); color:var(--ltext);
  box-shadow:none;
}
.app .google-btn:hover{ border-color:var(--lamber-line); }

.usage-chip{
  font-size:11.5px; font-weight:600; color:var(--paper-dim); background:var(--panel);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;
  font-variant-numeric:tabular-nums;
}

/* 중앙 콘텐츠: 위에서 아래로 읽는 카드 피드 */
.screen{
  max-width:900px; margin:0 auto;
  padding:26px 20px 90px;
  display:flex; flex-direction:column; gap:16px;
}
.fcard{
  background:var(--lcard); border:1px solid var(--lline);
  border-radius:var(--radius-card); padding:24px 26px;
  box-shadow:var(--lshadow);
}
.fcard-title{ font-size:16.5px; font-weight:800; letter-spacing:-.01em; color:var(--ltext); margin:0 0 4px; }
.fcard-sub{ font-size:12.5px; color:var(--lmuted); margin:0 0 16px; line-height:1.6; }

/* ---------- 화면 1: 프로젝트 소개 카드 ---------- */
.ov-title{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--ltext); margin:0 0 10px; text-wrap:balance; }
.ov-purpose{ font-size:14px; font-weight:600; color:var(--lamber-text); margin:0 0 8px; line-height:1.7; }
.ov-summary{ font-size:15px; line-height:1.8; color:var(--ltext-dim); margin:0 0 16px; max-width:64ch; }
.tech-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.tech-badge{
  font-size:12px; font-weight:700; color:#7A6A52;
  background:#F4EEE2; border:1px solid var(--lline);
  border-radius:999px; padding:5px 12px;
}
.ov-stats{ font-size:12px; color:var(--lmuted); margin:0; font-variant-numeric:tabular-nums; }

/* ---------- 화면 1: 전체 흐름 타임라인 ---------- */
.timeline{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.tl-item{ display:flex; flex-direction:column; }
.tl-item:not(:last-child)::after{
  content:""; width:2px; height:12px; background:var(--lline);
  margin-left:30px;
}
.tl-step{
  display:flex; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:var(--lcard-soft); border:1px solid var(--lline); border-radius:14px;
  padding:14px 16px; font-family:var(--font-ui);
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.tl-step:hover{ border-color:var(--lamber-line); transform:translateY(-1px); box-shadow:0 6px 16px rgba(60,45,20,.08); }
.tl-step:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:2px; }
.tl-num{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:linear-gradient(180deg, var(--amber), var(--amber-deep));
  color:#FFF8EC; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; font-variant-numeric:tabular-nums;
  margin-top:1px;
}
.tl-body{ flex:1; min-width:0; }
.tl-title{ font-size:14.5px; font-weight:800; color:var(--ltext); }
.tl-desc{ font-size:13.5px; line-height:1.65; color:var(--ltext-dim); margin-top:3px; }
.tl-meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--lamber-text); margin-top:7px; }
.tl-cta{ align-self:center; flex-shrink:0; font-size:12px; color:var(--lmuted); transition:color .12s ease; }
.tl-step:hover .tl-cta{ color:var(--lamber-text); }

/* ---------- 화면 1: 핵심 기능 카드 ---------- */
.feature-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.feature-card{
  display:flex; flex-direction:column; gap:8px; text-align:left; cursor:pointer;
  background:var(--lcard-soft); border:1px solid var(--lline); border-radius:14px;
  padding:16px 17px; font-family:var(--font-ui);
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.feature-card:hover{ border-color:var(--lamber-line); transform:translateY(-1px); box-shadow:0 6px 16px rgba(60,45,20,.08); }
.feature-card:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:2px; }
.fc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fc-name{ font-size:14.5px; font-weight:800; color:var(--ltext); }
.fc-role{ font-size:13px; line-height:1.65; color:var(--ltext-dim); margin:0; flex:1; }
.fc-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.fc-meta{ font-size:11.5px; color:var(--lmuted); font-variant-numeric:tabular-nums; }
.fc-cta{ font-size:12.5px; font-weight:800; color:var(--lamber-text); }

/* ---------- 화면 1: 추천 학습 순서 ---------- */
.learn-order{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.order-item{
  display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--lcard-soft); border:1px solid var(--lline); border-radius:12px;
  padding:12px 14px; font-family:var(--font-ui);
  transition:border-color .15s ease, transform .12s ease;
}
.order-item:hover{ border-color:var(--lamber-line); transform:translateY(-1px); }
.order-item:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:2px; }
.order-num{
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background:linear-gradient(180deg, var(--amber), var(--amber-deep));
  color:#FFF8EC; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:1px;
}
.order-item.done .order-num{ background:var(--lvl-beginner-bg); color:var(--lvl-beginner); }
.order-body{ flex:1; min-width:0; }
.order-name{ font-size:13.5px; font-weight:700; color:var(--ltext); }
.order-done-mark{ margin-left:6px; font-size:11.5px; font-weight:700; color:var(--lvl-beginner); }
.order-reason{ font-size:12.5px; color:var(--lmuted); line-height:1.6; margin-top:2px; }

/* ---------- 화면 1: 파일로 찾아보기 (기본 접힘) ---------- */
.fold-summary{
  list-style:none; display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:14px; font-weight:700; color:var(--ltext); min-height:28px;
}
.fold-summary::-webkit-details-marker{ display:none; }
.fold-summary::before{
  content:"▸"; font-size:11px; color:var(--amber-deep);
  transition:transform .15s ease;
}
details[open] > .fold-summary::before{ transform:rotate(90deg); }
.files-list{ margin-top:12px; display:flex; flex-direction:column; }
.file-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:10px 10px; border-radius:8px; font-family:var(--font-ui);
  border-bottom:1px solid var(--lline-soft);
  transition:background .12s ease;
}
.file-row:hover{ background:var(--lcard-soft); }
.file-row:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:1px; }
.file-row.static{ cursor:default; }
.file-row.static:hover{ background:none; }
.file-name{ font-family:var(--font-mono); font-size:12.5px; color:var(--ltext); word-break:break-all; }
.file-owners{ font-size:11.5px; color:var(--lmuted); flex-shrink:0; text-align:right; }

/* =========================================================
   화면 2: 상세 내용
========================================================= */
.detail-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.to-flow-btn{
  background:var(--lcard); border:1px solid var(--lline); color:var(--ltext);
  border-radius:999px; padding:9px 16px; min-height:40px;
  font-family:var(--font-ui); font-size:13px; font-weight:700; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.to-flow-btn:hover{ border-color:var(--lamber-line); background:var(--lcard-soft); }
.to-flow-btn:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:2px; }
.breadcrumb{ font-size:12.5px; color:var(--lmuted); }
.breadcrumb .bc-sep{ margin:0 7px; }
.breadcrumb .bc-current{ color:var(--ltext); font-weight:700; }

.badge-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.chip{
  display:inline-flex; align-items:center; font-size:10.5px; font-weight:800;
  padding:4px 10px; border-radius:999px; letter-spacing:.03em;
}
.chip.beginner{ background:var(--lvl-beginner-bg); color:var(--lvl-beginner); }
.chip.intermediate{ background:var(--lvl-intermediate-bg); color:var(--lvl-intermediate); }
.chip.advanced{ background:var(--lvl-advanced-bg); color:var(--lvl-advanced); }
.chip.first{ background:var(--lamber-wash); color:var(--lamber-text); }
.chip.file{ background:#F4EEE2; color:#7A6A52; font-family:var(--font-mono); font-weight:600; }
.d-title{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ltext); margin:0 0 8px; text-wrap:balance; }
.d-role{ font-size:14px; line-height:1.75; color:var(--ltext-dim); margin:0; max-width:62ch; }

/* 이 단계의 위치 */
.pos-strip{
  list-style:none; margin:0; padding:2px; display:flex; gap:8px;
  overflow-x:auto;
}
.pos-chip{
  flex-shrink:0; display:inline-flex; align-items:center; gap:7px;
  background:var(--lcard-soft); border:1px solid var(--lline); color:var(--lmuted);
  border-radius:999px; padding:7px 13px; font-family:var(--font-ui);
  font-size:12.5px; cursor:pointer; white-space:nowrap;
  transition:border-color .15s ease, color .15s ease;
}
.pos-chip:hover{ border-color:var(--lamber-line); color:var(--ltext); }
.pos-chip:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:1px; }
.pos-chip .n{
  width:18px; height:18px; border-radius:50%; background:#EDE6D8; color:#8A7A64;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:800; font-variant-numeric:tabular-nums;
}
.pos-chip.current{
  background:var(--lamber-wash); border-color:var(--lamber-line);
  color:var(--ltext); font-weight:700; cursor:default;
}
.pos-chip.current .n{
  background:linear-gradient(180deg, var(--amber), var(--amber-deep)); color:#FFF8EC;
}

/* 상세 로딩 */
.detail-loading{ display:flex; flex-direction:column; gap:12px; }
.dl-msg{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ltext-dim); }
.detail-loading .spinner{ border-color:#E3DACA; border-top-color:var(--amber-deep); }

/* 저장 복원본에 없는 부분 안내 */
.nosource-card{ border-color:var(--lamber-line); }
.nosource-msg{ font-size:14px; line-height:1.8; color:var(--ltext-dim); margin:6px 0 16px; }

/* 쉽게 이해하기 */
.overview-list{ display:flex; flex-direction:column; }
.ov-item{ display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--lline-soft); }
.ov-item:last-child{ border-bottom:none; }
.ov-k{ flex-shrink:0; width:92px; font-size:12.5px; font-weight:800; color:var(--lamber-text); padding-top:2px; }
.ov-v{ flex:1; font-size:14px; line-height:1.75; color:var(--ltext-dim); }

/* 처리 순서 (아코디언) */
.acc-list{ display:flex; flex-direction:column; gap:9px; }
.acc-item{
  border:1px solid var(--lline); border-radius:14px;
  background:var(--lcard-soft); overflow:hidden;
  transition:border-color .15s ease, background .15s ease;
}
.acc-item[open]{ background:var(--lcard); border-color:var(--lamber-line); }
.acc-head{
  list-style:none; display:flex; align-items:center; gap:12px;
  padding:14px 16px; cursor:pointer; min-height:48px;
}
.acc-head::-webkit-details-marker{ display:none; }
.acc-head::after{
  content:"▾"; font-size:12px; color:var(--lmuted); margin-left:auto;
  transition:transform .15s ease;
}
.acc-item[open] .acc-head::after{ transform:rotate(180deg); }
.acc-head:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:-2px; }
.acc-num{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(180deg, var(--amber), var(--amber-deep));
  color:#FFF8EC; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums;
}
.acc-title{ font-size:14.5px; font-weight:800; color:var(--ltext); line-height:1.5; }
.step-time{
  flex-shrink:0; white-space:nowrap;
  font-size:10.5px; font-weight:700;
  color:var(--lamber-text); background:var(--lamber-wash);
  border:1px solid var(--lamber-line); border-radius:999px; padding:3px 10px;
}
.acc-body{ padding:2px 18px 18px 54px; display:flex; flex-direction:column; gap:12px; }
.snippet-pre{
  background:var(--code-bg); color:var(--code-text);
  border-radius:10px; padding:13px 15px; margin:0;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.7;
  overflow-x:auto; white-space:pre;
}
.step-explain{ font-size:14px; line-height:1.8; color:var(--ltext-dim); margin:0; max-width:62ch; }
.concept-inline{
  border-left:3px solid var(--amber); background:var(--lamber-wash);
  border-radius:8px; padding:11px 14px;
  font-size:13px; line-height:1.7; color:#6E5A33;
}
.concept-inline .concept-chip{ margin-right:8px; }
.acc-item.flash{ animation:accFlash 1.6s ease 1; }
@keyframes accFlash{
  0%{ box-shadow:0 0 0 3px var(--lamber-line); }
  70%{ box-shadow:0 0 0 3px var(--lamber-line); }
  100%{ box-shadow:none; }
}

/* 설명 속 클릭 가능한 함수 이름 */
.fn-link{
  display:inline; background:var(--lamber-wash); color:var(--lamber-text);
  border:none; border-radius:4px; padding:0 4px; margin:0 1px;
  font-family:var(--font-mono); font-size:.94em; font-weight:700; cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.fn-link:hover{ background:var(--amber); color:#241A0C; }
.fn-link:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:1px; }

/* 실제 코드 보기 */
.code-file-label{ font-family:var(--font-mono); font-size:11.5px; color:var(--lmuted); margin:12px 0 8px; }
.code-pre{
  background:var(--code-bg); color:var(--code-text);
  border-radius:12px; padding:15px 17px; margin:0;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.7;
  max-height:460px; overflow:auto; white-space:pre;
}
.code-hl{
  background:rgba(226,161,59,.3); border-radius:3px;
  animation:codeHl 1.8s ease 1;
}
@keyframes codeHl{
  0%{ background:rgba(226,161,59,.5); }
  100%{ background:rgba(226,161,59,.3); }
}

/* 함께 있는 보조 코드 */
.related-list{ margin-top:6px; display:flex; flex-direction:column; }
.related-item{ display:flex; flex-direction:column; gap:8px; padding:14px 0; border-bottom:1px solid var(--lline-soft); }
.related-item:last-child{ border-bottom:none; }
.related-label{ font-size:13.5px; font-weight:700; color:var(--ltext); }
.related-tag{
  display:inline-block; margin-left:8px; vertical-align:middle;
  font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px;
  color:var(--lvl-intermediate); background:var(--lvl-intermediate-bg);
}
.related-tag.wiring{ color:#8A7A64; background:#F1EBDF; }
.related-explain{ font-size:13px; line-height:1.7; color:var(--ltext-dim); margin:0; }

/* 관련 개념 */
.concept-list{ display:flex; flex-direction:column; gap:8px; }
.concept-item{
  border:1px solid var(--lline); border-radius:12px; background:var(--lcard-soft);
  transition:border-color .15s ease;
}
.concept-item[open]{ border-color:var(--lamber-line); background:var(--lcard); }
.concept-item summary{
  list-style:none; display:flex; align-items:center; gap:10px;
  padding:12px 15px; cursor:pointer; min-height:44px;
}
.concept-item summary::-webkit-details-marker{ display:none; }
.concept-item summary::after{
  content:"▾"; font-size:12px; color:var(--lmuted); margin-left:auto;
  transition:transform .15s ease;
}
.concept-item[open] summary::after{ transform:rotate(180deg); }
.concept-item summary:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:-2px; }
.concept-chip{
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  color:var(--lamber-text); background:var(--lamber-wash);
  border-radius:999px; padding:3px 11px;
}
.concept-item p{ margin:0; padding:0 16px 14px; font-size:13.5px; line-height:1.75; color:var(--ltext-dim); }

/* 수정하고 싶다면 */
.mod-list{ display:flex; flex-direction:column; }
.mod-item{ padding:13px 0; border-bottom:1px solid var(--lline-soft); }
.mod-item:last-child{ border-bottom:none; }
.mod-goal{ margin:0 0 5px; font-size:14px; font-weight:800; color:var(--ltext); }
.mod-where{ margin:0; font-size:13.5px; line-height:1.7; color:var(--ltext-dim); }

/* 다음 학습 단계 */
.next-zone{ margin-top:6px; }
.next-step-card{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:var(--lcard); border:1.5px solid var(--lamber-line);
  border-radius:16px; padding:18px 20px; font-family:var(--font-ui);
  box-shadow:var(--lshadow);
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.next-step-card:hover{ border-color:var(--amber); transform:translateY(-1px); box-shadow:0 10px 24px rgba(60,45,20,.1); }
.next-step-card:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:2px; }
.nsc-body{ flex:1; min-width:0; }
.nsc-label{ font-size:11px; font-weight:800; letter-spacing:.09em; color:var(--lmuted); text-transform:uppercase; }
.nsc-name{ font-size:15.5px; font-weight:800; color:var(--ltext); margin-top:4px; }
.nsc-cta{ flex-shrink:0; font-size:13px; font-weight:800; color:var(--lamber-text); }
.flow-done{
  background:var(--lcard); border:1px solid var(--lline); border-radius:16px;
  padding:24px; box-shadow:var(--lshadow);
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.flow-done p{ margin:0; font-size:14.5px; font-weight:700; color:var(--ltext); }

/* =========================================================
   화면 0.5: 분석 직후 첫 화면 (단순 요약 + 시작 CTA)
========================================================= */
.start-card{ padding:30px 32px 26px; }
.st-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; letter-spacing:.1em;
  color:var(--lvl-beginner); background:var(--lvl-beginner-bg);
  border-radius:999px; padding:5px 12px; margin-bottom:16px;
}
.st-title{ font-size:25px; font-weight:800; letter-spacing:-.02em; color:var(--ltext); margin:0 0 9px; text-wrap:balance; }
.st-purpose{ font-size:14px; font-weight:600; color:var(--lamber-text); margin:0 0 8px; line-height:1.7; }
.st-summary{ font-size:14.5px; line-height:1.8; color:var(--ltext-dim); margin:0 0 16px; max-width:58ch; }
.st-section-label{
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lmuted); margin:26px 0 12px;
}
.primary-pills{ display:flex; flex-direction:column; gap:8px; }
.pill{
  display:flex; align-items:baseline; gap:10px; padding:13px 15px;
  background:var(--lcard-soft); border:1px solid var(--lline); border-radius:13px;
}
.pill-dot{ width:7px; height:7px; border-radius:50%; background:var(--lmuted); flex-shrink:0; align-self:center; }
.pill b{ font-size:13.5px; font-weight:700; color:var(--ltext); flex-shrink:0; }
.pill span{ font-size:12.5px; color:var(--lmuted); line-height:1.5; min-width:0; }

.recommend-card{
  margin-top:16px; display:flex; gap:14px; align-items:flex-start;
  background:linear-gradient(180deg, var(--lamber-wash), transparent);
  border:1.5px solid var(--lamber-line); border-radius:14px; padding:17px 19px;
}
.recommend-badge{
  flex-shrink:0; font-size:10.5px; font-weight:800; letter-spacing:.06em;
  color:#FFF8EC; background:linear-gradient(180deg, var(--amber-hi), var(--amber-deep));
  border-radius:8px; padding:6px 10px; white-space:nowrap;
}
.recommend-body b{ font-size:14.5px; font-weight:800; color:var(--ltext); display:block; margin-bottom:4px; }
.recommend-body p{ margin:0; font-size:13px; line-height:1.65; color:var(--ltext-dim); }

.cta-primary{
  display:block; width:100%; margin-top:24px; border:none; border-radius:13px;
  background:linear-gradient(180deg, var(--amber-hi), var(--amber));
  color:#241A0C; font-family:var(--font-ui); font-weight:800; font-size:15px; padding:16px;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 10px 22px rgba(226,161,59,.22);
  transition:filter .15s ease, transform .12s ease;
}
.cta-primary:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.cta-primary:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:2px; }
.cta-ghost{
  display:block; margin:14px auto 0; background:none; border:none; cursor:pointer;
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--lmuted);
  text-decoration:underline; text-underline-offset:3px;
  transition:color .12s ease;
}
.cta-ghost:hover{ color:var(--lamber-text); }
.cta-ghost:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:2px; }

/* ---------- 상세: 학습 진행바 ---------- */
.progress-row{ display:flex; align-items:center; gap:10px; }
.progress-track{ flex:1; height:5px; border-radius:99px; background:#E9E1D1; overflow:hidden; }
.progress-fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--amber), var(--amber-deep));
  border-radius:99px; transition:width .3s ease;
}
.progress-label{ font-size:11.5px; font-weight:700; color:var(--lmuted); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- 상세: 왜 이 순서에 보나요 ---------- */
.why-box{
  border-left:3px solid var(--amber); background:var(--lamber-wash);
  border-radius:10px; padding:14px 16px; margin-top:16px;
}
.why-box b{ display:block; font-size:12.5px; font-weight:800; color:var(--lamber-text); margin-bottom:5px; }
.why-box p{ margin:0; font-size:13.5px; line-height:1.7; color:#6E5A33; }

/* ---------- 상세: 관련 파일 보기 ---------- */
.dfiles-note{ font-size:12.5px; color:var(--ltext-dim); line-height:1.65; margin:12px 0 4px; }
.dfiles-list{ display:flex; flex-direction:column; }
.dfile-row{
  display:flex; flex-direction:column; gap:4px;
  padding:13px 0; border-bottom:1px solid var(--lline-soft);
}
.dfile-row:last-child{ border-bottom:none; }
.dfile-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dfile-path{ font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--ltext); word-break:break-all; }
.dfile-order{
  flex-shrink:0; font-size:10.5px; font-weight:800;
  color:var(--lamber-text); background:var(--lamber-wash);
  border-radius:999px; padding:3px 10px; white-space:nowrap;
}
.dfile-role{ font-size:12.5px; color:var(--ltext-dim); line-height:1.65; }
.dfile-fns{ font-family:var(--font-mono); font-size:11.5px; color:var(--lmuted); }
.dfile-code-btn{
  align-self:flex-start; margin-top:3px; background:none; border:none; cursor:pointer;
  font-family:var(--font-ui); font-size:12px; font-weight:700; color:var(--lamber-text);
  padding:2px 0;
}
.dfile-code-btn:hover{ text-decoration:underline; text-underline-offset:3px; }
.dfile-code-btn:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:2px; }

/* =========================================================
   모달 (다크 유지) / 오버레이 / 토스트 / 스피너
========================================================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(18,14,11,.7);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:55;
  padding:20px;
}
.modal-box{
  width:100%; max-width:440px; max-height:min(560px, 84vh);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, #281F19, var(--panel));
  border:1px solid var(--line); border-radius:12px;
  padding:22px; box-shadow:var(--shadow-float);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.modal-head h3{ font-size:15.5px; font-weight:800; color:var(--paper); margin:0; }
.modal-close{
  background:none; border:none; color:var(--muted); cursor:pointer; padding:6px;
  display:flex; border-radius:4px; transition:color .12s ease, background .12s ease;
}
.modal-close:hover{ color:var(--paper); background:rgba(255,255,255,.05); }
.modal-close:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }
.modal-note{ font-size:12px; color:var(--muted); line-height:1.65; margin:0 0 14px; }
.projects-list{ display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.project-item{
  display:flex; align-items:center; gap:10px;
  background:var(--panel-hi); border:1px solid var(--line);
  border-radius:8px; padding:11px 12px;
}
.project-item-meta{ flex:1; min-width:0; }
.project-item-name{ font-size:13px; font-weight:700; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-item-date{ font-size:11px; color:var(--muted); margin-top:2px; }
.project-item-actions{ display:flex; gap:6px; flex-shrink:0; }
.project-item-empty{ font-size:12.5px; color:var(--muted); text-align:center; padding:24px 0; }

.overlay{
  position:fixed; inset:0; background:rgba(18,14,11,.8);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:50;
}
.overlay-box{ display:flex; flex-direction:column; align-items:center; gap:15px; text-align:center; padding:20px; }
.overlay-msg{ font-size:15.5px; font-weight:700; color:var(--paper); }

.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--amber);
  display:inline-block; animation:spin .8s linear infinite; flex-shrink:0;
}
.spinner.big{ width:36px; height:36px; border-width:3px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg, #322820, var(--panel-hi));
  border:1px solid var(--line); color:var(--paper);
  border-radius:8px; padding:13px 18px; font-size:13.5px; z-index:60;
  max-width:min(480px, 90vw); line-height:1.65;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px rgba(0,0,0,.5);
}
.toast.error{ border-color:rgba(193,82,74,.6); }
.toast .toast-action{
  margin-left:10px;
  background:linear-gradient(180deg, var(--amber-hi), var(--amber));
  color:#241A0C; border:none;
  border-radius:4px; padding:6px 12px; font-weight:800; font-size:12.5px; cursor:pointer;
}

/* =========================================================
   반응형
========================================================= */
@media (max-width: 900px){
  .screen{ padding:22px 16px 80px; }
  .feature-list{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .fcard{ padding:20px 16px; border-radius:16px; }
  .ov-title{ font-size:21px; }
  .d-title{ font-size:20px; }
  .ov-summary, .step-explain, .ov-v, .tl-desc, .d-role, .nosource-msg{ font-size:15px; }
  .fc-role, .order-reason, .mod-where, .related-explain{ font-size:14px; }
  .acc-body{ padding-left:16px; padding-right:16px; }
  .ov-item{ flex-direction:column; gap:4px; }
  .ov-k{ width:auto; }
  .tl-cta{ display:none; }
  .primary-btn, .soft-btn, .to-flow-btn{ min-height:44px; }
  .topbar{ padding:10px 14px; }
  .an-inner{ padding:0; }
  .analyzing{ padding:24px 16px 60px; }
  .start-card{ padding:24px 18px; }
  .st-title{ font-size:22px; }
  .st-summary{ font-size:15px; }
  .pill{ flex-wrap:wrap; }
  .recommend-card{ flex-direction:column; gap:10px; }
  .cta-primary{ min-height:48px; }
}