/* shell.css — 체험판 껍데기. 색·글꼴·그림자는 홈페이지(ium-homepage assets/css/site.css)의 토큰과 같은 값을 쓴다.
   이음 화면(iframe) 안은 앱 그대로라 여기서 건드리지 않는다. 다크 모드는 토큰만 바꾼다. */
:root {
  --paper: #f5f7fa;
  --surface: #ffffff;
  --sunken: #eef2f7;
  --ink: #141c28;
  --ink-2: #485263;
  --muted: #7a8494;
  --line: #e0e5ec;
  --accent: #0071e3;          /* 앱 버튼·홈페이지와 같은 파랑 */
  --accent-ink: #ffffff;
  --accent-soft: #e6f0fc;
  --green: #1a7f45;
  --green-soft: #e3f4ea;
  --dim: rgba(20, 28, 40, 0.34);
  --shadow: 0 30px 60px -30px rgba(20, 28, 40, .45);
  --win-shadow: 0 30px 60px -24px rgba(20, 28, 40, .38), 0 0 0 1px rgba(20, 28, 40, .07);
  --bubble-shadow: 0 18px 40px -12px rgba(20, 28, 40, .35), 0 0 0 1px rgba(20, 28, 40, .06);
  --radius: 14px;
  --header-h: 60px;
  color-scheme: light;
  font-family: 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0d1218; --surface: #151c26; --sunken: #1b2430; --ink: #e8edf3; --ink-2: #b1bccb; --muted: #8190a3;
    --line: #26303e; --accent: #4c9dff; --accent-ink: #06121f; --accent-soft: #16263b;
    --green: #4ccf86; --green-soft: #12261b; --dim: rgba(0, 0, 0, 0.5);
    --shadow: 0 30px 60px -30px rgba(0,0,0,.8);
    --win-shadow: 0 30px 60px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
    --bubble-shadow: 0 18px 40px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d1218; --surface: #151c26; --sunken: #1b2430; --ink: #e8edf3; --ink-2: #b1bccb; --muted: #8190a3;
  --line: #26303e; --accent: #4c9dff; --accent-ink: #06121f; --accent-soft: #16263b;
  --green: #4ccf86; --green-soft: #12261b; --dim: rgba(0, 0, 0, 0.5);
  --shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  --win-shadow: 0 30px 60px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
  --bubble-shadow: 0 18px 40px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper); color: var(--ink); overflow: hidden;
  word-break: keep-all; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em;
}

