/* PeacefulDay — public site. Tokens first; components below in page order. */
:root {
  --bg:#fbfbfd; --surface:#ffffff; --surface-2:#f2f3f7; --fg:#11131a; --muted:#5b6173; --faint:#8d93a5; --line:rgba(17,19,26,.09);
  --accent:#4b63f0; --link:#3550e0;
  --tip:#0f9f6e; --note:#3b6fe0; --warning:#d97706;
  --r:20px; --r-sm:14px;
  --shadow:0 1px 1px rgba(17,19,26,.03),0 10px 28px -12px rgba(17,19,26,.14);
  --measure:68ch;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0a0b11; --surface:#12141d; --surface-2:#191c28; --fg:#eceef4; --muted:#a0a6b8; --faint:#6c7285; --line:rgba(255,255,255,.08);
    --link:#9db0ff; --tip:#34d399; --note:#8aa8ff; --warning:#fbbf24; --shadow:0 1px 1px rgba(0,0,0,.4),0 16px 36px -16px rgba(0,0,0,.6); color-scheme:dark; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:76px; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.7 "Pretendard Variable",Pretendard,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
:lang(ko) { word-break:keep-all; overflow-wrap:anywhere; }
img { max-width:100%; height:auto; }
a { color:var(--link); text-underline-offset:.18em; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
.narrow { max-width:760px; }

/* header / footer */
.top { position:sticky; top:0; z-index:10; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); }
.top .wrap { display:flex; align-items:center; gap:16px; height:60px; }
.brand { font-weight:750; letter-spacing:-.02em; color:var(--fg); text-decoration:none; font-size:1.05rem; }
.top nav { margin-left:auto; display:flex; gap:18px; align-items:center; font-size:.92rem; }
.top nav a { color:var(--muted); text-decoration:none; transition:color .15s; }
.top nav a:hover { color:var(--fg); }
.lang { padding:4px 12px; border:1px solid var(--line); border-radius:999px; }
footer { border-top:1px solid var(--line); margin-top:96px; padding:36px 0 48px; color:var(--muted); font-size:.88rem; }
footer .wrap { display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; }
footer a { color:var(--muted); }
footer ul { list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; padding:0; }

/* shared */
h2.section { font-size:1.35rem; letter-spacing:-.02em; margin:56px 0 18px; }
.page-title { font-size:clamp(1.7rem,4vw,2.2rem); letter-spacing:-.03em; margin:12px 0 22px; }
.crumbs { font-size:.88rem; color:var(--muted); margin:28px 0 0; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--fg); text-decoration:underline; }
.more { margin-top:14px; }

/* home */
.home-hero { padding:80px 0 16px; }
.home-hero h1 { font-size:clamp(2.1rem,5.4vw,3.4rem); line-height:1.1; letter-spacing:-.045em; margin:0; max-width:16em; }
.home-hero p { color:var(--muted); max-width:34em; font-size:1.1rem; margin:18px 0 0; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
.product-card { display:flex; gap:16px; align-items:flex-start; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); text-decoration:none; color:var(--fg); transition:transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s; }
.product-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--fg) 16%,transparent); }
.product-card img { width:64px; height:64px; border-radius:15px; flex:none; }
.product-card b { display:block; font-size:1.05rem; letter-spacing:-.01em; }
.product-card span { display:block; color:var(--muted); font-size:.93rem; line-height:1.5; margin-top:4px; }

/* guide list */
.guide-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.guide-list a { display:block; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); text-decoration:none; color:var(--fg); transition:border-color .15s; }
.guide-list a:hover { border-color:var(--accent); }
.guide-list b { display:block; font-weight:650; line-height:1.45; }
.guide-list small { color:var(--muted); font-size:.85rem; }

