/* 레이아웃 개념: 흰 바탕 위에 실제 화면을 크게 둔다. 색은 잉크와 청록 하나로 제한하고, 저장 구역만 어둡게 뒤집어 흐름을 끊는다. */
:root {
  --bg: #ffffff;
  --soft: #f4f6f6;
  --ink: #0f1a1c;
  --ink-2: #435157;
  --line: #e2e7e8;
  --accent: #14696f;
  --tint: #e5f3f1;
  --cta: #14696f;
  --cta-hover: #0f5459;
  --on-cta: #ffffff;
  --frame: #1a1f21;
  --band: #0f1a1c;
  --on-band: #eef3f3;
  --on-band-2: #a5b4b7;
  --focus-line: #1c7a82;
  --body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --spring: cubic-bezier(.2, .8, .2, 1);
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-end: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1214;
    --soft: #141c1f;
    --ink: #eef3f3;
    --ink-2: #a9b6b8;
    --line: #253035;
    --accent: #5ee3cf;
    --tint: #173a3b;
    --cta: #1c7a82;
    --cta-hover: #238e97;
    --frame: #2a3235;
    --band: #141c1f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1214;
  --soft: #141c1f;
  --ink: #eef3f3;
  --ink-2: #a9b6b8;
  --line: #253035;
  --accent: #5ee3cf;
  --tint: #173a3b;
  --cta: #1c7a82;
  --cta-hover: #238e97;
  --frame: #2a3235;
  --band: #141c1f;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: .18em; }
a:focus-visible { outline: 3px solid var(--tile-focus, #3fc7b7); outline-offset: 3px; border-radius: 6px; }
h1, h2 { font-weight: 800; letter-spacing: -.03em; text-wrap: balance; margin: 0; }
h1 { line-height: 1.14; }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.625rem); line-height: 1.22; }
h3 { font-size: 1.125rem; line-height: 1.45; margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
.fine { font-size: .9rem; color: var(--ink-2); }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-end); }

/* 머리글 */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 20px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.brand img { width: 32px; height: 32px; }
.site-nav { display: flex; gap: 20px; margin-left: auto; }
.site-nav a { color: var(--ink-2); text-decoration: none; font-size: .95rem; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); }
.get-small { padding: .4rem .9rem; background: var(--cta); color: var(--on-cta); border-radius: 8px; font-size: .92rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; }
.get-small:hover { background: var(--cta-hover); }
@media (max-width: 760px) { .site-nav { display: none; } .get-small { margin-left: auto; } }

/* Google Play 공식 배지 */
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.play-badge { display: block; flex: none; line-height: 0; }
.play-badge img { width: 186px; height: 72px; }