/* ── 머리줄: 홈페이지와 같은 반투명 머리줄 ── */
.topbar {
  position: relative; z-index: 10;
  height: var(--header-h); display: flex; align-items: center; gap: 10px; padding: 0 24px;
  background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.brand img { border-radius: 8px; }
.badge { background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.reset-btn {
  margin-left: auto; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.reset-btn:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); }

.layout { display: flex; height: calc(100% - var(--header-h)); }

/* ── 왼쪽 목록: 번호를 세로선으로 잇는 단계 표시 ── */
.guide { width: 272px; flex: none; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.guide-head { padding: 22px 24px 12px; font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.demo-list { flex: 1; overflow-y: auto; padding: 0 12px 24px; display: flex; flex-direction: column; }

.d-item, .d-group { position: relative; }
/* 세로선: 줄마다 번호 가운데(왼쪽 24px)를 지나는 선 조각을 그려 잇는다. 처음·끝 줄은 번호에서 멈춘다 */
.d-item::before, .d-group::before {
  content: ''; position: absolute; left: 23px; top: 0; bottom: 0; width: 2px; background: var(--line);
}
.demo-list > :first-child::before { top: 22px; }
.demo-list > :last-child::before { bottom: auto; height: 22px; }

.d-item {
  display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%;
  border: 0; background: none; border-radius: 10px; padding: 10px 12px;
  font: inherit; color: var(--ink); cursor: pointer; transition: background .15s;
}
.d-item:hover { background: var(--sunken); }
.d-item.on { background: var(--accent-soft); }
.d-num {
  position: relative; z-index: 1; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.d-item.on .d-num, .d-group.on .d-num { background: var(--accent); box-shadow: none; color: var(--accent-ink); }
.d-item.seen .d-num, .d-group.seen .d-num { background: var(--green-soft); box-shadow: none; color: var(--green); }
.d-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.d-title { font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.d-item.on .d-title { font-weight: 700; color: var(--accent); }

/* 묶음 제목: 번호는 그대로, 글자는 작은 회색 — 체험 이름이 먼저 눈에 들어오게 */
.d-group { display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 4px; }
.d-group .d-title { font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.d-group.on .d-title { color: var(--ink-2); }

/* 묶음 안 체험: 번호 대신 선 위의 작은 점 */
.d-item.sub { padding: 8px 12px 8px 48px; }
.d-item.sub .d-num {
  position: absolute; left: 19px; top: 50%; width: 10px; height: 10px; margin: -5px 0 0;
  font-size: 0; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line);
}
.d-item.sub.on .d-num { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.d-item.sub.seen .d-num { background: var(--green); box-shadow: none; }
.d-item.sub .d-title { font-size: 14px; font-weight: 600; }
.d-item.sub.on .d-title { font-weight: 700; }
.d-item.sub.seen:not(.on) .d-title::after { content: ' ✓'; color: var(--green); font-weight: 800; }

.d-item.soon { cursor: default; }
.d-item.soon .d-title { color: var(--muted); }
.d-soon { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.d-bar { height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 18%, transparent); overflow: hidden; }
.d-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .35s ease; }

/* ── 무대: 밝은 종이 바탕 + 창 아래 그림자 하나 ── */
.stage-wrap {
  flex: 1; position: relative; overflow: hidden; background: var(--paper);
  background-image:
    radial-gradient(1200px 600px at 15% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%);
}
.stage { position: absolute; left: 0; top: 0; width: 1280px; height: 780px; transform-origin: 0 0; }
.win {
  position: absolute; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: var(--win-shadow);
  display: flex; flex-direction: column;
}
.win-bar { height: 30px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; background: #f8fafc; border-bottom: 1px solid #e0e5ec; cursor: move; user-select: none; }
.win-title { flex: 1; font-size: 12px; font-weight: 700; color: #485263; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-x { width: 26px; height: 22px; border: 0; background: none; color: #7a8494; font-size: 15px; cursor: pointer; border-radius: 6px; }
.win-x:hover { background: #fee2e2; color: #dc2626; }
.win iframe { flex: 1; width: 100%; border: 0; display: block; background: #fff; }
.win.main .win-bar { display: none; }
.win.bare { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.win.bare .win-bar { display: none; }
.win.bare iframe { background: transparent; }
.win.dragging iframe { pointer-events: none; }

/* ── 빛 테두리: 파랑 테두리가 은은하게 숨 쉰다 ── */
.spot {
  position: absolute; z-index: 9000; pointer-events: none; border-radius: 10px;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px var(--dim);
  transition: left .3s cubic-bezier(.2,.8,.2,1), top .3s cubic-bezier(.2,.8,.2,1), width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1);
}
.spot::after {
  content: ''; position: absolute; inset: -2px; border-radius: 12px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  animation: breathe 2s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.spot.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ── 말풍선: 흰 카드 ── */
.bubble {
  position: absolute; z-index: 9001; width: max-content; max-width: 330px;
  background: var(--surface); color: var(--ink); border-radius: var(--radius);
  padding: 14px 16px; font-size: 14.5px; font-weight: 500; line-height: 1.65;
  box-shadow: var(--bubble-shadow);
}
.bubble b { color: var(--accent); font-weight: 700; }
.b-step { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px; letter-spacing: 0.02em; }
.b-hint { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--accent); font-size: 12.5px; font-weight: 700; }
.b-hint::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.b-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.b-btn {
  border: 1px solid var(--accent); border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; background: var(--accent); color: var(--accent-ink); transition: filter .15s;
}
.b-btn:hover { filter: brightness(1.08); }
.b-btn.ghost { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.b-btn.ghost:hover { filter: none; color: var(--ink); }
.bubble.done { max-width: 440px; padding: 26px 28px 22px; text-align: center; box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.bubble.done .b-btn { white-space: nowrap; }
.bubble.done .b-foot { justify-content: center; margin-top: 18px; }
.b-done {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green);
  background: var(--green-soft); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.bubble.done .b-text { font-size: 17px; font-weight: 700; line-height: 1.55; letter-spacing: -0.02em; }

.toast {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9500;
  background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--bubble-shadow);
}

/* ── 휴대폰 ── */
.mobile-note { display: none; }
@media (max-width: 900px) {
  body { overflow: auto; }
  .layout, .reset-btn { display: none; }
  .topbar { padding: 0 16px; }
  .mobile-note { display: block; padding: 20px 16px 40px; }
  .mobile-title { font-size: 19px; font-weight: 800; margin: 4px 0 8px; letter-spacing: -0.02em; }
  .mobile-sub { font-size: 14px; color: var(--ink-2); line-height: 1.7; margin: 0 0 18px; }
  .m-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
  .m-title { padding: 14px 16px; font-weight: 700; font-size: 15px; }
  .m-item .answer { padding: 0 16px 14px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
}