/* Brand-first deal feed (like a deals community): each post = brand + discount + where + until.
   Brands tab = Korean brands foreigners buy most, each with stores and current deals.
   Stores tab = department stores and flagship shops, with the brands inside and store-run offers. */
:root{
  --bg:#FFFFFF; --ink:#111111; --sub:#6B6B6B; --faint:#A0A0A0; --line:#E9E9E9; --soft:#F4F4F3;
  --sale:#E1251B; --sale-soft:#FDECEA; --on-ink:#FFFFFF; --warn:#9A6400; --warn-soft:#FBF1DC;
  --f:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Malgun Gothic","Noto Sans KR","Noto Sans SC",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121212; --ink:#F2F2F2; --sub:#A3A3A3; --faint:#6E6E6E; --line:#262626; --soft:#1C1C1C;
  --sale:#FF5A4E; --sale-soft:#3A1714; --on-ink:#121212; --warn:#E8B54F; --warn-soft:#33270F; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#121212; --ink:#F2F2F2; --sub:#A3A3A3; --faint:#6E6E6E; --line:#262626; --soft:#1C1C1C;
  --sale:#FF5A4E; --sale-soft:#3A1714; --on-ink:#121212; --warn:#E8B54F; --warn-soft:#33270F; color-scheme:dark;}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
input{font:inherit;color:inherit}
a{color:inherit}
a.body,a.btile,a.look,a.line,a.more,a.guide-link,nav a,.tags a,.lofr a,.fl a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{max-width:520px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;justify-content:space-between;height:50px}
.logo{font-weight:900;font-size:19px;letter-spacing:-.03em}
.logo i{font-style:normal;color:var(--sale)}
.logo small{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--faint);margin-left:6px;vertical-align:3px}
.lang{display:flex;gap:2px;font-size:13px;font-weight:700}
.lang a{padding:6px;text-decoration:none}
.lang a[aria-current="false"]{color:var(--faint)}

main{padding-block:14px calc(72px + env(safe-area-inset-bottom,0px))}
.blk{margin-top:24px}
.sh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
h2{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0}
.more{font-size:13px;color:var(--sub)}
.hint{font-size:12px;color:var(--faint);margin:-4px 0 10px}

.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:0 12px}
.search input{border:0;background:none;outline:0;flex:1;min-width:0;padding:11px 0;font-size:15px}
.search svg.i{width:18px;height:18px;color:var(--faint)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-top:12px}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;border:1px solid var(--line);border-radius:4px;padding:6px 10px;font-size:13px;font-weight:500;white-space:nowrap;color:var(--sub)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:700}