/* 플랫폼 탭. 패널을 같은 칸에 겹쳐 두어 탭을 바꿔도 아래 내용이 움직이지 않는다. */
.platforms { display: grid; gap: 14px; }
.platform-tabs { position: relative; display: flex; gap: 24px; border-bottom: 1px solid var(--line); }
.platform-tabs.has-line::after { content: ""; position: absolute; left: 0; bottom: -1px; width: var(--line-w, 0); height: 2px; background: var(--ink); transform: translateX(var(--line-x, 0)); transition: transform .28s var(--spring), width .28s var(--spring); }
.platform-tabs.has-line .platform-tab[aria-selected="true"] { border-bottom-color: transparent; }
.platform-tab { appearance: none; display: grid; gap: 1px; margin: 0 0 -1px; padding: 0 0 9px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink-2); font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; text-align: left; white-space: nowrap; cursor: pointer; }
.platform-tab small { color: var(--ink-2); font-size: .75rem; font-weight: 500; letter-spacing: 0; }
.platform-tab:hover { color: var(--ink); }
.platform-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.platform-tab:focus-visible { outline: 3px solid #3fc7b7; outline-offset: 3px; border-radius: 4px; }
.platform-panels { display: grid; }
.platform-panels > [role="tabpanel"] { grid-area: 1 / 1; min-width: 0; }
.platforms.has-switched [role="tabpanel"]:not([hidden]) { animation: panel-in .28s ease-out; }
.platform-panels > [hidden] { display: flex; visibility: hidden; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }
.soon { display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 8px 14px; min-height: 72px; }
.soon-label { padding: .3rem .75rem; border-radius: 999px; background: var(--tint); color: var(--accent); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.soon p { color: var(--ink-2); font-size: .95rem; }

/* 첫 화면 */
.hero { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 48px; align-items: center; padding-block: 48px 64px; }
.hero-copy { display: grid; gap: 18px; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
.hero .platforms { margin-top: 14px; }
.lede { font-size: 1.1875rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.demo { margin: 0; display: grid; gap: 14px; justify-items: center; }
.demo figcaption { font-size: .9rem; color: var(--ink-2); text-align: center; }
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 32px 56px; }
  .hero h1 { font-size: clamp(2.25rem, 10.4vw, 3.5rem); }
}

/* 첫 화면의 움직이는 기기: 샘플 페이지 두 개를 실제 크기로 띄우고 줄여 보여 준다. 끄는 동안 페이지가 다시 배치된다. */
.device { width: 100%; max-width: 600px; background: var(--frame); padding: 5px; border-radius: 22px; box-shadow: 0 22px 50px -26px rgba(8, 26, 30, .5); }
.device-screen { position: relative; overflow: hidden; border-radius: 17px; background: #fff; }
.panes { --split: 50%; --s: .76; position: relative; display: grid; grid-template-columns: minmax(0, var(--split)) minmax(0, 1fr); aspect-ratio: 1768 / 1703; background: #fff; }
.pane { position: relative; overflow: hidden; min-width: 0; min-height: 0; }
.pane iframe { position: absolute; left: 0; top: 0; width: calc(100% / var(--s)); height: calc(100% / var(--s)); border: 0; transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; }
.pane + .pane { border-left: 1px solid #d6dadb; }
/* 좌우 분할에서 조작 중인 창을 표시하는 앱의 청록 선 */
.pane + .pane::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto 0; height: 3px; background: var(--focus-line); }
/* 폴드가 접히는 자리의 옅은 주름. 손잡이를 옮겨도 그대로 남는다. */
.panes::after { content: ""; position: absolute; z-index: 1; left: 50%; top: 0; bottom: 0; width: 18px; margin-left: -9px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .05), transparent); pointer-events: none; }
.chrome { display: block; }
.chrome img { width: 100%; }
.split-handle { position: absolute; z-index: 2; left: var(--split); top: 50%; transform: translate(-50%, -50%); width: 22px; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: #fff; border-radius: 999px; box-shadow: 0 0 0 1px rgba(10, 30, 35, .16), 0 2px 8px rgba(10, 30, 35, .16); cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
/* 작은 손잡이도 손가락으로 잡기 쉽게 터치 영역을 넓힌다 */
.split-handle::before { content: ""; position: absolute; inset: -14px; }
.split-handle i { width: 5px; height: 5px; border-radius: 50%; background: #5c6b6e; pointer-events: none; }
.split-handle:hover i, .is-dragging .split-handle i { background: var(--focus-line); }
.split-handle:focus-visible { outline: 3px solid #3fc7b7; outline-offset: 3px; }
.is-dragging { user-select: none; -webkit-user-select: none; }
@media (max-width: 860px) {
  .device { max-width: min(80vw, 320px); border-radius: 26px; }
  .device-screen { border-radius: 21px; }
  .panes { --split: 44%; --s: .72; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, var(--split)) minmax(0, 1fr); aspect-ratio: 1080 / 1989; }
  .pane + .pane { border-left: 0; border-top: 1px solid #d6dadb; }
  .pane + .pane::before, .panes::after { display: none; }
  .split-handle { left: 50%; top: var(--split); flex-direction: row; width: 54px; height: 22px; cursor: ns-resize; }
}

/* 휴대폰·폴드 틀과 잘라 낸 화면 */
.phone { margin: 0; background: var(--frame); padding: 5px; border-radius: 26px; box-shadow: 0 18px 40px -24px rgba(8, 26, 30, .5); }
.phone img { width: 100%; border-radius: 21px; }
.fold { border-radius: 22px; }
.fold img { border-radius: 17px; }
.shot { display: block; width: 100%; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }

/* 본문 구역 */
.band { padding-block: 72px; }
.band-soft { background: var(--soft); }
.more { font-size: .95rem; color: var(--ink-2); }
.more:hover { color: var(--ink); }
@media (max-width: 860px) { .band { padding-block: 52px; } }

/* 화면 크기별 분할 */
.screens { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: center; }
.screens-copy { display: grid; gap: 14px; justify-items: start; }
.screens-copy p { color: var(--ink-2); }
.screens-shots { display: grid; grid-template-columns: minmax(0, 955fr) minmax(0, 1100fr); gap: 20px; align-items: end; }
@media (max-width: 860px) {
  .screens { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .screens-shots { grid-template-columns: minmax(0, 1fr); }
  /* 좁은 화면의 첫 화면이 이미 휴대폰 분할이므로 여기서는 폴드만 보여 준다 */
  .screens-shots .only-wide { display: none; }
}
/* 스크롤하면 두 창이 나뉘는 자리를 따라 선이 그어졌다가 사라진다. 지원하지 않는 브라우저에서는 사진만 보인다. */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .seam-x, .seam-y { position: relative; }
  .seam-x::after, .seam-y::after { content: ""; position: absolute; background: #2dd4bf; border-radius: 3px; animation-timeline: view(); animation-range: entry 0% cover 62%; animation-fill-mode: both; animation-timing-function: linear; }
  /* 13.9% 는 촬영본 아래쪽 브라우저 도구 막대의 높이다 */
  .seam-x::after { top: 5px; bottom: calc(5px + (100% - 10px) * .139); left: 50%; width: 3px; margin-left: -1.5px; transform-origin: 50% 0; animation-name: seam-x; }
  /* 41.8% 는 촬영본에서 위아래 창이 나뉘는 높이다 */
  .seam-y::after { left: 5px; right: 5px; top: calc(5px + (100% - 10px) * .418); height: 3px; margin-top: -1.5px; transform-origin: 0 50%; animation-name: seam-y; }
  @keyframes seam-x { 0% { transform: scaleY(0); } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
  @keyframes seam-y { 0% { transform: scaleX(0); } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
} }

/* 저장 구역: 앱 화면을 겹쳐 놓고 save-flow.js 가 data-beat 를 바꾸면 시트와 목록이 올라온다 */
.band-dark { background: var(--band); color: var(--on-band); }
.band-dark .fine { color: var(--on-band-2); }
.band-dark .more { color: var(--on-band-2); }
.band-dark .more:hover { color: var(--on-band); }
.band-dark .phone { background: #2f393c; }
.save { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 88px; align-items: center; }
.save-copy { display: grid; gap: 14px; justify-items: start; }
.flow { order: -1; }
.flow-steps { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 4px; }
.flow-steps button { appearance: none; padding: 2px 0; background: none; border: 0; color: inherit; font: inherit; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.35; text-align: left; white-space: nowrap; cursor: pointer; opacity: .36; transition: opacity .3s ease; }
.flow-steps button:hover { opacity: .7; }
.flow-steps button[aria-current] { opacity: 1; }
.flow-steps button:focus-visible { outline: 3px solid #3fc7b7; outline-offset: 3px; border-radius: 4px; }
.flow-screen { position: relative; overflow: hidden; aspect-ratio: 720 / 1539; border-radius: 21px; background: #fff; }
.flow-screen > * { position: absolute; }
.flow .flow-screen img { border-radius: 0; }
.flow-page { inset: 0; }
/* 위치는 촬영본의 영상 영역과 맞춘 값이다 */
.flow-clip { left: 4.35%; top: 25.13%; width: 91.4%; height: 24%; overflow: hidden; border-radius: 2.4% / 4.3%; }
.flow-clip img { width: 100%; height: 100%; object-fit: cover; animation: flow-drift 16s ease-in-out infinite alternate; }
@keyframes flow-drift { to { transform: scale(1.09); } }
.flow-dim { inset: 0; background: #000; opacity: 0; transition: opacity .3s ease; }
.flow-sheet { left: 0; bottom: 0; width: 100%; transform: translateY(100%); transition: transform .45s var(--spring); }
.flow-list { inset: 0; transform: translateY(100%); transition: transform .5s var(--spring); }
.flow-mark { position: absolute; left: 4%; top: 52.1%; width: 92%; height: 13.56%; border-radius: 3.6% / 11.5%; box-shadow: 0 0 0 2px #2dd4bf; opacity: 0; transition: opacity .3s ease; }
.flow-tap { width: 16%; aspect-ratio: 1; margin: -8% 0 0 -8%; border-radius: 50%; background: rgba(15, 26, 28, .26); opacity: 0; pointer-events: none; }
.flow[data-beat="page"] .flow-tap { left: 40.5%; top: 81.8%; }
.flow[data-beat="sheet"] .flow-tap { left: 50%; top: 75.5%; }
.flow[data-beat="sheet"] .flow-dim, .flow[data-beat="list"] .flow-dim { opacity: .32; }
.flow[data-beat="sheet"] .flow-sheet, .flow[data-beat="list"] .flow-sheet, .flow[data-beat="list"] .flow-list { transform: none; }
.flow[data-beat="list"] .flow-mark { opacity: 1; transition-delay: .55s; }
.flow.is-tapping .flow-tap { animation: flow-tap .42s ease-out; }
@keyframes flow-tap { 0% { opacity: 0; transform: scale(.45); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } }
@media (max-width: 860px) {
  .save { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .flow { order: 0; width: min(74vw, 300px); justify-self: center; }
  .flow-steps { display: flex; gap: 16px; margin: 4px 0; }
  .flow-steps button { font-size: 1.0625rem; }
}

/* 그 밖의 기능: 설명 없이 이름만 */
.also ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .5em; font-size: clamp(1.625rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.32; }
.also h2 { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.also li:not(:last-child)::after { content: "/"; margin-left: .5em; font-weight: 400; color: var(--ink-2); opacity: .45; }

/* 자주 묻는 질문: 왼쪽 제목, 오른쪽 접힌 목록 */
.split-section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
#faq { padding-top: 0; }
.faq { display: grid; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(var(--ink-2) 0 0) center / 100% 2px no-repeat, linear-gradient(var(--ink-2) 0 0) center / 2px 100% no-repeat; transition: transform .25s var(--spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 3px solid #3fc7b7; outline-offset: 3px; border-radius: 4px; }
.faq p { padding-bottom: 18px; color: var(--ink-2); }
/* 지원하는 브라우저에서는 부드럽게 펼친다 */
@supports selector(::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .25s ease, content-visibility .25s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
@media (max-width: 860px) {
  .split-section { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* 마지막 받기 구역 */
.closing { background: var(--soft); padding-block: 64px; }
.closing .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.closing-title { display: flex; align-items: center; gap: 18px; flex: 1 1 320px; }
.closing-title img { width: 64px; height: 64px; flex: none; }

/* 설명 페이지 */
.article { padding-block: 52px 80px; }
.article .wrap { max-width: 760px; display: grid; gap: 44px; }
.article-head { display: grid; gap: 16px; }
.article h1 { font-size: clamp(2.1rem, 5.4vw, 3.25rem); }
.article section { display: grid; gap: 16px; }
.article h2 { font-size: clamp(1.45rem, 3.4vw, 1.875rem); }
.article ol, .article ul { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; }
.article li::marker { color: var(--accent); font-weight: 700; }
.article figure { margin: 0; display: grid; gap: 10px; }
.article figure.center { justify-items: center; }
.article figure.center .phone { width: min(70%, 300px); }
.article figure.center .fold { width: min(100%, 520px); }
.article figcaption { font-size: .9rem; color: var(--ink-2); text-align: center; }
.shot-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.callout { background: var(--tint); border-radius: 14px; padding: 20px 22px; display: grid; gap: 8px; }
.qa { display: grid; }
.qa > div { display: grid; gap: 4px; padding-block: 16px; border-top: 1px solid var(--line); }
.qa > div:last-child { border-bottom: 1px solid var(--line); }
.qa p { color: var(--ink-2); }
.related { display: grid; gap: 10px; }
.related ul { list-style: none; padding: 0; }

/* 바닥글 */
.site-foot { border-top: 1px solid var(--line); padding-block: 32px 44px; font-size: .9rem; color: var(--ink-2); }
.site-foot .wrap { display: grid; gap: 12px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-links a { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }