:root {
  --paper: #b7aa94;
  --panel: #1f2024;
  --text: #fff;
  --yellow: #fee500;
  --purple: #8664ce;
  --sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}
* {box-sizing:border-box;margin:0;padding:0}
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {background:#262625;color:var(--text);font-family:var(--sans);line-height:1.55;padding-bottom:env(safe-area-inset-bottom,0)}
img {display:block;max-width:100%;height:auto}
.page {max-width:480px;margin:0 auto;background:var(--paper);min-height:100vh;overflow:hidden}
.hero {position:relative;overflow:visible;background:#091e3c}
.hero__img {display:block;width:100%;height:auto;object-fit:contain;object-position:center center}
.hero__logo {position:absolute;left:50%;bottom:-43px;transform:translateX(-50%);width:86px;height:86px;object-fit:cover;object-position:center;border:0;border-radius:50%;padding:0;background:#eaeaea;box-shadow:0 4px 14px rgba(0,0,0,.22);z-index:3}
/* Reference 2: charcoal card, white outline, rounded bottom shadow, purple ticks */
.intro {padding:58px 22px 32px;background:linear-gradient(180deg,#292623 0%,#544b3e 100%)}
.intro__card {background:var(--panel);border:2px solid #fff;border-radius:34px;box-shadow:0 9px 0 rgba(0,0,0,.91);padding:34px 24px 36px;color:#fff}
.intro h1 {text-align:center;font-size:1.1rem;line-height:1.5;font-weight:800;letter-spacing:-.03em;margin-bottom:16px}
.intro__lead {font-size:1.01rem;line-height:1.65;font-weight:730;letter-spacing:-.026em;word-break:keep-all;overflow-wrap:break-word}
.feature-list {list-style:none;margin:4px 0 0;padding:0}
.feature-list li {font-size:1.01rem;line-height:1.55;letter-spacing:-.025em;font-weight:740;word-break:keep-all;overflow-wrap:break-word;position:relative;padding-left:25px}
.feature-list li:before,.story__points li:before {content:'✔';position:absolute;left:0;top:0;color:var(--purple);font-weight:900;font-size:1.08em}
/* Keep the original Kakao image and destination intact. */
.btn {display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:62px;padding:12px 14px;background:var(--yellow);border-radius:999px;color:#181818;font-weight:800;letter-spacing:-.03em;font-size:.95rem;line-height:1.38;text-align:center;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.16);transition:background .15s,transform .12s}
.btn img {width:34px;height:34px;object-fit:cover;flex:0 0 34px;border-radius:8px}
.btn span {min-width:0;white-space:pre-line;word-break:keep-all}
.btn:hover {background:#f3da00}
.btn:active {transform:scale(.98)}
.btn:focus-visible {outline:3px solid #fff;outline-offset:3px}
.intro__btn {margin-top:30px}
.photo {margin:0;padding:20px 22px 26px;background:#544b3e}
.photo img {width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:10px}
/* Reference 3: full lower editorial card + sand-coloured closing copy. */
.story {background:linear-gradient(180deg,#ada493 0%,#bdae91 100%);padding:22px 22px 0}
.story__card {background:var(--panel);border:2px solid #fff;border-radius:34px;box-shadow:0 9px 0 #151515;padding:33px 23px 35px;color:#fff;line-height:1.56;font-size:1rem;letter-spacing:-.024em;font-weight:740;word-break:keep-all;overflow-wrap:break-word}
.story__card p + p,.story__card ul + p {margin-top:18px}
.story__points {list-style:none;padding:0;margin:18px 0 0}
.story__points li {position:relative;padding-left:25px;margin-bottom:14px;line-height:1.55}
.story__points li:last-child {margin-bottom:0}
.story__offer {letter-spacing:-.035em}
.story__highlight {font-weight:800}
.story__earnings {font-weight:850}
.story__closing {padding:39px 0 16px;text-align:center;color:#fff;font-size:.95rem;font-weight:750;line-height:1.55;letter-spacing:-.03em;word-break:keep-all}
.story__closing p {margin-bottom:11px}
.story__closing-title {font-size:1.15rem;font-weight:850}
.story__closing-final {font-size:1.02rem;font-weight:820}
.notice {display:block;margin-top:15px;font-size:.75rem;font-weight:500;line-height:1.5;color:#292724}
.foot {background:#bdae91;padding:12px 22px 36px}
@media (max-width:390px){
 .intro {padding:56px 16px 29px}
 .intro__card {padding:31px 19px 32px;border-radius:30px}
 .intro h1 {font-size:1.03rem}
 .intro__lead,.feature-list li {font-size:.945rem}
 .btn {font-size:.86rem;padding-inline:10px;gap:8px}
 .btn img {width:30px;height:30px;flex-basis:30px}
 .photo {padding:18px 16px 25px}
 .story {padding-inline:16px}
 .story__card {padding:29px 19px 32px;font-size:.94rem;border-radius:30px}
 .story__closing-title {font-size:1.07rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* Image/text position swap: image now follows the editorial text card,
   before the closing invitation. Match the story background to avoid strips. */
.story > .photo { margin: 0; padding: 36px 0 0; background: transparent; }
.story > .photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 10px; }
.story > .photo + .story__closing { padding-top: 38px; }
@media(max-width:390px) { .story > .photo { padding-top: 32px; } }

/* === Accessible, lightweight Kakao invitation popup === */
body.offer-popup-open {overflow:hidden}
.offer-popup[hidden] {display:none !important}
.offer-popup {position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));isolation:isolate}
.offer-popup__backdrop {position:absolute;inset:0;background:rgba(7,7,15,.76);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.offer-popup__dialog {position:relative;z-index:1;width:min(100%,430px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;border-radius:22px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(152deg,#24203d 0%,#171726 65%,#17171a 100%);padding:31px 25px 18px;color:#fff;box-shadow:0 18px 65px rgba(0,0,0,.55);text-align:center;word-break:keep-all;scrollbar-width:thin}
.offer-popup__dialog:focus {outline:none}
.offer-popup__x {position:absolute;right:12px;top:10px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.09);color:#fff;font:400 29px/1 var(--sans);cursor:pointer;display:grid;place-items:center}
.offer-popup__x:hover,.offer-popup__x:focus-visible {background:rgba(255,255,255,.2)}
.offer-popup__eyebrow {display:inline-flex;margin:0 auto 15px;padding:6px 13px;border:1px solid rgba(254,229,0,.52);border-radius:40px;color:#fee500;background:rgba(254,229,0,.09);font-size:.8rem;font-weight:800;letter-spacing:.005em}
.offer-popup h2 {font-size:clamp(1.42rem,5.8vw,1.82rem);line-height:1.36;letter-spacing:-.06em;font-weight:900;margin:0 0 15px}
.offer-popup h2 em {color:#fee500;font-style:normal}
.offer-popup__desc {font-size:.94rem;line-height:1.65;color:#eeeef4;letter-spacing:-.025em;margin:0 0 16px}
.offer-popup__benefits {list-style:none;text-align:left;margin:0 auto 23px;padding:13px 15px;border-radius:13px;background:rgba(255,255,255,.075)}
.offer-popup__benefits li {position:relative;padding-left:23px;font-size:.93rem;font-weight:720;line-height:1.65;letter-spacing:-.028em}
.offer-popup__benefits li + li {margin-top:5px}
.offer-popup__benefits li::before {content:'✓';position:absolute;top:0;left:0;color:#fee500;font-weight:950}
.offer-popup__cta {min-height:66px;padding:10px 12px;line-height:1.4;font-size:.98rem;box-shadow:0 5px 18px rgba(254,229,0,.18)}
.offer-popup__later {background:none;border:0;color:#e1dfe8;text-decoration:underline;text-underline-offset:4px;cursor:pointer;font:600 .88rem/1.6 var(--sans);padding:13px 10px 6px}
.offer-popup__disclaimer {margin:8px 0 0;font-size:.68rem;line-height:1.4;color:#aaa9b4}
.offer-popup__later:focus-visible,.offer-popup__x:focus-visible {outline:2px solid #fee500;outline-offset:2px}
@media(max-width:390px) {
 .offer-popup {padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
 .offer-popup__dialog {padding:27px 20px 14px;border-radius:19px;max-height:calc(100dvh - 24px)}
 .offer-popup__desc {font-size:.89rem}
 .offer-popup__benefits {margin-bottom:17px}
 .offer-popup__benefits li {font-size:.89rem}
}
@media(max-height:640px) {
 .offer-popup__dialog {padding-top:19px}
 .offer-popup__eyebrow {margin-bottom:9px}
 .offer-popup h2 {margin-bottom:9px}
 .offer-popup__desc {margin-bottom:10px}
 .offer-popup__benefits {margin-bottom:13px;padding-top:8px;padding-bottom:8px}
}