/* deal tiles */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);width:100%}
.tile>.body{display:flex;flex-direction:column;gap:5px;flex:1;padding:0 0 11px;width:100%}
.tile>.body>span:not(.ph){padding:0 12px}
.tile>.body>.brandline{padding-top:10px;padding-right:30px}
.brandline{font-size:15px;font-weight:900;letter-spacing:-.02em;line-height:1.2;padding-right:24px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fig{font-size:26px;font-weight:900;color:var(--sale);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;margin-top:4px}
.fig.word{font-size:19px;letter-spacing:-.02em}
.fnote{font-size:11px;color:var(--sub);font-weight:600}
.ttl{font-size:12px;line-height:1.35;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.where{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foot{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:auto;padding-top:4px;font-size:11px;color:var(--faint)}
.dday{font-weight:800;color:var(--ink);white-space:nowrap}
.foot .ck{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
a.logo{text-decoration:none;color:inherit}
.dday.hot{color:var(--sale)}
.bd{display:inline-block;font-size:10px;font-weight:800;padding:2px 5px;letter-spacing:.01em}
.bd.fx{background:var(--ink);color:var(--on-ink)}
.bd.chk{background:var(--warn-soft);color:var(--warn)}
.heart{position:absolute;top:6px;right:6px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--faint);z-index:1}
.heart svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.heart[aria-pressed="true"]{color:var(--sale)}
.heart[aria-pressed="true"] svg{fill:currentColor}
.empty{grid-column:1/-1;padding:22px 12px;color:var(--faint);font-size:13px;text-align:center;border:1px dashed var(--line)}

/* brand tiles */
.btile{display:flex;flex-direction:column;gap:3px;min-width:0;border-top:2px solid var(--ink);padding:0 0 4px;width:100%}
.btile .ph,.tile .ph{display:block;position:relative;aspect-ratio:1/1;background:var(--soft);overflow:hidden;margin-bottom:6px}
.tile .ph{aspect-ratio:3/2;margin:0}
.btile .ph img,.tile .ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.col{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ph.none{display:flex;align-items:flex-end;padding:10px;font-size:18px;font-weight:900;letter-spacing:-.02em;color:var(--sub);line-height:1.1}
.btile .ph img.lg{position:absolute;left:6px;top:6px;width:auto;height:22px;max-width:60%;object-fit:contain;background:rgba(255,255,255,.92);padding:3px 5px}
.btile .ph.none img.lg{position:static;height:28px;background:none;padding:0}
.blogo{display:block;height:32px;width:auto;max-width:180px;object-fit:contain;margin:8px 0 2px}
.ph .by{position:absolute;right:4px;bottom:4px;font-size:9px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);padding:1px 4px}
.pick{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center;margin:12px 0 4px;text-decoration:none;color:inherit;border:1px solid var(--line);padding:8px}
.pick img{width:110px;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--soft)}
.pick small{display:block;color:var(--faint);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pick b{display:block;font-size:14px;margin-top:2px}
.pick .pr{font-size:14px;font-weight:900;margin-top:4px}
.pick .pr s{color:var(--faint);font-weight:500;margin-left:4px}
.btile b{font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btile .ko{font-size:12px;color:var(--faint)}
.btile .meta{font-size:12px;color:var(--sub)}
.btile .on{font-size:11px;font-weight:800;color:var(--sale)}

/* pop-up tiles */
.pop{position:relative;display:flex;flex-direction:column;min-width:0;border-top:2px solid var(--ink);width:100%}
.pop>.body{display:flex;flex-direction:column;gap:4px;padding-top:8px;width:100%}
.pop .cat{font-size:11px;font-weight:700;color:var(--sub)}
.pop b{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:26px}
.pop .meta{font-size:12px;color:var(--faint)}
.pop .gift{font-size:11px;font-weight:800;color:var(--sale)}
.pop .heart{top:2px;right:-6px}

/* rows */
.line{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding-block:13px;border-bottom:1px solid var(--line)}
.line>div{min-width:0}
.line b{display:block;font-size:15px;font-weight:700}
.line small{display:block;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.line .r{font-size:12px;color:var(--sub);white-space:nowrap}
.line .r em{font-style:normal;color:var(--sale);font-weight:700;margin-right:6px}
.group{font-size:12px;font-weight:800;color:var(--faint);letter-spacing:.04em;margin:18px 0 0}

.g h3{font-size:16px;font-weight:800;margin:0 0 8px}
.g ul{margin:0;padding-left:16px}
.g li+li{margin-top:6px}
.kv div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding-block:9px;border-bottom:1px solid var(--line)}
.kv b{font-weight:700}
.guide-link{display:flex;justify-content:space-between;width:100%;margin-top:24px;padding:14px;background:var(--soft);font-weight:700}

nav.bottom{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--bg);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
nav.bottom .wrap{display:grid;grid-template-columns:repeat(6,1fr)}
nav.bottom a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 6px;font-size:10px;font-weight:600;color:var(--faint);text-align:center}
nav.bottom a[aria-current="page"]{color:var(--ink)}

/* detail page */
.sheet{position:fixed;inset:0;z-index:20;background:var(--bg);overflow-y:auto}
.sheet .wrap{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
.shead{position:sticky;top:0;z-index:2;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:6px;height:50px;border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px);box-sizing:content-box}
.shead>div{display:flex;align-items:center;gap:6px;min-width:0}
.shead button.bk{padding:6px 8px 6px 0;font-size:22px;line-height:1}
.shead span{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shead .heart{position:static}
.shead .sr{display:flex;align-items:center;gap:4px;flex-shrink:0}
.lang.mini{font-size:12px}
.lang.mini a{padding:6px 4px}
.hero{padding-block:18px 14px}
.hero .fig{font-size:44px}
.hero .fig.word{font-size:30px}
.hero .fnote{font-size:13px}
.hero .kicker{font-size:13px;font-weight:700;color:var(--sub)}
.hero h1{font-size:23px;font-weight:900;letter-spacing:-.02em;margin:6px 0 4px;line-height:1.25}
.hero p{margin:10px 0 0;font-size:15px}
.dl{border-top:1px solid var(--line);margin:0}
.dl div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding-block:12px;border-bottom:1px solid var(--line);font-size:14px}
.dl dt{color:var(--sub)}
.dl dd{margin:0;min-width:0}
.dl .warn{color:var(--warn);font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags a,.tags button,.tags span{border:1px solid var(--line);border-radius:4px;padding:3px 8px;font-size:13px}
.staff{margin-top:18px;background:var(--ink);color:var(--on-ink);padding:16px}
.staff small{display:block;font-size:11px;font-weight:700;opacity:.7;letter-spacing:.04em}
.staff p{margin:8px 0 0;font-size:20px;font-weight:800;line-height:1.35;font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",var(--f)}
.staff button{margin-top:12px;border:1px solid currentColor;border-radius:4px;padding:5px 10px;font-size:12px;font-weight:700}
.copy{border:1px solid var(--line);border-radius:4px;padding:3px 8px;font-size:12px;font-weight:600;margin-left:6px}
.ko{font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",var(--f)}
.src{font-size:12px;color:var(--sub);margin-top:14px;line-height:1.6}
.src a{color:var(--sub)}
.why{background:var(--soft);padding:12px;font-size:14px;margin-top:4px}
/* celebrity looks */
.look{display:flex;flex-direction:column;gap:4px;min-width:0;width:100%;border:1px solid var(--line);padding:0 0 12px;position:relative;overflow:hidden}
.look>span:not(.ph){padding:0 12px}
.look .ph{display:block;position:relative;aspect-ratio:5/6;background:var(--soft);margin-bottom:6px}
.look .ph img{width:100%;height:100%;object-fit:cover;display:block}
.look .ph .strip{position:absolute;left:6px;right:6px;bottom:6px;display:flex;gap:4px}
.look .ph .strip img{width:30px;height:36px;border:1.5px solid #fff;object-fit:cover;background:#fff}
.look .ph .more{font-size:11px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);padding:0 5px;display:flex;align-items:center}
.cover{width:100%;max-width:420px;max-height:52vh;aspect-ratio:5/6;object-fit:cover;display:block;margin:0 0 12px;background:var(--soft)}
.item{display:grid;grid-template-columns:96px 1fr;gap:12px}
.item .th{width:96px;aspect-ratio:5/6;object-fit:cover;background:var(--soft);display:block}
.item .bd-wrap{min-width:0}
.imgnote{font-size:11px;color:var(--faint);margin-top:8px}
.look .star{font-size:16px;font-weight:900;letter-spacing:-.02em;line-height:1.2}
.look .scene{font-size:12px;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.look .cnt{font-size:12px;font-weight:700;margin-top:auto;padding-top:6px}
.look .hk{font-size:11px;font-weight:800;color:var(--sale)}
.bd.tier{border:1px solid var(--ink);padding:1px 5px}
.item{border-bottom:1px solid var(--line);padding:14px 0}
.item .nm{font-size:15px;font-weight:800}
.item .pr{font-size:15px;font-weight:900;margin-top:2px}
.item .nt{font-size:13px;color:var(--sub);margin-top:4px}
.btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.btns a{display:inline-block;background:var(--ink);color:var(--on-ink);text-decoration:none;font-size:13px;font-weight:700;padding:7px 12px;border-radius:4px}
.btns a.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.bd.same{background:var(--sale);color:#fff}

/* sync box */
.sync{border:1px solid var(--line);padding:14px;margin:4px 0 18px;display:flex;flex-direction:column;gap:6px}
.sync.on{border-color:var(--ink)}
.sync b{font-size:15px}
.sync>span{font-size:13px;color:var(--sub)}
.sync small{font-size:12px;color:var(--faint);margin-top:6px}
.sync small.bad{color:var(--sale)}
.sync .row{display:flex;gap:8px;margin-top:4px}
.sync input{flex:1;min-width:0;border:1px solid var(--line);border-radius:4px;padding:8px 10px;font-size:15px;letter-spacing:.12em;text-transform:uppercase;background:none}
.sync .btn{background:var(--ink);color:var(--on-ink);border-radius:4px;padding:8px 14px;font-size:13px;font-weight:700;white-space:nowrap}
.sync .btn.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.sync .btn[disabled]{opacity:.5}
.sync .code{display:flex;align-items:center;gap:6px;margin-top:4px}
.sync .code span{font-size:22px;font-weight:900;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.sync .code.sm span{font-size:12px;font-weight:500;letter-spacing:0;color:var(--sub);word-break:break-all}
.sync .lnk{font-size:12px;color:var(--sub);text-decoration:underline;margin-top:6px;align-self:flex-start}
@media (min-width:960px){.sync{max-width:620px}}
/* ---------- desktop / web ---------- */
nav.top{display:none}
.dhero{display:none}
footer.site{display:none}
.two{display:block}
@media (hover:hover){.tile:hover,.look:hover{border-color:var(--ink)}.btile:hover b,.pop:hover b{text-decoration:underline}.line:hover b{text-decoration:underline}}
@media (min-width:640px) and (max-width:959px){
  .wrap{max-width:900px;padding-left:24px;padding-right:24px}
  .grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .grid:has(> .btile){grid-template-columns:repeat(4,1fr)}
  .grid:has(> .look){grid-template-columns:repeat(3,1fr)}
  .sheet .grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:960px){
  body{font-size:15px}
  .wrap{max-width:1240px;padding-left:32px;padding-right:32px}
  .hrow{height:64px;gap:28px}
  .logo{font-size:22px}
  nav.top{display:flex;gap:4px;flex:1}
  nav.top a{padding:8px 12px;font-size:14px;font-weight:600;color:var(--sub);border-radius:4px}
  nav.top a:hover{color:var(--ink);background:var(--soft)}
  nav.top a[aria-current="page"]{color:var(--ink);font-weight:800;box-shadow:inset 0 -2px 0 var(--ink);border-radius:0}
  nav.top em{font-style:normal;color:var(--sale);font-weight:800}
  nav.bottom{display:none}
  main{padding-block:28px 56px}
  .dhero{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;padding:8px 0 24px;border-bottom:1px solid var(--line);margin-bottom:22px}
  .dhero h1{font-size:34px;font-weight:900;letter-spacing:-.03em;margin:0;line-height:1.15}
  .dhero p{margin:10px 0 0;color:var(--sub);max-width:620px;font-size:15px}
  .stats{display:flex;gap:28px;margin:0}
  .stats div{min-width:84px}
  .stats dt{font-size:30px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
  .stats dd{margin:0;font-size:12px;color:var(--sub);font-weight:600}
  .bar{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:center}
  .bar .chips{margin-top:0}
  .blk{margin-top:36px}
  h2{font-size:22px}
  .grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .grid:has(> .btile){grid-template-columns:repeat(6,1fr);gap:20px 16px}
  .grid:has(> .look){grid-template-columns:repeat(6,1fr)}
  .grid:has(> .pop){grid-template-columns:repeat(2,1fr);gap:16px 24px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
  .two.st{grid-template-columns:1fr 1fr}
  .two.st .flag{margin-top:0}
  .two.st .dept .sh{margin-bottom:0}
  .fig{font-size:30px}
  .chip{padding:7px 12px;font-size:14px}
  .chip:hover{border-color:var(--ink);color:var(--ink)}
  .search input{padding:10px 0}
  .guide-link{max-width:520px}
  footer.site{display:block;border-top:1px solid var(--line);margin-top:24px}
  footer.site .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-block:28px 40px;font-size:13px;color:var(--sub)}
  footer.site p{margin:6px 0 0}
  footer.site .logo{font-size:18px;color:var(--ink)}
  /* detail page becomes a right-hand drawer */
  .sheet{background:rgba(0,0,0,.42)}
  .sheet>.wrap{max-width:760px;margin:0 0 0 auto;min-height:100%;background:var(--bg);padding-left:36px;padding-right:36px;box-shadow:-8px 0 30px rgba(0,0,0,.12)}
  .sheet .grid{grid-template-columns:repeat(3,1fr)}
  .sheet .grid:has(> .look){grid-template-columns:repeat(3,1fr)}
  .sheet .grid:has(> .pop){grid-template-columns:repeat(2,1fr)}
  .shead{height:60px}
  .hero h1{font-size:30px}
  .cover{max-height:none;max-width:360px;float:left;margin:18px 28px 12px 0}
  .sheet section,.sheet .src,.sheet .hint{clear:both}
  .item{grid-template-columns:120px 1fr;gap:18px}
  .item .th{width:120px}
}
@media (min-width:1280px){
  .grid{grid-template-columns:repeat(5,1fr)}
  .grid:has(> .btile){grid-template-columns:repeat(6,1fr)}
}
@media (min-width:960px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sheet{background:rgba(0,0,0,.6)}}

/* deal type badges: points and gifts must not read like a price cut */
.bds{display:flex;flex-wrap:wrap;gap:4px}
.bd.k-points{background:var(--warn-soft);color:var(--warn)}
.bd.k-gift{background:var(--sale-soft);color:var(--sale)}
.bd.k-sale{background:var(--soft);color:var(--sub)}
.fig.k-points{color:var(--ink)}
.hero .bds{margin-top:8px}
small.tz{font-size:12px;color:var(--faint);font-weight:500}
/* language offer (shown once, until the visitor picks or closes it) */
.lofr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:9px 12px;background:var(--soft);font-size:13px;font-weight:700}
.lofr button{font-size:18px;line-height:1;color:var(--faint);padding:0 4px}
footer.site .cn{font-size:14px;font-weight:800;color:var(--ink);margin-left:4px}
footer.site .fl a{text-decoration:underline}
/* text shown before the app starts (search engines, slow phones) */
.ssr h1{font-size:24px;margin:8px 0}
.ssr ul{padding-left:18px}
.ssr li{margin:4px 0}
.ssr .src{margin-top:16px}
/* WordPress */
body{margin:0}
.wp-site-blocks{padding:0}
main.page{padding-block:24px 56px;max-width:760px}
main.page h1{font-size:26px;font-weight:900;letter-spacing:-.02em}
main.page p,main.page li{font-size:15px;line-height:1.7}
/* ---------- v2 screens: home hero, coupon card, cards, areas, action-first detail ---------- */
.red{color:var(--sale)}
.tg{display:inline-block;font-size:10px;font-weight:800;padding:2px 5px;line-height:1.3}
.tg.fx{background:var(--ink);color:var(--on-ink)}
.tg.warn{background:var(--warn-soft);color:var(--warn)}
.tg.grey{background:var(--soft);color:var(--sub)}
/* home hero */
.h2{padding-top:4px}
.h2t h1{font-size:24px;line-height:1.25;font-weight:900;letter-spacing:-.02em;margin:0}
.h2t>p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--sub)}
.h2chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.h2chips span{font-size:12px;font-weight:700;padding:4px 8px;background:var(--soft)}
.qk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:14px;text-align:center}
.qk button,.qk a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;text-decoration:none;color:var(--ink);text-align:center}
.qk svg.i{width:26px;height:26px}
.qk b{font-size:12px}.qk small{font-size:11px;color:var(--faint)}
.h2c{margin-top:14px}
.bar{margin-top:12px}
/* coupon card */
.cpn{position:relative;background:#111;color:#fff}
.cpn .heart.inv{color:#bbb}.cpn .heart.inv[aria-pressed="true"]{color:#FF6B61}
.cpa{display:flex;flex-direction:column;gap:6px;padding:14px;text-decoration:none;color:#fff}
.cpk{font-size:12px;font-weight:800;color:#FFB4AE;padding-right:30px}
.cpt{font-size:18px;font-weight:900;letter-spacing:-.01em}
.cpr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:4px}
.cpr span{background:#fff;color:#111;padding:6px 4px;text-align:center;display:flex;flex-direction:column;min-width:0}
.cpr b{font-size:20px;font-weight:900;color:#E1251B;line-height:1.1}
.cpr i{font-style:normal;font-size:10px;color:#6B6B6B}
.cpr em{font-style:normal;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpf{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#d6d6d6;margin-top:4px;flex-wrap:wrap}
.cpf b{color:#fff}
.grid .cpn{grid-column:1/-1}
/* deal card v2 */
.t2{position:relative;border:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.t2a{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.t2ph{display:block;aspect-ratio:3/2;background:var(--soft);overflow:hidden}
.t2ph img{width:100%;height:100%;object-fit:cover;display:block}
.t2strip{display:block;border-top:4px solid var(--ink);padding:10px 10px 0;font-size:12px;font-weight:800;color:var(--sub);padding-right:34px}
.t2b{display:flex;flex-direction:column;gap:3px;padding:9px 10px 10px;flex:1}
.t2n{font-size:14px;font-weight:900;line-height:1.25;padding-right:22px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t2f{font-size:24px;font-weight:900;line-height:1.1;letter-spacing:-.02em}
.t2f.word{font-size:19px}
.t2s{font-size:11px;color:var(--faint);font-weight:700}
.t2c{font-size:12px;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t2tags{display:flex;gap:4px;flex-wrap:wrap}
.t2w{font-size:12px;color:var(--sub)}
.t2d{font-size:12px;font-weight:800;margin-top:auto;padding-top:2px}
.t2d.hot{color:var(--sale)}
.t2 .heart{top:4px;right:4px}
.t2:has(.t2ph) .heart{color:#fff;filter:drop-shadow(0 0 2px rgba(0,0,0,.5))}
.chips.sub{margin-top:6px}.chips.sub .chip{font-size:12px;padding:5px 9px}
.chips.cwrap{flex-wrap:wrap;overflow:visible}
.sh h2 .cnt{font-size:13px;color:var(--faint);font-weight:600}
/* soon */
.soon{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.soon::-webkit-scrollbar{display:none}
.sn{flex:0 0 160px;display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--line);text-decoration:none;color:inherit}
.sn b{font-size:13px;line-height:1.3}.sn span{font-size:17px;font-weight:900}.sn small{font-size:12px;font-weight:800}
/* looks scroller */
.hs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.hs::-webkit-scrollbar{display:none}
.hsi{flex:0 0 140px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:2px}
.hsi img{width:140px;height:168px;object-fit:cover;display:block;background:var(--soft)}
.hsi b{font-size:14px;margin-top:4px}.hsi small{font-size:12px;color:var(--sub)}
/* area grid */
.ag{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.agi{display:block;padding:12px;background:var(--soft);text-decoration:none;color:inherit}
.agi b{display:block;font-size:16px}.agi small{font-size:12px;color:var(--sub)}
.guide-link.v2{border:1px solid var(--ink);background:none;align-items:center}
.guide-link.v2 small{font-weight:500;color:var(--sub)}
/* areas tab */
.asum{margin-top:14px;padding:14px;background:var(--soft)}
.asum>b{font-size:22px;font-weight:900}
.asum>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.asum>div span{background:var(--bg);padding:8px 4px;text-align:center;font-size:12px;color:var(--sub);display:flex;flex-direction:column}
.asum>div b{font-size:20px;font-weight:900;color:var(--ink)}.asum>div b.red{color:var(--sale)}
.chip small{font-weight:500;opacity:.7}
.line .r em{font-style:normal;color:var(--sale);font-weight:700;margin-right:6px}
.line .r b{font-size:15px}
.nav-out{display:flex;justify-content:center;align-items:center;min-height:44px;margin-top:16px;border:1px solid var(--ink);text-decoration:none;color:var(--ink);font-size:14px;font-weight:800}
button.line{width:100%}
/* detail v2 */
.hero.d2 h1{margin-top:8px}
.hero.d2 .bds{display:flex;gap:4px;flex-wrap:wrap}
.fig2{font-size:40px;font-weight:900;letter-spacing:-.03em;line-height:1.05;margin-top:6px}
.dl2{font-size:13px;color:var(--sub)}.dl2 b{color:var(--ink)}
.rates{border-top:1px solid var(--line)}
.rrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.rrow img,.rrow>span:first-child{width:44px;height:44px;object-fit:cover;background:var(--soft);flex:0 0 44px}
.rn{flex:1;min-width:0;display:flex;flex-direction:column}.rn b{font-size:15px}.rn small{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv{text-align:right;display:flex;flex-direction:column}.rv b{font-size:18px}.rv small{font-size:11px;color:var(--faint)}
.sh .tg{align-self:center}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px}
.steps li{counter-increment:s;display:flex;gap:10px;font-size:14px;line-height:1.5}
.steps li::before{content:counter(s);flex:0 0 24px;height:24px;border-radius:12px;background:var(--ink);color:var(--on-ink);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.stf{margin-top:18px;background:#111;color:#fff;padding:16px}
.stf small{font-size:12px;font-weight:800;color:#bdbdbd;letter-spacing:.03em}
.stf p{margin:8px 0 0;font-size:24px;line-height:1.35;font-weight:800}
.stfb{display:flex;gap:8px;margin-top:12px}
.stfb button{flex:1;min-height:44px;background:#fff;color:#111;font-weight:800;font-size:14px;text-align:center}
.stfb button.ghost{background:none;color:#fff;border:1px solid #fff}
.stfn{display:block;font-size:11px;color:#bdbdbd;margin-top:8px}
.srow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.srl{text-decoration:none;color:inherit;min-width:0}.srl b{font-size:15px}.srl small{color:var(--sub);font-size:12px}.srl .ko{font-size:12px;color:var(--faint)}
.srm{font-size:12px;color:var(--sub);white-space:nowrap;text-decoration:none;min-height:44px;display:flex;align-items:center}
.notes{margin-top:16px;border:1px solid var(--line);padding:12px}
.notes summary{font-size:14px;font-weight:800;cursor:pointer}
.notes ul{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--sub)}
.dbar{position:sticky;bottom:0;margin:20px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line);display:flex;gap:10px;z-index:3}
.dbar .heart.sq{position:static;width:48px;height:48px;border:1px solid var(--line)}
.dbar .go{flex:1;min-height:48px;background:var(--sale);color:#fff;font-weight:900;font-size:15px;text-align:center}
#full{position:fixed;inset:0;z-index:50;background:#fff;color:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
#full[hidden]{display:none}
#full p{font-size:clamp(34px,9vw,72px);line-height:1.3;font-weight:900;margin:0;font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
#full small{margin-top:24px;color:#6b6b6b;font-size:13px}
/* touch targets */
.lang a{min-height:44px;display:inline-flex;align-items:center}
.heart{width:40px;height:40px}
@media (min-width:640px){.qk{max-width:520px}}
@media (min-width:960px){
  .h2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:stretch;padding-bottom:8px}
  .h2t h1{font-size:38px}.h2t>p{font-size:16px}
  .h2c{margin-top:0}.cpn.big .cpt{font-size:24px}.cpn.big .cpr b{font-size:26px}
  .qk{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
  .qk button,.qk a{border:1px solid var(--line);padding:12px 0}
  .bar{max-width:480px}
  .ag{grid-template-columns:repeat(6,minmax(0,1fr))}
  .two.ar{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  .dbar{margin:20px -36px 0;padding-left:36px;padding-right:36px}
  .grid:has(> .t2){grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1280px){.grid:has(> .t2){grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:640px) and (max-width:959px){.grid:has(> .t2){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- layout pass (v0.5): one spacing scale, touch sizes, PC balance ---------- */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px}
/* Korean lines break between words, not inside them */
.ko,.stf p,#full p,.staff p{word-break:keep-all;overflow-wrap:anywhere}
/* bottom bar: one column per tab */
nav.bottom .wrap{grid-template-columns:repeat(var(--tabs,5),1fr)}
nav.bottom a{min-height:52px;justify-content:center}
/* touch sizes on phones and tablets */
.chip{min-height:36px;display:inline-flex;align-items:center}
.chips.sub .chip{min-height:34px}
.tags a,.tags button,.tags span{min-height:34px;display:inline-flex;align-items:center;padding:4px 10px}
.shead button.bk{min-width:44px;min-height:44px;display:inline-flex;align-items:center;padding:0}
.copy{min-height:32px;padding:4px 10px}
a.more{min-height:32px;display:inline-flex;align-items:center}
.notes summary{padding-block:6px}
.tg{font-size:11px}
/* text-only deal card: a type block the size of a photo, so cards in a row line up */
.t2ty{display:flex;align-items:flex-end;padding:12px 40px 12px 12px;border-top:4px solid var(--ink);border-bottom:1px solid var(--line);background:var(--bg)}
.t2ty b{font-size:17px;font-weight:900;line-height:1.25;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.t2:has(.t2ty) .heart{color:var(--faint);filter:none}
/* section rhythm: heading → content 12px, section → section 32px (48px on PC) */
.blk{margin-top:var(--s6)}
.sh{margin-bottom:var(--s3)}
@media (max-width:959px){
  .h2c{margin-top:var(--s4)}
  .qk{margin-top:var(--s4)}
}
@media (min-width:640px) and (max-width:959px){
  .ag{grid-template-columns:repeat(3,minmax(0,1fr))}
  .h2c .cpn{max-width:none}
}
@media (min-width:960px){
  .blk{margin-top:var(--s7)}
  /* hero: coupon card as tall as the text column, search under both */
  .h2{align-items:stretch;padding-bottom:0}
  .h2c{display:flex}
  .h2c .cpn{flex:1;display:flex}
  .h2c .cpa{flex:1;justify-content:space-between;padding:20px}
  .bar{max-width:none;margin-top:var(--s5);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bar .search{max-width:none}
  /* ending soon: wider cards */
  .sn{flex-basis:240px}
  /* celebrity looks: a full-width row instead of a short scroller */
  .hs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;overflow:visible}
  .hsi{flex:none;min-width:0}
  .hsi img{width:100%;height:auto;aspect-ratio:5/6}
  /* areas: a little more room inside each box */
  .agi{padding:16px}
  /* drawer (detail pages on PC) is 760px: fewer, wider columns */
  .sheet .grid:has(> .btile){grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px}
  .sheet .grid:has(> .t2){grid-template-columns:repeat(3,minmax(0,1fr))}
  .sheet .grid:has(> .look){grid-template-columns:repeat(3,minmax(0,1fr))}
  .shead button.bk{min-width:36px}
  .chip,.chips.sub .chip{min-height:0}
  .tags a,.tags button,.tags span{min-height:0;padding:3px 8px}
  .two.ar{gap:48px}
}
@media (min-width:1280px){
  .sheet .grid:has(> .t2){grid-template-columns:repeat(3,minmax(0,1fr))}
  .sheet .grid:has(> .btile){grid-template-columns:repeat(4,minmax(0,1fr))}
}
.t2ty b{font-size:15px;overflow-wrap:anywhere}
@media (min-width:640px){.t2ty b{font-size:17px}}
button.agi{width:100%;text-align:left}
@media (min-width:960px){.two.ar .blk:first-child{margin-top:0}}
.chip small{margin-left:4px}
.two.ar{margin-top:16px}
.two.ar>div>.asum:first-child{margin-top:0}
/* brand without a photo: a type block, not a grey box */
.btile .ph.none{background:var(--bg);border:1px solid var(--line);border-top:0;color:var(--ink);font-size:19px;line-height:1.15;padding:12px;overflow-wrap:anywhere}
@media (min-width:960px){.btile .ph.none{font-size:22px}}
/* brand without a photo: compact text tile */
.btile.t{padding-top:10px;gap:4px}
.btile.t b{font-size:16px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.grid:has(> .btile){align-items:start}
button.more{color:var(--sub);font-size:13px}
/* logo: seoul + red "deal" + the Chinese name in a light tone */
.logo{white-space:nowrap}
.logo b{font-weight:900;color:var(--sale)}
.logo small{font-size:13px;font-weight:700;letter-spacing:0;color:var(--faint);margin-left:6px;vertical-align:1px}
@media (min-width:960px){.logo small{font-size:14px}}
footer.site .logo b{color:var(--sale)}
