:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-soft: #f3f4f6;
  --fg: #15171a;
  --muted: #5c6370;
  --line: #e4e7eb;
  --card: #ffffff;
  --accent: #1f7ae0;
  --accent-ink: #ffffff;
  --accent-soft: #e6f0fc;
  --done: #2db24a;
  --done-row: #ddf5d4;
  --rest: #17181b;
  --rest-ink: #f1f2f4;
  --rest-muted: #a3a9b3;
  --plate-25: #d8343c;
  --plate-20: #2563eb;
  --plate-15: #f2c200;
  --plate-10: #2e9e44;
  --plate-5: #ffffff;
  --plate-2: #2b2d31;
  --plate-1: #b8bec6;
  --bar: #8d939b;
  --app-primary: #1a6fd1;
  --app-on-primary: #ffffff;
  --accent-soft-ink: #0d3f78;
  --accent-line: rgba(13, 63, 120, .14);
  --bubble: #f3f4f6;
  --gain: #13692d;
  --gain-soft: rgba(23, 128, 55, .12);
  --same-soft: rgba(92, 99, 112, .14);
  --shadow: 0 1px 2px rgba(21, 23, 26, .06), 0 10px 30px rgba(21, 23, 26, .10);
  --display: "Barlow Semi Condensed", "Pretendard Variable", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-soft: #111214;
    --fg: #f1f2f4;
    --muted: #a3a9b3;
    --line: #26272b;
    --card: #111214;
    --accent: #4a9bff;
    --accent-ink: #04111f;
    --accent-soft: #12304f;
    --done: #34c759;
    --done-row: #13321b;
    --rest: #1c1d20;
    --bar: #6b7078;
    --app-primary: #4a9bff;
    --app-on-primary: #0a1a2e;
    --accent-soft-ink: #d3e6ff;
    --accent-line: rgba(211, 230, 255, .14);
    --bubble: #1c1d20;
    --gain: #34c759;
    --gain-soft: rgba(52, 199, 89, .16);
    --same-soft: rgba(163, 169, 179, .16);
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.6 Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; height: auto; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3, .num { font-family: var(--display); letter-spacing: -.01em; }
h1, h2, h3, .lead { text-wrap: balance; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.site-header { border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 10px 22px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font: 700 21px/1 var(--display); }
.brand:hover { text-decoration: none; }
.site-nav { display: flex; gap: 4px 20px; font-size: 16px; margin-left: auto; }
.site-nav a { color: var(--muted); }
.site-nav a[aria-current] { color: var(--fg); font-weight: 600; }
.languages { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; font-size: 14px; }
.languages a { color: var(--muted); padding: 3px 12px; border-radius: 999px; }
.languages a[aria-current] { background: var(--fg); color: var(--bg); }
.languages a:hover { text-decoration: none; }

.hero { padding: 64px 0 28px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(46px, 7vw, 88px); font-weight: 800; line-height: .98; margin: 0 0 22px; letter-spacing: -.02em; }
.hero .lead { font-size: clamp(18px, 2.1vw, 21px); color: var(--muted); max-width: 560px; margin: 0 0 28px; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 12px; font-weight: 600; font-size: 17px;
  border: 1px solid var(--line); color: var(--fg); background: var(--card); }
.button:hover { text-decoration: none; border-color: var(--accent); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fine { margin: 18px 0 0; font-size: 15px; color: var(--muted); }

.phone { width: min(300px, 100%); margin: 0 auto; border-radius: 30px; overflow: hidden; background: #000;
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.phone.pair { display: grid; grid-template-columns: 1fr; }
.stack { position: relative; width: min(400px, 100%); margin: 0 auto; padding: 0 0 40px 120px; }
.stack .phone { width: 100%; max-width: 280px; }
.stack .fit3 { position: absolute; left: 0; bottom: 0; width: 50%; max-width: 200px; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .35)); }

.fit3 { display: block; overflow: visible; }
.fit3 .strap { fill: #d8d3c6; }
.fit3 .lug { fill: #1d1e21; }
.fit3 .frame { fill: #b9bcc2; }
.fit3 .bezel { fill: #15161a; }
.fit3 .screen { fill: #000; }
.fit3 .clock { fill: #fff; font: 600 17px Barlow, sans-serif; }
.fit3 .title { fill: #fff; font: 600 14.5px Barlow, "Pretendard Variable", sans-serif; }
.fit3 .sub { fill: #fff; font: 600 14.5px Barlow, "Pretendard Variable", sans-serif; }
.fit3 .btn { fill: #3a3546; }
.fit3 .btn.ring { fill: #2a2633; stroke: #4b4459; stroke-width: 4; }
.fit3 .glyph { fill: #fff; }
.fit3 .mute { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.fit3 .handle { fill: #fff; }
.fit3 .wave { fill: none; stroke: var(--done); stroke-width: 4; stroke-linecap: round; opacity: 0; animation: buzz 1.6s ease-out .6s 2 both; }
.fit3 .wave.far { animation-delay: .75s; }
@keyframes buzz { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

.loaded { padding: 8px 0 56px; }
.loaded-row { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 26px; }
.total { margin: 0; font: 800 clamp(56px, 9vw, 104px)/.9 var(--display); }
.total small { font-size: .38em; font-weight: 600; color: var(--muted); margin-left: 6px; }
.total-note { margin: 0 0 10px; color: var(--muted); font-size: 16px; max-width: 320px; }
.barbell { display: flex; align-items: center; height: 120px; margin-top: 24px; }
.barbell .sleeve { flex: 0 0 26px; height: 12px; background: var(--bar); border-radius: 6px; }
.barbell .collar { flex: 0 0 8px; height: 30px; background: var(--bar); border-radius: 3px; }
.barbell .shaft { flex: 1; height: 8px; background: var(--bar); opacity: .8; }
.plate { flex: 0 0 auto; width: 20px; height: var(--h); margin: 0 1px; border-radius: 4px; background: var(--c);
  display: grid; place-items: center; color: var(--ink, #fff); font: 700 11px/1 var(--display); writing-mode: vertical-rl; }
.plate.p25 { --c: var(--plate-25); --h: 116px; }
.plate.p20 { --c: var(--plate-20); --h: 116px; width: 18px; }
.plate.p15 { --c: var(--plate-15); --h: 102px; width: 16px; --ink: #2a2200; }
.plate.p10 { --c: var(--plate-10); --h: 88px; width: 14px; }
.plate.p1 { --c: var(--plate-1); --h: 42px; width: 10px; --ink: #15171a; font-size: 8px; }

section.block { padding: 84px 0; }
section.soft { background: var(--bg-soft); }
.block h2 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; line-height: 1.02; margin: 0 0 16px; }
.block .lead { color: var(--muted); font-size: 19px; max-width: 620px; margin: 0 0 28px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.flip > :first-child { order: 2; }

.band { background: var(--rest); color: var(--rest-ink); }
.band .lead, .band .note { color: var(--rest-muted); }
.buttons-map { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.buttons-map li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; }
.key { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #2c2d32; color: #fff; }
.key svg { width: 24px; height: 24px; }
.key.buzz { background: var(--done); color: #04140a; }
.buttons-map strong { display: block; font: 700 21px/1.2 var(--display); }
.buttons-map span { color: var(--rest-muted); }
.note { margin-top: 28px; font-size: 15px; max-width: 560px; }
.catch { margin-top: 32px; padding: 18px 20px; border-radius: 14px; border: 1px solid #3a3b40; max-width: 600px; }
.catch strong { display: block; font: 700 19px/1.3 var(--display); color: var(--rest-ink); margin-bottom: 4px; }
.catch p { margin: 0; color: var(--rest-muted); font-size: 16px; }

.flow { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; }
.flow .app-chip { padding: 12px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  font: 700 22px/1 var(--display); }
.flow .app-chip.ours { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.flow .step { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 15px; }
.flow .step::after { content: ""; width: 26px; height: 2px; background: var(--muted);
  clip-path: polygon(0 0, 80% 0, 80% -300%, 100% 50%, 80% 400%, 80% 100%, 0 100%); }
.fine-print { margin-top: 18px; color: var(--muted); font-size: 15px; max-width: 640px; }

.chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px; border-radius: 50%;
  font: 700 16px/1 var(--display); background: var(--c); color: var(--ink, #fff); }
.chips .p5 { --c: var(--plate-5); --ink: #15171a; box-shadow: inset 0 0 0 1px var(--line); }
.chips .p2 { --c: var(--plate-2); }
.chips .p1 { --c: var(--plate-1); --ink: #15171a; }
.chips .p25 { --c: var(--plate-25); }
.chips .p20 { --c: var(--plate-20); }
.chips .p15 { --c: var(--plate-15); --ink: #2a2200; }
.chips .p10 { --c: var(--plate-10); }

.wide-shot { margin-top: 36px; border-radius: 22px; overflow: hidden; background: #000; border: 1px solid var(--line); box-shadow: var(--shadow); }

.shots { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (min-width: 861px) {
  .shots.two { grid-template-columns: repeat(2, minmax(0, 280px)); justify-content: center; gap: 64px; }
}
.shots figure { margin: 0; }
.shots .phone { width: min(280px, 100%); }
.shots figcaption { margin: 16px auto 0; max-width: 280px; text-align: center; color: var(--muted); font-size: 16px; }
.band .shots figcaption { color: var(--rest-muted); }

.fold-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: 48px; align-items: center; }
.fold-track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 22px; }
.fold-track::-webkit-scrollbar { display: none; }
.fold-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.fold-slide figure { margin: 0; }
.fold-slide img { width: 100%; aspect-ratio: 1600 / 1143; object-fit: contain; background: #000; border-radius: 22px; border: 1px solid var(--line); }
.fold-slide figcaption { margin-top: 12px; color: var(--muted); font-size: 16px; }
.fold-controls { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.fold-controls[hidden] { display: none; }
.nav-btn { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--fg); cursor: pointer; }
.nav-btn:hover { border-color: var(--accent); }
.nav-btn[hidden] { display: none; }
.nav-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dots { display: flex; gap: 2px; }
.dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dots button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bar); transition: width .2s; }
.dots button[aria-current="true"]::after { width: 20px; border-radius: 4px; background: var(--accent); }
.fold-controls .pause { margin-left: auto; }
.pause .play { display: none; }
.pause[aria-pressed="true"] .play { display: block; }
.pause[aria-pressed="true"] .stop { display: none; }

.sets { width: 100%; max-width: 820px; border-collapse: separate; border-spacing: 0 8px; }
.sets th { font-weight: 500; color: var(--muted); font-size: 15px; text-align: left; padding: 0 14px; }
.sets th:last-child { text-align: center; }
.sets td { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 14px; vertical-align: top; }
.sets td:first-child { border-left: 1px solid var(--line); border-radius: 14px 0 0 14px; width: 64px;
  font: 700 26px/1.1 var(--display); text-align: center; }
.sets td:last-child { border-right: 1px solid var(--line); border-radius: 0 14px 14px 0; width: 72px; text-align: center; vertical-align: middle; }
.sets strong { display: block; font: 700 21px/1.25 var(--display); margin-bottom: 2px; }
.sets p { margin: 0; color: var(--muted); font-size: 16px; }
.sets tr:has(input:checked) td { background: var(--done-row); }
.check { appearance: none; width: 40px; height: 40px; margin: 0; border-radius: 10px; background: var(--bg-soft);
  border: 1px solid var(--line); display: inline-grid; place-items: center; cursor: pointer; }
.check::after { content: ""; width: 14px; height: 8px; border: solid var(--muted); border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
.check:checked { background: var(--done); border-color: var(--done); }
.check:checked::after { border-color: #fff; }

.facts { display: grid; gap: 26px; margin: 0; }
.facts div { border-left: 3px solid var(--accent); padding-left: 16px; }
.facts dt { font: 700 21px/1.25 var(--display); }
.facts dd { margin: 4px 0 0; color: var(--muted); }

.coach { align-items: start; margin-top: 8px; }
.coach h3 { font-size: 24px; margin: 0 0 12px; }
.coach-key p { margin: 0; color: var(--muted); }
.providers { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.providers li { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-weight: 600; font-size: 15px; }
.prices { width: 100%; border-collapse: collapse; font-size: 15px; }
.prices th, .prices td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.prices th { font-weight: 600; color: var(--muted); font-size: 14px; }
.prices td + td, .prices th + th { text-align: right; white-space: nowrap; }
.note { color: var(--muted); font-size: 14px; margin: 12px 0 0; }
.how { margin-top: 10px; color: var(--muted); font-size: 14px; }
.how summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.how p { margin: 6px 0 0; }

.coach-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; margin: 8px 0 64px; }
.coach-shots figure { margin: 0; }
.coach-shots figcaption { margin-top: 14px; color: var(--muted); font-size: 16px; }
.app-screen { display: grid; gap: 10px; padding: 14px; border-radius: 26px; background: var(--bg); border: 1px solid var(--line);
  box-shadow: var(--shadow); font-size: 15px; line-height: 1.4; }
.app-screen p { margin: 0; }
.app-card { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-soft-ink); }
.app-title { font-weight: 600; font-size: 16px; }
.app-sub { color: var(--muted); font-size: 13.5px; }
.app-num { font: 600 19px/1.15 var(--display); font-feature-settings: "tnum"; white-space: nowrap; }
.target-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0 4px; border-top: 1px solid var(--accent-line); }
.target-row:first-of-type { margin-top: 6px; }
.target-row > :last-child { display: grid; justify-items: end; gap: 4px; }
.delta { padding: 3px 6px; border-radius: 6px; font: 600 12.5px/1 Barlow, sans-serif; }
.delta.gain { color: var(--gain); background: var(--gain-soft); }
.delta.same { color: var(--muted); background: var(--same-soft); }
.app-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.app-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 999px;
  background: var(--app-primary); color: var(--app-on-primary); font-weight: 600; font-size: 14.5px; justify-self: start; }
.app-btn.ghost { background: none; color: var(--accent-soft-ink); border: 1px solid var(--accent-line); }
.app-actions .app-btn { justify-self: stretch; }
.bubble { max-width: 92%; padding: 12px 14px; border-radius: 18px; }
.bubble.me { justify-self: end; background: var(--app-primary); color: var(--app-on-primary); }
.bubble.coach { justify-self: start; display: grid; gap: 10px; background: var(--bubble); }
.change { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: center; padding: 5px 0; }
.box { width: 18px; height: 18px; border-radius: 3px; background: var(--app-primary); display: grid; place-items: center; }
.box::after { content: ""; width: 9px; height: 5px; border: solid var(--app-on-primary); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.changes .app-btn { margin-top: 6px; }
.app-panel { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--bubble); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { padding: 9px 12px; border-radius: 12px; background: var(--bg); }
.tile.wide { grid-column: 1 / -1; }
.tile > span:first-child { display: block; color: var(--muted); font-size: 12.5px; }
.tile .app-num { display: block; font-size: 22px; }
.ideas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ideas li { padding: 6px 10px; border-radius: 10px; background: var(--bg); font-size: 13.5px; font-weight: 500; }

.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 56px; align-items: start; }
.faq dl { margin: 0; }
.faq dl div { padding: 22px 0; border-top: 1px solid var(--line); }
.faq dl div:last-child { border-bottom: 1px solid var(--line); }
.faq dt { font: 700 21px/1.25 var(--display); }
.faq dd { margin: 6px 0 0; color: var(--muted); max-width: 62ch; }

.doc { max-width: 720px; padding-top: 40px; }
.doc h1 { font-size: 46px; font-weight: 800; line-height: 1; margin: 0 0 10px; }
.doc h2 { font-size: 26px; margin: 36px 0 6px; }
.doc p, .doc li { color: var(--muted); }
code { background: var(--bg-soft); padding: 1px 6px; border-radius: 5px; font-size: .9em; }

.site-footer { border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: 15px; color: var(--muted); }
.footer-row { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; }
.footer-row a { color: var(--muted); }

@media (max-width: 860px) {
  .hero-grid, .split { grid-template-columns: 1fr; gap: 40px; }
  .faq { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
  .coach-shots { grid-template-columns: minmax(0, 420px); justify-content: center; gap: 40px; }
  .fold-grid { grid-template-columns: 1fr; gap: 28px; }
  .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 -20px; padding: 0 20px 8px; scrollbar-width: none; }
  .shots::-webkit-scrollbar { display: none; }
  .shots > li { flex: 0 0 min(72%, 280px); min-width: 0; scroll-snap-align: center; }
  section.block { padding: 64px 0; }
  .barbell { height: 92px; }
  .plate.p25, .plate.p20 { --h: 88px; }
  .plate.p15 { --h: 78px; }
  .plate.p10 { --h: 68px; }
  .plate { font-size: 0; }
}
@media (max-width: 560px) {
  .site-nav { margin-left: 0; order: 3; width: 100%; }
  .languages { margin-left: auto; }
  .stack { padding-left: 90px; }
  .barbell .p20, .barbell .p15 { display: none; }
  .sets td { padding: 14px 10px; }
  .sets td:first-child { width: 44px; font-size: 22px; }
  .sets td:last-child { width: 56px; }
}

:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
body:lang(ko) { font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; font-size: 16.5px; }
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) .brand, :lang(ko) .buttons-map strong, :lang(ko) .sets strong, :lang(ko) .facts dt, :lang(ko) .faq dt {
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; letter-spacing: -.03em; }
:lang(ko) .hero h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.12; }
:lang(ko) .block h2 { line-height: 1.18; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fit3 .wave { animation: none; opacity: 1; }
  .dots button::after { transition: none; }
}