:root {
  --focus: #1556a3;
  font-family: Inter, "Pretendard", "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.6; }
a { color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.skip { position: fixed; top: -80px; left: 12px; z-index: 100; padding: 12px 16px; background: #fff; color: #111; }
.skip:focus { top: 12px; }
.sample { padding: 9px 16px; background: #171717; color: #fff; text-align: center; font-size: 12px; }
.top { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100% - 32px, 1180px); margin: auto; }
.brand, .back, .cta { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.brand { font-weight: 900; letter-spacing: .08em; }
.back { font-size: 13px; text-decoration: underline; text-underline-offset: 5px; }
.cta { justify-content: center; padding: 10px 18px; background: var(--accent); color: var(--on-accent); font-weight: 900; }
.hero { min-height: calc(100dvh - 98px); display: grid; }
.copy { display: flex; flex-direction: column; justify-content: center; padding: 56px max(20px, calc((100vw - 1180px) / 2)); }
.kicker { margin: 0 0 16px; color: var(--accent-text); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
h1 { max-width: 760px; margin: 0; font-size: clamp(44px, 13vw, 104px); line-height: .98; letter-spacing: -.055em; word-break: keep-all; }
.lead { max-width: 560px; margin: 26px 0 32px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions a { min-height: 48px; display: inline-flex; align-items: center; padding: 11px 18px; border: 1px solid currentColor; font-weight: 900; text-decoration: none; }
.photo { position: relative; min-height: 52dvh; overflow: hidden; }
.photo::after { position: absolute; inset: 0; content: ""; pointer-events: none; }
.caption { position: absolute; right: 16px; bottom: 16px; z-index: 1; margin: 0; padding: 7px 10px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; }
.notes { width: min(100% - 32px, 1180px); margin: auto; padding: 56px 0 80px; }
.notes h2 { margin: 0 0 20px; font-size: clamp(27px, 7vw, 48px); line-height: 1.25; word-break: keep-all; }
.tokens { display: grid; gap: 12px; margin: 0; }
.tokens div { padding: 18px; border: 1px solid var(--line); background: var(--surface); }
.tokens dt { color: var(--accent-text); font-size: 12px; font-weight: 900; }
.tokens dd { margin: 5px 0 0; }

.lovely { --bg: #fff6f8; --surface: #fff; --ink: #3c2430; --muted: #6d4c5a; --accent: #8f3658; --on-accent: #fff; --accent-text: #8f3658; --line: #e3bdca; }
.lovely h1 { font-family: "Iowan Old Style", Baskerville, Georgia, serif; font-weight: 500; }
.lovely h1 em { color: var(--accent); font-weight: 400; }
.lovely .photo { margin: 0 20px 20px; border-radius: 160px 160px 24px 24px; }
.lovely .photo::after { background: linear-gradient(180deg, rgba(255,194,216,.08), rgba(109,45,69,.18)); }

.minimal { --bg: #f5f5f2; --surface: #fff; --ink: #151515; --muted: #555853; --accent: #151515; --on-accent: #fff; --accent-text: #50564f; --line: #c9cbc5; }
.minimal .hero { border-top: 1px solid var(--line); }
.minimal h1 { max-width: 980px; font-weight: 550; letter-spacing: -.07em; }
.minimal .copy { padding-bottom: 28px; }
.minimal .photo { min-height: 58dvh; margin-inline: max(16px, calc((100vw - 1180px) / 2)); }
.minimal .photo::after { background: rgba(226,224,215,.08); }

.hip { --bg: #121212; --surface: #1e1e1e; --ink: #f4f2e9; --muted: #c2bfb5; --accent: #d7ff38; --on-accent: #111; --accent-text: #d7ff38; --line: #444; }
.hip .top { width: min(100% - 24px, 1240px); }
.hip h1 { text-transform: uppercase; font-weight: 950; letter-spacing: -.075em; }
.hip .copy { position: relative; z-index: 2; padding-bottom: 22px; }
.hip .copy::before { position: absolute; top: 24px; right: 20px; width: 90px; height: 90px; border: 2px solid var(--accent); border-radius: 50%; content: ""; }
.hip .photo { min-height: 62dvh; clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 94%); }
.hip .photo img { filter: contrast(1.18) saturate(.75); }
.hip .photo::after { background: linear-gradient(120deg, rgba(215,255,56,.15), transparent 55%); }

@media (min-width: 768px) {
  .hero { grid-template-columns: 1fr .9fr; align-items: stretch; }
  .copy { padding-right: 6vw; }
  .photo, .lovely .photo, .minimal .photo, .hip .photo { min-height: calc(100dvh - 98px); margin: 0; border-radius: 0; }
  .minimal .hero { grid-template-columns: 1.15fr .85fr; padding: 24px; gap: 24px; }
  .minimal .copy { padding-left: max(24px, calc((100vw - 1180px) / 2)); }
  .tokens { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}