/* Shopping preparation overview. Keep the STEP 00–08 worksheets untouched. */
body.start-overview-view, body.start-overview-view .app-main { background:#0d0f10; }
body.start-overview-view .topbar {
  --ld-panel:#121517; --ld-text:#f8f8f8; --ld-muted:#b5b9ba;
  --ld-muted-bg:#292c2f; --ld-border-strong:#35393c;
  background:#121517; border-bottom-color:#35393c;
}
body.start-overview-view .topbar .btn.topbar-login { background:#24282a; color:#f6f6f6; border-color:#45494b; }
body.start-overview-view .sidebar { background:#111416; border-right:1px solid #303538; }
body.start-overview-view .side-nav a.nav-current {
  background:#33251e; color:#ffa66f; border-left-color:#ff8a4b; border-radius:9px;
}
body.start-overview-view .side-nav a.nav-current svg { color:#ff9e62; }
body.start-overview-view footer { background:#0d0f10; border-top-color:#303538; }
body.start-overview-view footer, body.start-overview-view footer a,
body.start-overview-view footer button { color:#c5c8c9; }
body.start-overview-view footer .footer-meta { color:#a9adae; }

#view-start {
  --ink:#f8f8f8; --ink-body:#cbd0d0; --ink-soft:#b8c0c0; --ink-faint:#929b9d;
  --surface:#171b1d; --surface-hover:#262b2e;
  --border:#353b3e; --border-strong:#394043;
  --ld-panel:#171b1d; --ld-text:#f8f8f8; --ld-muted:#b8c0c0;
  --ld-accent:#ff8a4b; --ld-accent-dark:#ffad79; --ld-accent-light:#36271e;
  --ld-border-strong:#394043; --brand:#ff8a4b; --brand-ink:#ffad79;
  --badge-c-bg:#25372e; --badge-c:#a5d6ae;
  color:#f8f8f8;
}
#view-start .content { max-width:1430px; padding-top:34px; }
#view-start .eyebrow { background:none; border:0; padding:0; margin:0 0 8px; color:#ffa66d; font-size:11px; font-weight:800; letter-spacing:.12em; }
#view-start .eyebrow::before { display:none; }
#view-start .page-head { padding:0; }
#view-start .page-head h1 { color:#fff; font-size:clamp(34px,4vw,51px); line-height:1.2; letter-spacing:-.05em; }
#view-start .page-lead { margin:8px 0 0; color:#bac1c2; font-size:16px; }

/* The same seven saved STEP records drive the track, the hero and the cards. */
#view-start .start-track { position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin:34px 0 25px; }
#view-start .start-track::before { content:""; position:absolute; top:23px; left:7%; right:7%; height:2px; background:#454b4e; pointer-events:none; }
#view-start .start-track a { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:9px; min-width:0; text-align:center; color:#bdc3c4; }
#view-start .start-track span { display:grid; place-items:center; width:47px; height:47px; border:2px solid #50575a; border-radius:50%; background:#171b1d; color:#bfc5c6; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
#view-start .start-track small { font-size:11px; font-weight:600; line-height:1.35; word-break:keep-all; }
#view-start .start-track a.is-done span { border-color:#ff9c62; background:#35271e; color:#ffae77; }
#view-start .start-track a.is-next span { border-color:#ff9c62; background:#ff8a4b; color:#28170f; box-shadow:0 0 24px rgba(255,138,75,.28); }
#view-start .start-track a.is-next small, #view-start .start-track a.is-done small { color:#ffad79; }
#view-start .start-track a:hover span { border-color:#ffac78; }

#view-start .start-status { display:grid; grid-template-columns:minmax(150px,220px) minmax(0,1fr) minmax(220px,265px); align-items:center; gap:25px; min-height:267px; margin:0 0 28px; padding:23px 28px; border:1px solid #383e41; border-radius:14px; background:radial-gradient(circle at 15% 85%,#32241e 0,transparent 31%),#171b1d; }
#view-start .start-status-art { display:grid; place-items:center; min-width:0; }
#view-start .start-status-art img { display:block; width:100%; max-width:215px; height:auto; max-height:220px; object-fit:contain; }
#view-start .start-status-text { flex:none; min-width:0; }
#view-start .start-status-label { color:#ffa46c; font-size:12px; font-weight:800; margin:0 0 9px; }
#view-start .start-status-next { font-size:clamp(18px,1.8vw,24px); line-height:1.35; letter-spacing:-.045em; color:#fff; }
#view-start .start-status-desc { font-size:12px; margin:8px 0 14px; color:#c2c8c8; }
#view-start .start-next-tasks { display:grid; gap:7px; }
#view-start .start-next-tasks li { position:relative; padding-left:21px; font-size:12px; line-height:1.4; color:#e3e5e5; word-break:keep-all; }
#view-start .start-next-tasks li::before { content:"✓"; position:absolute; top:0; left:1px; color:#ff9e65; font-weight:800; }
#view-start .start-status-progress { align-self:stretch; display:flex; flex-direction:column; justify-content:center; border-left:1px solid #353b3e; padding-left:25px; min-width:0; }
#view-start .start-progress-label { margin:0 0 8px; font-size:12px; color:#d5d8d8; }
#view-start .start-status-count { font-size:18px; font-weight:700; color:#f6f6f6; margin:0 0 12px; }
#view-start .start-status-count b { font-size:35px; color:#ff9254; }
#view-start .start-progress-bar { width:100%; height:8px; border-radius:8px; background:#373e41; overflow:hidden; }
#view-start .start-progress-bar span { display:block; width:0; height:100%; border-radius:8px; background:#ff8a4b; transition:width .2s ease; }
#view-start .start-status-scope { margin:14px 0 16px; color:#b3bcbd; font-size:11px; line-height:1.6; }
#view-start .start-status-btn { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:46px; padding:10px 14px; border-radius:8px; background:#ff8a4b; color:#26170f; font-size:13px; font-weight:800; text-align:center; }
#view-start .start-status-btn:hover { background:#ffa974; }

#view-start .start-grid-head { margin:30px 0 14px; }
#view-start .start-grid-head span { color:#ffa369; font-size:11px; letter-spacing:.1em; font-weight:800; }
#view-start .start-grid-head h2 { margin:4px 0; font-size:22px; color:#fff; letter-spacing:-.04em; }
#view-start .start-grid-head p { margin:0; font-size:12px; color:#aeb7b8; }
#view-start .card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:0; }
#view-start .guide-card { border:1px solid #353b3e; border-radius:11px; background:#171b1d; min-width:0; }
#view-start .guide-card:hover { border-color:#ff9e65; }
#view-start .guide-card.open, #view-start .guide-card.is-next { border-color:#ff8a4b; }
#view-start .guide-card.open { box-shadow:0 0 0 1px #ff8a4b; }
#view-start .gc-head { position:relative; display:flex; flex-direction:column; align-items:stretch; min-height:218px; gap:8px; padding:16px 17px 90px; color:#fff; }
#view-start .cc-top { min-height:29px; }
#view-start .cc-num { display:inline-grid; place-items:center; width:31px; height:28px; border-radius:7px; background:#2a2e30; font-size:11px; color:#d6dada; }
#view-start .cc-badge.free { background:#2a2e30; color:#cbd0d1; }
#view-start .cc-status { border-radius:4px; background:#252b2e; color:#b6bfc0; }
#view-start .cc-status.active { background:#3b2b21; color:#ffc195; }
#view-start .cc-status.done { background:#25372e; color:#a5d6ae; }
#view-start .gc-head h2 { color:#fff; font-size:16px; line-height:1.45; letter-spacing:-.035em; word-break:keep-all; }
#view-start .gc-head p { color:#b7bfc0; font-size:12px; line-height:1.55; word-break:keep-all; }
#view-start .gc-head::after { content:""; position:absolute; right:10px; bottom:9px; width:80px; height:80px; background-image:url("assets/home-icon-atlas.webp"); background-size:400% 200%; background-repeat:no-repeat; pointer-events:none; }
#view-start .guide-card[data-chapter="/start/prepare"] .gc-head::after { background-position:0% 0%; }
#view-start .guide-card[data-chapter="/start/setup"] .gc-head::after { background-position:33.333% 0%; }
#view-start .guide-card[data-chapter="/start/sourcing"] .gc-head::after { background-position:66.667% 0%; }
#view-start .guide-card[data-chapter="/start/content"] .gc-head::after { background-position:100% 0%; }
#view-start .guide-card[data-chapter="/start/orders"] .gc-head::after { background-position:33.333% 100%; }
#view-start .guide-card[data-chapter="/start/marketing-setup"] .gc-head::after { background-position:66.667% 100%; }
#view-start .guide-card[data-chapter="/start/marketing"] .gc-head::after { background-position:33.333% 0%; }
#view-start .guide-card[data-chapter="/start/intro"] .gc-head::after { background-position:66.667% 100%; }
#view-start .guide-card[data-chapter="/start/wrapup"] .gc-head::after { background-position:33.333% 100%; }
#view-start .gc-chev { position:absolute; left:17px; bottom:19px; margin:0; color:#ffac78; }
#view-start .guide-card.open .gc-body { max-height:400px; }
#view-start .gc-body-inner { padding:0 17px 17px; }
#view-start .cc-points li { color:#c9d0d0; }
#view-start .gc-link { color:#ffad79; }
/* Lead with STEP 00, then show STEP 01–08 in reading order on every viewport. */
#view-start .guide-card[data-chapter="/start/intro"] { grid-column:1/-1; }
#view-start .guide-card[data-chapter="/start/intro"] .gc-head { min-height:165px; padding-right:105px; padding-bottom:20px; }
#view-start .guide-card[data-chapter="/start/intro"] .gc-chev { left:auto; right:100px; bottom:20px; }
#view-start .sub-banner { border:1px solid #664b38; border-radius:12px; background:linear-gradient(120deg,#30231d,#181b1c); }
#view-start .sub-banner .sb-desc { color:#d4cac3; }
#view-start .sub-banner .btn-primary { background:#ff8a4b; color:#24150d; border-radius:7px; }
#view-start .sub-banner .btn-primary:hover { background:#ffad79; }
#view-start .content > p:last-child a { color:#ffad79 !important; }

@media (max-width:1180px) {
  #view-start .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #view-start .start-status { grid-template-columns:160px minmax(0,1fr); }
  #view-start .start-status-progress { grid-column:1/-1; border-left:0; border-top:1px solid #353b3e; padding:18px 0 0; }
}
@media (max-width:740px) {
  #view-start .start-track { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:105px; overflow-x:auto; padding:0 0 14px; margin:24px 0 13px; scroll-snap-type:x proximity; }
  #view-start .start-track a { scroll-snap-align:start; }
  #view-start .start-track::before { left:52px; right:0; }
}
@media (max-width:620px) {
  #view-start .content { padding:24px 16px 42px; }
  #view-start .page-lead { font-size:13px; }
  #view-start .start-status { display:flex; flex-direction:column; align-items:stretch; gap:14px; padding:19px; }
  #view-start .start-status-art img { width:142px; max-height:135px; }
  #view-start .start-status-progress { border-top:1px solid #353b3e; padding-top:18px; }
  #view-start .card-grid { grid-template-columns:minmax(0,1fr); }
  #view-start .guide-card[data-chapter="/start/intro"] { grid-column:auto; }
  #view-start .gc-head { min-height:188px; }
  #view-start .start-grid-head h2 { font-size:19px; }
}

/* LaunchDesk STEP 00-08 order fix */
#view-start .guide-card[data-chapter="/start/intro"] { order:-100; grid-column:1/-1; }
#view-start .guide-card[data-chapter="/start/wrapup"] { order:100; grid-column:auto; }
#view-start .guide-card[data-chapter="/start/wrapup"] .gc-head { min-height:218px; padding:16px 17px 90px; }
#view-start .guide-card[data-chapter="/start/wrapup"] .gc-chev { left:17px; right:auto; bottom:19px; }
@media (max-width:620px) {
  #view-start .guide-card[data-chapter="/start/intro"] { grid-column:auto; }
  #view-start .guide-card[data-chapter="/start/wrapup"] .gc-head { min-height:188px; }
}

/* 2026-10 역할 정리 — 로드맵을 "단계 흐름 → 지금 위치·다음 할 일 → 단계 목록" 순으로.
   카드 그리드(장식 아이콘·고정 높이)를 한 줄짜리 단계 목록으로 바꾼다. 상태(완료·진행 중·
   시작 전)와 할 일 목록은 app.js recomputeProgress()가 저장된 진행 기록으로만 채운다. */
#view-start .start-status { grid-template-columns:minmax(0,1fr) minmax(220px,280px); min-height:0; }
#view-start .card-grid { grid-template-columns:minmax(0,1fr); gap:8px; max-width:960px; }
#view-start .card-grid .guide-card { grid-column:auto; }
#view-start .card-grid .guide-card .gc-head { min-height:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"num title badge" "num desc badge"; align-items:center; column-gap:14px; row-gap:2px; padding:14px 44px 14px 16px; text-align:left; }
#view-start .card-grid .guide-card .gc-head::after { display:none; }
#view-start .card-grid .cc-top { display:contents; }
#view-start .card-grid .cc-num { grid-area:num; width:36px; height:36px; border-radius:50%; }
#view-start .card-grid .cc-badges { grid-area:badge; }
#view-start .card-grid .gc-head h2 { grid-area:title; margin:0; font-size:15px; }
#view-start .card-grid .gc-head p { grid-area:desc; margin:0; }
#view-start .card-grid .guide-card .gc-chev { position:absolute; left:auto; right:16px; top:50%; bottom:auto; margin-top:-9px; transition:transform .15s; }
#view-start .card-grid .guide-card.open .gc-chev { transform:rotate(180deg); }
#view-start .card-grid .guide-card.is-next .cc-num { background:#ff8a4b; color:#28170f; }
#view-start .card-grid .gc-body-inner { padding:0 16px 16px 66px; }
@media (max-width:1180px) {
  #view-start .start-status-progress { grid-column:auto; border-left:1px solid #353b3e; border-top:0; padding:0 0 0 25px; }
}
@media (max-width:620px) {
  #view-start .start-status-progress { border-left:0; border-top:1px solid #353b3e; padding:18px 0 0; }
  #view-start .card-grid .guide-card .gc-head { grid-template-areas:"num title" "num desc" "num badge"; grid-template-columns:auto minmax(0,1fr); padding-right:40px; }
  #view-start .card-grid .cc-badges { justify-self:start; margin-top:4px; }
  #view-start .card-grid .cc-badges:not(:has(:not([hidden]))) { display:none; }
  #view-start .card-grid .gc-body-inner { padding-left:16px; }
}