/* Layout: 크라프트지 포스터. 상단에 뚱한 고양이 '모아'와 한마디, 그 아래 쿠폰은 흰 종이 + 페리윙클 스텁. 크레파스 질감은 고양이와 할인 얼룩에만. */
:root{
  --desk:#E4E1DA;
  --bg:#FDFCF8;
  --paper:#FFFFFF;
  --coil:#8A8F9C;
  --hole:#CFCAC0;
  --scarf:#F28C8C;
  --pink:#F6A9B0;
  --ink:#1D1C22;
  --muted:#6D6658;
  --line:#D8CDB8;
  --peri:#6F7DE3;
  --peri-d:#5664C8;
  --peri-ink:#FFFFFF;
  --coral:#F27C6B;
  --white:#FBF8F1;
  --warn:#B8432E;
  --ok:#3F7A55;
  --font-display:"Do Hyeon","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-body:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --desk:#16161A;--bg:#26252A;--paper:#2E2D33;--coil:#9AA0AE;--hole:#121216;--scarf:#E57D80;--pink:#E0919A;--ink:#F2EDE3;--muted:#ADA493;--line:#3E3930;--peri:#8E9AF0;--peri-d:#7280E0;--peri-ink:#15161F;--coral:#F58C7C;--white:#F4EFE4;--warn:#F2937A;--ok:#7FC79A;color-scheme:dark}}
:root[data-theme="dark"]{
  --desk:#16161A;--bg:#26252A;--paper:#2E2D33;--coil:#9AA0AE;--hole:#121216;--scarf:#E57D80;--pink:#E0919A;--ink:#F2EDE3;--muted:#ADA493;--line:#3E3930;--peri:#8E9AF0;--peri-d:#7280E0;--peri-ink:#15161F;--coral:#F58C7C;--white:#F4EFE4;--warn:#F2937A;--ok:#7FC79A;color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--desk);color:var(--ink);font-family:var(--font-body);font-size:15.5px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.book{position:relative;max-width:940px;margin:40px auto 48px;background:var(--bg);border-radius:4px 4px 10px 10px;
  box-shadow:0 1px 0 var(--hole),0 18px 40px rgba(40,36,30,.14),0 3px 0 -1px var(--bg),0 4px 0 -1px var(--hole),0 7px 0 -2px var(--bg),0 8px 0 -2px var(--hole);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .47 0 0 0 0 .4 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.spiral{position:absolute;left:24px;right:24px;top:-18px;height:40px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='40'%3E%3Ccircle cx='15' cy='28' r='4.5' fill='%23CFCAC0'/%3E%3Ccircle cx='15' cy='28' r='3' fill='%236B665D'/%3E%3Cpath d='M15 28C7 22 6 6 14 3C22 1 24 14 18 24' fill='none' stroke='%238A8F9C' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M13 6c3-2 6-1 7 2' fill='none' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") repeat-x center top/30px 40px}
.wrap{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:44px max(20px,4vw) 48px;display:flex;flex-direction:column;gap:22px}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-family:var(--font-display);font-weight:400;font-size:28px;margin:0;letter-spacing:2px;display:flex;align-items:center;gap:8px}
.logo{position:relative;isolation:isolate}
.logo::before,.logo::after{content:"";position:absolute;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%236F7DE3'%3E%3Cpath d='M32 30c9 0 17 9 17 16 0 6-5 8-9 8-3 0-5-2-8-2s-5 2-8 2c-4 0-9-2-9-8 0-7 8-16 17-16Z'/%3E%3Cellipse cx='13' cy='29' rx='6' ry='7.5' transform='rotate(-25 13 29)'/%3E%3Cellipse cx='24' cy='16' rx='6' ry='8' transform='rotate(-8 24 16)'/%3E%3Cellipse cx='40' cy='16' rx='6' ry='8' transform='rotate(8 40 16)'/%3E%3Cellipse cx='51' cy='29' rx='6' ry='7.5' transform='rotate(25 51 29)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
.logo::before{width:74px;height:74px;left:-18px;top:-20px;opacity:.16;rotate:-18deg}
.logo::after{width:40px;height:40px;left:calc(100% + 2px);top:-14px;opacity:.14;rotate:22deg}
.logo i{font-style:normal;background:var(--peri);color:var(--peri-ink);padding:0 8px;border-radius:6px}
.top small{color:var(--muted);font-size:13px}

.hero{display:grid;grid-template-columns:1fr 300px;align-items:center;gap:8px 28px}
.hero-text{display:flex;flex-direction:column;gap:14px;min-width:0}
.say{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,7vw,60px);line-height:1.1;margin:0;text-wrap:balance}
.say em{font-style:normal;color:var(--peri)}
.lede{margin:0;color:var(--muted);max-width:40ch}
.cat{width:100%;max-width:300px;height:auto;justify-self:center}
.c-ink{fill:#1B1B1F}.c-white{fill:var(--white)}.c-peri{fill:var(--peri)}.c-peri-d{fill:var(--peri-d)}.c-coral{fill:var(--coral)}.c-paper{fill:#FFFFFF}
.c-scarf{fill:var(--peri)}.c-pink{fill:var(--pink)}.c-lens{fill:#20233A;stroke:#FF4FA3;stroke-width:5}.c-frame{fill:none;stroke:#FF4FA3;stroke-width:5;stroke-linecap:round}
.spark{fill:#FFD43B;stroke:#FFFFFF;stroke-width:4.5;stroke-linejoin:round;paint-order:stroke fill;transform-box:fill-box;transform-origin:center}
.sparkles{filter:drop-shadow(0 2px 2px rgba(60,50,20,.25))}
.spark.s1{fill:url(#shine)}
@media (prefers-reduced-motion:no-preference){.spark{animation:twinkle 2.4s ease-in-out infinite}.spark.s2{animation-delay:.8s}.spark.s3{animation-delay:1.5s}
@keyframes twinkle{50%{scale:.78;opacity:.85}}}
.c-ink-line{fill:none;stroke:#1B1B1F;stroke-width:4;stroke-linecap:round}.c-ink-line.thin{stroke-width:2.4}
.c-peri-line{fill:none;stroke:var(--peri);stroke-width:2}
.c-ticket{font-family:var(--font-display);font-size:17px;fill:var(--peri)}.c-ticket.sm{font-size:9px}
.bubble{position:relative;justify-self:start;background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:6px 12px;font-family:var(--font-display);font-size:16px}
.sample{font-size:13px;color:var(--warn);border:1px dashed var(--warn);border-radius:6px;padding:6px 10px;align-self:flex-start;background:var(--paper)}

.controls{display:flex;flex-direction:column;gap:12px}
.search{display:flex;align-items:center;gap:8px;background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:0 14px;box-shadow:4px 4px 0 var(--ink)}
.search:focus-within{box-shadow:4px 4px 0 var(--peri)}
.search svg{flex:none;color:var(--muted)}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;padding:12px 0;outline:none}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:inherit;font-size:14px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:4px 14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--peri);color:var(--peri-ink);border-color:var(--ink)}
.chip:focus-visible,.btn:focus-visible,.search input:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.meta select{font:inherit;font-size:13px;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:6px;padding:4px 8px}

.list{display:flex;flex-direction:column;gap:16px;list-style:none;margin:0;padding:0}
.coupon{position:relative;display:grid;grid-template-columns:1fr 220px;background:var(--paper);border:2px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);overflow:hidden}
.main{padding:16px 18px;display:flex;gap:16px;align-items:flex-start;min-width:0}
.amount{flex:none;width:82px;height:76px;background:var(--peri);color:var(--peri-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-display);line-height:1;text-align:center;
  border-radius:46% 54% 42% 58% / 55% 45% 55% 45%;filter:url(#rough-sm)}
.amount b{font-size:25px;font-weight:400}
.amount small{font-family:var(--font-body);font-size:11px;font-weight:700;margin-top:4px}
.body{min-width:0;display:flex;flex-direction:column;gap:3px}
.store{font-size:13px;font-weight:700;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.store .tagc{font-weight:400;border:1.5px solid var(--line);border-radius:999px;padding:0 8px;font-size:12px;width:auto;max-width:none}
.title{font-family:var(--font-display);font-weight:400;font-size:21px;margin:0;text-wrap:balance}
.desc{margin:0;color:var(--muted);font-size:14px}
.facts{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.soon{color:var(--coral);font-weight:700}
.verified{color:var(--ok)}
.stub{border-left:2px dashed var(--ink);padding:16px;display:flex;flex-direction:column;justify-content:center;gap:8px;background:color-mix(in srgb,var(--peri) 14%,var(--paper))}
.codebox{font-family:var(--font-mono);font-weight:600;font-size:16px;letter-spacing:1px;text-align:center;border:1.5px dashed var(--ink);border-radius:8px;padding:8px 6px;overflow-wrap:anywhere;background:var(--paper)}
.codebox.masked{color:var(--muted)}
.btn{display:block;text-align:center;text-decoration:none;font-family:var(--font-display);font-weight:400;font-size:17px;border:2px solid var(--ink);border-radius:10px;padding:8px 10px;cursor:pointer;background:var(--ink);color:var(--paper)}
.btn:hover{background:var(--peri);color:var(--peri-ink)}
.hint{font-size:12px;color:var(--muted);text-align:center;min-height:1.2em}
.empty{text-align:center;color:var(--muted);padding:40px 0}
footer{border-top:2px solid var(--ink);padding-top:16px;color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:6px}
footer p{margin:0;max-width:65ch}

@media (max-width:700px){
  .book{margin-top:28px}
  .wrap{padding-inline:14px}
  .hero{grid-template-columns:1fr}
  .cat{max-width:220px;order:-1}
  .coupon{grid-template-columns:1fr}
  .stub{border-left:0;border-top:2px dashed var(--ink);flex-direction:row;align-items:center;flex-wrap:wrap}
  .stub .codebox,.stub .btn{flex:1 1 140px}
  .stub .hint{flex-basis:100%}
  .amount{width:68px;height:64px}.amount b{font-size:21px}
}
@media (prefers-reduced-motion:no-preference){
  .cat{animation:loaf 5s ease-in-out infinite}
  @keyframes loaf{50%{transform:translateY(3px) scaleY(.985)}}
  .btn{transition:background .15s,color .15s}
}

/* ---- 여러 페이지용 추가 스타일 ---- */
a{color:inherit}
.logo-link{text-decoration:none;color:var(--ink)}
.top{flex-wrap:wrap}
.catnav{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:14px}
.catnav a{text-decoration:none;color:var(--muted);border-bottom:2px solid transparent;padding-bottom:1px}
.catnav a:hover{color:var(--ink);border-color:var(--peri)}
h1.say{margin:0}
.title{font-size:20px}
.sname{text-decoration:none;color:var(--muted)}
a.sname:hover{color:var(--peri)}
.conds{margin:4px 0 0;padding-left:18px;color:var(--muted);font-size:13.5px;display:flex;flex-direction:column;gap:1px}
.due{font-weight:700}
.due.soon{color:var(--coral)}
.coupon[data-ended]{opacity:.5}
.coupon[data-ended] .btn{pointer-events:none;background:var(--muted);border-color:var(--muted)}
.crumbs{font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.storehead{display:flex;flex-direction:column;gap:10px}
.storehead h1{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,6vw,46px);line-height:1.15;margin:0;text-wrap:balance}
.storehead h1 em{font-style:normal;color:var(--peri)}
.landing{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.landing .btn{display:inline-block;padding:10px 18px}
.landing p{margin:0;font-size:13.5px;color:var(--muted)}
.prose{max-width:68ch;display:flex;flex-direction:column;gap:10px}
.prose h2{font-family:var(--font-display);font-weight:400;font-size:22px;margin:14px 0 0}
.prose p,.prose ol{margin:0}
.prose ol{padding-left:20px;display:flex;flex-direction:column;gap:4px}
.prose details{border:2px solid var(--ink);border-radius:10px;padding:10px 14px;background:var(--paper)}
.prose summary{cursor:pointer;font-weight:700}
.prose details p{margin-top:6px;color:var(--muted)}
.storeidx h2{font-family:var(--font-display);font-weight:400;font-size:22px;margin:0 0 10px}
.storeidx ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.storeidx a{display:inline-flex;gap:6px;align-items:center;text-decoration:none;border:2px solid var(--ink);border-radius:999px;padding:4px 14px;background:var(--paper);font-size:14px}
.storeidx a:hover{background:var(--peri);color:var(--peri-ink)}
.storeidx a span{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.storeidx a:hover span{color:inherit}

body{word-break:keep-all;overflow-wrap:anywhere}
.codebox{word-break:break-all}
.tips{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}