/* product page */
.product-hero { padding:64px 0 24px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; }
.product-hero img.icon { width:112px; height:112px; border-radius:26px; box-shadow:var(--shadow); }
.product-hero h1 { margin:0; font-size:clamp(1.9rem,4.4vw,2.8rem); letter-spacing:-.035em; line-height:1.15; }
.product-hero p { margin:10px 0 0; color:var(--muted); font-size:1.1rem; }
.lead { font-size:1.08rem; max-width:44em; }
.stores { display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; margin-top:20px; }
.stores img { height:52px; width:auto; display:block; }
.stores small { color:var(--muted); }
.btn-link { display:inline-flex; align-items:center; height:48px; padding:0 22px; border-radius:999px; background:var(--accent); color:#fff; font-weight:650; text-decoration:none; }
.btn-link:hover { filter:brightness(1.08); }
.shots { display:flex; gap:14px; overflow-x:auto; padding:8px 2px 18px; margin-top:24px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.shots img { width:240px; height:auto; flex:none; border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow); scroll-snap-align:start; }
.features { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.feature { padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.feature h3 { margin:0 0 6px; font-size:1.05rem; letter-spacing:-.01em; }
.feature h3::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:10px; vertical-align:middle; }
.feature p { margin:0; color:var(--muted); font-size:.96rem; line-height:1.6; }
.faq details { border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary { cursor:pointer; font-weight:600; list-style-position:outside; }
.faq details p { color:var(--muted); margin:8px 0 0; }

/* article + blocks */
article h1 { font-size:clamp(1.8rem,4.2vw,2.5rem); line-height:1.22; letter-spacing:-.035em; margin:14px 0 10px; }
article .meta { color:var(--faint); font-size:.88rem; margin:0 0 28px; }
article h2 { font-size:1.4rem; letter-spacing:-.02em; margin:48px 0 12px; line-height:1.35; }
article h3 { font-size:1.12rem; margin:32px 0 8px; }
article p, article li { font-size:1.04rem; }
article li { margin:6px 0; }
article code { background:var(--surface-2); padding:2px 6px; border-radius:6px; font-size:.9em; }
article pre { background:var(--surface-2); border-radius:var(--r-sm); padding:16px 18px; overflow-x:auto; font-size:.9rem; line-height:1.55; }
article pre code { background:none; padding:0; }
article blockquote { margin:24px 0; padding:2px 20px; border-left:3px solid var(--accent); color:var(--fg); }
.steps { list-style:none; counter-reset:step; padding:0; margin:24px 0; display:grid; gap:14px; }
.steps > li { counter-increment:step; position:relative; padding:18px 20px 18px 64px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); margin:0; }
.steps > li::before { content:counter(step); position:absolute; left:18px; top:16px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff; font-weight:700; font-size:.9rem; }
.steps b { display:block; }
.steps p { margin:4px 0 0; color:var(--muted); }
.steps img { display:block; margin-top:14px; max-width:min(100%,320px); border-radius:12px; border:1px solid var(--line); }
.callout { margin:24px 0; padding:16px 18px; border-radius:var(--r-sm); border:1px solid color-mix(in srgb,var(--tone) 30%,transparent); background:color-mix(in srgb,var(--tone) 8%,var(--surface)); --tone:var(--note); }
.callout.tip { --tone:var(--tip); } .callout.warning { --tone:var(--warning); }
.callout b { display:block; color:var(--tone); font-size:.92rem; margin-bottom:2px; }
.callout p { margin:0; }
.image { margin:28px 0; }
.image img { display:block; border-radius:var(--r-sm); border:1px solid var(--line); }
.image figcaption { color:var(--muted); font-size:.88rem; margin-top:8px; }
.table { overflow-x:auto; margin:24px 0; border:1px solid var(--line); border-radius:var(--r-sm); }
.table table { border-collapse:collapse; width:100%; font-size:.95rem; }
.table th, .table td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.table tr:last-child td { border-bottom:0; }
.table th { background:var(--surface-2); font-weight:650; }
article .faq { margin:20px 0; }

/* product box — the only place a guide promotes something */
.cta { display:flex; gap:16px; align-items:center; margin:36px 0; padding:20px; border-radius:var(--r); background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); box-shadow:var(--shadow); }
.cta img.icon { width:56px; height:56px; border-radius:14px; flex:none; }
.cta .txt { flex:1; min-width:0; }
.cta b { display:block; font-size:1.02rem; }
.cta span { display:block; color:var(--muted); font-size:.92rem; line-height:1.5; }
.cta .btn { flex:none; padding:10px 18px; border-radius:999px; background:var(--accent); color:#fff; font-weight:650; text-decoration:none; font-size:.94rem; white-space:nowrap; }
.cta .btn:hover { filter:brightness(1.08); }

@media (max-width:560px) {
  body { font-size:16px; }
  .product-hero { grid-template-columns:1fr; gap:16px; padding-top:40px; }
  .product-hero img.icon { width:88px; height:88px; border-radius:20px; }
  .shots img { width:200px; }
  .cta { flex-wrap:wrap; }
  .cta .btn { width:100%; text-align:center; }
  .steps > li { padding-left:56px; }
  .top nav .hide-sm { display:none; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }