:root {
    --bg: #f1f6ea;
    --surface: #fbfdf8;
    --surface-2: #e9f0df;
    --line: #d5e0c8;
    --ink-line: #171c12;
    --ink: #151a11;
    --ink-2: #4b5443;
    --ink-3: #7c8677;
    --green: #b6f07c;
    --green-deep: #5a9a2a;
    --green-ink: #2b5410;
    --blue: #bfe2f4;
    --blue-deep: #3a86b4;
    --blue-ink: #1d4a68;
    --warn: #f3d270;
    --warn-ink: #5e4300;
    --muted: #e4e8df;
    --danger: #c9463d;
    --shadow: 0 14px 34px rgba(30, 45, 20, .12);
    --r: 16px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #10140d; --surface: #181e13; --surface-2: #202918; --line: #2c3624; --ink-line: #dce8cc;
      --ink: #eef4e6; --ink-2: #b7c3aa; --ink-3: #7f8b74;
      --green: #9adf5e; --green-deep: #a9ea72; --green-ink: #0f1a06;
      --blue: #8fc6e3; --blue-deep: #a6d6ef; --blue-ink: #0b1c28;
      --warn: #e1c05a; --warn-ink: #2a1f00; --muted: #2a3124; --danger: #ef6b62;
      --shadow: 0 14px 34px rgba(0, 0, 0, .4);
    }
  }
  :root[data-theme="dark"] {
    --bg: #10140d; --surface: #181e13; --surface-2: #202918; --line: #2c3624; --ink-line: #dce8cc;
    --ink: #eef4e6; --ink-2: #b7c3aa; --ink-3: #7f8b74;
    --green: #9adf5e; --green-deep: #a9ea72; --green-ink: #0f1a06;
    --blue: #8fc6e3; --blue-deep: #a6d6ef; --blue-ink: #0b1c28;
    --warn: #e1c05a; --warn-ink: #2a1f00; --muted: #2a3124; --danger: #ef6b62;
    --shadow: 0 14px 34px rgba(0, 0, 0, .4);
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: "DM Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  h1, h2, h3, .display { font-family: "Fredoka", "DM Sans", sans-serif; letter-spacing: -0.01em; margin: 0; }
  h1 { font-size: clamp(26px, 5vw, 40px); font-weight: 700; line-height: 1.05; text-wrap: balance; }
  h2 { font-size: 20px; font-weight: 600; }
  h3 { font-size: 16px; font-weight: 600; }
  p { margin: 0; }
  a { color: inherit; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  :focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
  .num { font-variant-numeric: tabular-nums; }
  .hint { font-size: 13px; color: var(--ink-3); }

  .app { max-width: 880px; margin: 0 auto; padding: 18px 18px 90px; display: grid; gap: 20px; }

  /* header + tabs */
  .top { display: grid; justify-items: center; gap: 14px; padding-top: 6px; }
  .logo { display: block; line-height: 0; background: transparent; }
  .logo svg { display: block; }
  .pill-logo { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 15px; background: var(--green); color: var(--green-ink); border: 1.5px solid var(--ink-line); border-radius: 999px; padding: 4px 16px; }
  .brand-name { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 17px; }
  .tabs { display: inline-flex; border: 1.5px solid var(--ink-line); border-radius: 999px; overflow: hidden; background: var(--surface); }
  .tabs button { border: 0; background: transparent; padding: 8px 20px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 15px; color: var(--ink-2); }
  .tabs button + button { border-left: 1.5px solid var(--ink-line); }
  .tabs button.on { background: var(--ink); color: var(--bg); }

  .view[hidden] { display: none; }
  .view { display: grid; gap: 20px; }

  /* poster */
  .poster {
    position: relative; overflow: hidden; border: 1.5px solid var(--ink-line); border-radius: var(--r);
    background:
      radial-gradient(120% 90% at 0% 0%, rgba(191, 226, 244, .95) 0%, rgba(191, 226, 244, 0) 55%),
      radial-gradient(120% 100% at 100% 100%, rgba(182, 240, 124, .95) 0%, rgba(182, 240, 124, 0) 60%),
      #eaf3dd;
    color: #151a11; padding: 28px 24px 22px; display: grid; gap: 18px;
  }
  .poster .pill { justify-self: center; font-family: "Fredoka", sans-serif; font-weight: 600; background: #b6f07c; border: 1.5px solid #151a11; border-radius: 999px; padding: 4px 22px; }
  .poster h1 { text-align: center; }
  .poster h1 em { font-style: normal; color: #fff; -webkit-text-stroke: 1.2px #151a11; }
  .poster .meta { text-align: center; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 15px; }
  .poster .meta span { display: block; color: #4b7a1f; }
  .poster .days { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .pday { background: rgba(255, 255, 255, .55); border: 1.5px solid #151a11; border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
  .pday .d { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; }
  .pday .d i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #151a11; display: inline-block; }
  .pday.fri .d i { background: #bfe2f4; } .pday.sat .d i { background: #b6f07c; }
  .pday ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 14px; }
  .pday li { display: flex; gap: 10px; }
  .pday li b { font-family: "Fredoka", sans-serif; font-weight: 600; min-width: 46px; }
  .pday li small { color: #4b5443; }
  .poster .slot { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }

  /* cards */
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
  .card-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .card-head .spacer { flex: 1; }
  .card-body { padding: 18px; display: grid; gap: 14px; }

  .btn { border: 1.5px solid var(--ink-line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 10px 20px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; }
  .btn.primary { background: var(--green); color: var(--green-ink); }
  .btn.ghost { border-color: var(--line); background: transparent; }
  .btn.sm { padding: 6px 14px; font-size: 13px; }
  .btn.block { width: 100%; }
  .btn:disabled { opacity: .5; cursor: not-allowed; }

  .day-chip { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 12px; border: 1.5px solid var(--ink-line); border-radius: 999px; padding: 2px 10px; display: inline-flex; align-items: center; white-space: nowrap; }
  .day-chip.sat { background: var(--green); color: var(--green-ink); }
  .day-chip.fri { background: var(--blue); color: var(--blue-ink); }
  .prog-chip { font-size: 12px; border: 1px solid var(--ink-line); border-radius: 6px; padding: 1px 7px; font-weight: 600; white-space: nowrap; }
  .status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
  .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .status.new { background: var(--warn); color: var(--warn-ink); }
  .status.confirmed { background: var(--green); color: var(--green-ink); }
  .status.paid { background: var(--green-deep); color: var(--bg); }
  .status.cancelled { background: var(--muted); color: var(--ink-3); }

  /* seats */
  .seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .seat { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; background: var(--surface); }
  .seat .when { font-size: 12px; color: var(--ink-2); }
  .seat .prog { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 17px; }
  .seat .left { font-size: 13px; color: var(--ink-2); }
  .seat .left b { font-family: "Fredoka", sans-serif; font-size: 18px; color: var(--ink); }
  .seat .bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
  .seat .bar i { display: block; height: 100%; background: var(--green-deep); }
  .seat.fri .bar i { background: var(--blue-deep); }
  .seat.full .left b { color: var(--danger); }

  /* form */
  form { display: grid; gap: 16px; }
  fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
  legend { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 16px; padding: 0; margin-bottom: 4px; }
  .field { display: grid; gap: 5px; }
  .field label, .field .lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .field label small, .field .lbl small { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
  .field input, .field select, .field textarea { border: 1.5px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; width: 100%; }
  .field textarea { min-height: 70px; resize: vertical; }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .choices { display: flex; gap: 8px; flex-wrap: wrap; }
  .choice { position: relative; }
  .choice input { position: absolute; opacity: 0; inset: 0; margin: 0; }
  .choice span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 14px; background: var(--surface-2); }
  .choice input:checked + span { border-color: var(--ink-line); background: var(--ink); color: var(--bg); }
  .choice input:focus-visible + span { outline: 2px solid var(--green-deep); outline-offset: 2px; }
  .choice.sat input:checked + span { background: var(--green); color: var(--green-ink); }
  .choice.fri input:checked + span { background: var(--blue); color: var(--blue-ink); }
  .choice.big span { padding: 12px 16px; display: grid; gap: 2px; text-align: left; }
  .choice.big span small { font-weight: 400; font-size: 12px; opacity: .8; }
  .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
  .check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--green-deep); }
  .divider { height: 1px; background: var(--line); }

  .price-preview { border: 1.5px solid var(--ink-line); border-radius: 12px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface-2); }
  .price-preview b { font-family: "Fredoka", sans-serif; font-size: 22px; font-weight: 700; }
  .price-preview small { color: var(--ink-2); }
  /* success */
  .code-big { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(30px, 8vw, 52px); letter-spacing: .06em; text-align: center; padding: 18px; border: 2px dashed var(--ink-line); border-radius: 14px; background: var(--surface-2); }
  .kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 14px; }
  .kv dt { color: var(--ink-3); } .kv dd { margin: 0; font-weight: 500; }
  .notice { border-left: 3px solid var(--warn); background: var(--surface-2); padding: 12px 14px; border-radius: 0 10px 10px 0; font-size: 14px; display: grid; gap: 4px; }
  .notice.ok { border-color: var(--green-deep); }

  /* home */
  .code-entry { display: grid; gap: 10px; }
  .code-entry input { border: 2px solid var(--ink-line); background: var(--surface-2); border-radius: 12px; padding: 14px 16px; font-family: "Fredoka", sans-serif; font-size: 22px; letter-spacing: .08em; text-transform: uppercase; text-align: center; width: 100%; }
  .guest { display: grid; gap: 4px; }
  .guest .hi { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 28px; }
  .guest .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .guest .code { font-family: "Fredoka", sans-serif; font-weight: 600; letter-spacing: .06em; border: 1.5px solid var(--ink-line); border-radius: 8px; padding: 2px 10px; }

  .timeline { display: grid; gap: 0; }
  .tl { display: grid; grid-template-columns: 64px 22px 1fr; gap: 0 12px; }
  .tl .t { font-family: "Fredoka", sans-serif; font-weight: 600; text-align: right; padding-top: 2px; }
  .tl .axis { position: relative; }
  .tl .axis::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--line); transform: translateX(-50%); }
  .tl .axis i { position: relative; z-index: 1; display: block; width: 14px; height: 14px; margin: 5px auto 0; border-radius: 50%; border: 2px solid var(--ink-line); background: var(--surface); }
  .tl.main .axis i { background: var(--green); }
  .tl.fri.main .axis i { background: var(--blue); }
  .tl:first-child .axis::before { top: 10px; } .tl:last-child .axis::before { bottom: auto; height: 10px; }
  .tl .what { padding: 0 0 20px; display: grid; gap: 2px; }
  .tl .what b { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 16px; }
  .tl .what span { font-size: 13px; color: var(--ink-2); }
  .tl .what a { font-size: 13px; color: var(--green-deep); font-weight: 600; }

  .places { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .place { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 8px; background: var(--surface); }
  .place .n { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 16px; display: flex; gap: 8px; align-items: center; }
  .place .n em { font-style: normal; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink-line); display: inline-grid; place-items: center; font-size: 12px; }
  .place .n em.m { background: var(--warn); } .place .n em.r { background: var(--green); } .place .n em.y { background: var(--blue); }
  .place p { font-size: 13px; color: var(--ink-2); }
  .place .links { display: flex; gap: 6px; flex-wrap: wrap; }
  .mapwrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
  .mapwrap svg { display: block; width: 100%; height: auto; }
  .bring { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  .bring div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; background: var(--surface); }
  .bring div b { display: block; font-family: "Fredoka", sans-serif; font-weight: 600; }

  /* roster */
  table { width: 100%; border-collapse: collapse; min-width: 520px; }
  th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14px; }
  tr:last-child td { border-bottom: 0; }
  .tablewrap { overflow-x: auto; }
  .progs { display: inline-flex; gap: 4px; }
  .empty { padding: 28px 16px; text-align: center; color: var(--ink-3); }

  .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-weight: 600; opacity: 0; transition: .2s ease; pointer-events: none; z-index: 20; box-shadow: var(--shadow); }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .storage-tag { font-size: 11px; color: var(--ink-3); text-align: center; }

  @media (max-width: 720px) {
    .seats { grid-template-columns: 1fr 1fr; }
    .places { grid-template-columns: 1fr; }
    .poster .days { grid-template-columns: 1fr; }
  }
  @media (max-width: 480px) {
    .app { padding: 12px 12px 80px; }
    .row2 { grid-template-columns: 1fr; }
    .kv { grid-template-columns: 1fr; }
    .tabs button { padding: 8px 14px; }
  }
  @media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* Free sessions, location tabs, and guest program guides. */
[hidden] { display: none !important; }
body { font-size: 16px; }
.hint, .field label, .field .lbl, .btn.sm { font-size: 14px; }
.hint { color: var(--ink-2); }
.local-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.local-tabs [role="tab"] { border:1px solid var(--line); padding:11px 17px; border-radius:10px; background:var(--surface-2); font-weight:600; }
.local-tabs [aria-selected="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.location-panel, .guest-panel { display:grid; gap:16px; min-width:0; }
.map-canvas, .google-map { width:100%; height:340px; border:1px solid var(--line); border-radius:12px; overflow:hidden; z-index:0; }
.map-canvas { background:var(--surface-2); }
.map-placeholder { min-height:230px; padding:28px; display:grid; align-content:center; justify-items:center; gap:12px; background:var(--surface-2); border:1px dashed var(--line); border-radius:12px; text-align:center; }
.map-placeholder .map-symbol { font-size:30px; }
.map-note { font-size:14px; color:var(--ink-2); }
.map-links, .share-actions { display:flex; flex-wrap:wrap; gap:10px; }
.teacher-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.teacher { display:grid; grid-template-columns:1fr auto; gap:12px; padding:18px; border:1px solid var(--line); border-radius:12px; align-items:start; }
.teacher-copy { display:grid; gap:6px; }
.teacher .profile { font-size:14px; align-self:start; }
.teacher .profile.pending { color:var(--ink-2); border:1px dashed var(--line); border-radius:10px; padding:8px; max-width:120px; }
.program-guide { display:grid; gap:16px; }
.program-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.bring-list { margin:0; padding-left:22px; display:grid; gap:8px; }
.free-notice { display:flex; gap:12px; flex-wrap:wrap; align-items:center; background:var(--green); color:var(--green-ink); padding:14px 16px; border-radius:12px; }
.flow { display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--ink-2); }
.flow span { background:var(--surface-2); padding:6px 10px; border-radius:6px; }
#shareCopyText { width:100%; margin-top:8px; font:inherit; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:12px; }
#homeGuest { min-width:0; }
dialog { width:min(92vw,500px); border:1px solid var(--ink-line); border-radius:16px; background:var(--surface); color:var(--ink); padding:24px; }
dialog::backdrop { background:rgba(0,0,0,.4); }
#manualCopy { width:100%; padding:12px; font:inherit; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; }
@media(max-width:600px) { .teacher-grid {grid-template-columns:1fr;} .map-canvas,.google-map {height:300px;} .local-tabs [role="tab"] {flex:1;} .share-actions .btn {flex:1; white-space:normal;} .places {grid-template-columns:1fr;} }

/* Language controls stay at the top right without covering the brand. */
.language-switch { justify-self:end; display:flex; gap:3px; padding:4px; background:var(--surface); border:1px solid var(--line); border-radius:999px; }
.language-switch button { padding:8px 13px; border:0; border-radius:999px; background:transparent; color:var(--ink-2); font-size:14px; font-weight:600; min-height:40px; }
.language-switch button[aria-pressed="true"] { background:var(--ink); color:var(--bg); }
.teacher { display:block; padding:0; overflow:hidden; }
.teacher-photo { aspect-ratio:4 / 5; overflow:hidden; background:var(--surface-2); }
.teacher-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.teacher-yoga .teacher-photo img { object-position:50% 62%; }
.teacher-running .teacher-photo img { object-position:50% 50%; }
.teacher-copy { padding:20px; gap:10px; }
.teacher-copy .profile { justify-self:start; margin-top:4px; }
.teacher-feature { display:grid; grid-template-columns:minmax(160px, 32%) minmax(0,1fr); align-items:center; }
.teacher-feature .teacher-photo { width:100%; }
.teacher-feature .teacher-copy h3 { font-size:24px; }
:lang(ko) body, :lang(ja) body { overflow-wrap:break-word; }
@media(max-width:520px) {
  .language-switch { max-width:100%; }
  .language-switch button { padding:8px 11px; }
  .teacher-feature { grid-template-columns:1fr; }
  .teacher-feature .teacher-photo { aspect-ratio:4 / 5; max-height:420px; }
  .row2 { grid-template-columns:1fr; }
  .choice.big span { white-space:normal; }
}

.story-panel { margin-top:0; display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:24px; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.story-poster { width:100%; height:auto; display:block; border-radius:8px; }
.story-copy { min-width:0; display:grid; gap:14px; align-content:center; }
.story-copy p { margin:0; }
@media(max-width:640px) { .story-panel { grid-template-columns:1fr; padding:14px; gap:18px; } .story-poster { max-width:360px; justify-self:center; } }

.home-thumbnail { width:100%; max-width:600px; margin-inline:auto; }
.home-thumbnail img { display:block; width:100%; height:auto; }
.invite-link { display:grid; gap:8px; margin-top:20px; }
.invite-link-actions { display:flex; gap:10px; align-items:center; }
.invite-link-actions input { min-width:0; flex:1; }
.invite-link-actions button { flex-shrink:0; }

#cancelForm { display:grid; gap:16px; }
#cancelForm p { margin:0; }
.btn.danger { background:#a72e2e; border-color:#a72e2e; color:#fff; }
.cancel-error { color:#a72e2e; font-size:14px; }

.cancel-booking-action { margin-top:16px; }

.code-tool-panel { margin-top:20px; }
#recoveryForm { display:grid; gap:16px; margin-top:20px; }
#recoveryResults { display:grid; gap:12px; }
.recovered-booking { padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }

.route-legend { display:flex; align-items:center; gap:10px; }
.route-legend > span { width:30px; height:5px; border-radius:4px; background:#dc2626; flex-shrink:0; }
.route-stops { margin:0; padding-left:26px; font-size:14px; line-height:1.8; }

#mycodeBody .copy-warn { margin:8px 0 12px; }
.mycode-booking-summary { display:grid; justify-items:center; gap:12px; margin:20px 0; text-align:center; }
.mycode-booking-summary .hint { margin:0; line-height:1.6; }
#mycodeBody > .choices { margin-top:12px; }