@charset "utf-8";
/* ==========================================================================
   GANGNAM SAJU — MZ EDITORIAL CATALOGUE × 아기자기
   The gangnamfinds discipline: white ground, hairlines, a fixed 980px centred
   column, black topbar + full-bleed black bands, 900-weight display type with
   tight tracking, thick black rules under section heads, numbered square
   tiles, red sticker tags, square corners everywhere, cyan reserved for the
   one primary action / links / focus. On top of it the cute layer: line-art
   mascots, slightly rotated stickers, tiny sparkles, blush pink accents.
   Pastel element colours are used ONLY for element data (chips, charts).
   --------------------------------------------------------------------------
   1 Reset  2 Tokens  3 Scripts  4 Base  5 Container  6 Topbar  7 Header
   8 Atoms (btn sticker chip tag icon mascot)  9 Hero  10 Reading form
   11 Stats  12 Bands + heads  13 Tiles  14 Numbered list  15 Horse band
   16 FAQ  17 CTA band  18 Page head  19 Type cards  20 Type detail
   21 2026 page  22 Doc pages + prose  23 Empty  24 Share  25 Pillar/meter
   26 Footer  27 Motion  28 Responsive  29 Print
   ========================================================================== */

/* 1. RESET ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
img,svg{max-width:100%}
img{display:block;border:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;border:0;background:none}
h1,h2,h3,h4{font-weight:800;line-height:1.3}
p{line-height:1.6}
ol,ul{list-style:none}
fieldset{border:0;min-width:0}
legend{padding:0}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
[hidden]{display:none !important}

/* 2. TOKENS --------------------------------------------------------------- */
:root{
  --ink:#0a0a0a;
  --ink-80:#111;
  --ink-body:#4a4a4a;
  --ink-dim:#5e5e5e;
  --ink-mute:#6b6b6b;      /* ≥4.5:1 on white and on --soft */
  --ink-inv:#fff;
  --line:#efefef;
  --line-2:#e5e5e5;
  --line-3:#e3e3e3;
  --line-4:#dedede;
  --line-6:#d1d1d1;
  --soft:#f4f4f4;
  --paper:#fff;
  --rule:#0a0a0a;
  --rule-inv:rgba(255,255,255,.24);

  --cyan:#23abdd;          /* the one primary CTA (ink text on it: 7.5:1), link underlines */
  --cyan-dark:#178bb6;
  --cyan-ink:#0e6f96;      /* cyan as text on white (5.6:1) */
  --focus:#1688b3;         /* cyan focus ring: ≥3:1 on white and on black */
  --red:#e0213a;           /* sticker tags — gangnamfinds #ed293e nudged darker so white 10px text passes AA (4.7:1) */
  --pink:#ff8fa3;          /* mascot blush */
  --pink-soft:#ffe3e9;
  --pink-hl:#ffb7c5;       /* headline accent on black */

  /* element data colours (Saju\Types::ELEMENT_COLOR) + soft fills + AA text */
  --el-wood:#6cc49a;  --el-wood-soft:#e5f5ec;  --el-wood-ink:#1e6b46;
  --el-fire:#ff8577;  --el-fire-soft:#ffe9e6;  --el-fire-ink:#a8322a;
  --el-earth:#f2c25c; --el-earth-soft:#fdf3dc; --el-earth-ink:#7a5a0e;
  --el-metal:#aeb7c4; --el-metal-soft:#eef0f4; --el-metal-ink:#45505f;
  --el-water:#6e9fe6; --el-water-soft:#e6effc; --el-water-ink:#1f4f9c;

  --w:980px;
  --gutter:15px;
  --gap:10px;
  --control-h:46px;
  --header-h:104px;

  --fs-base:14px;
  --fs-meta:10px;
  --fs-display:clamp(34px,5.2vw,58px);
  --fs-sect:clamp(24px,3vw,34px);
  --fs-page:clamp(30px,4.4vw,50px);
  --track-display:-.035em;
  --track-meta:.18em;
  --track-btn:.1em;
  --tt:uppercase;          /* uppercase only matters for Latin */

  --font-latin:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-serif:'Noto Serif KR','Noto Serif TC','Songti TC','Songti SC','Batang','Hiragino Mincho ProN',serif;
}

/* 3. PER-SCRIPT OVERRIDES — Hangul keeps words whole; ja/zh get native Han stacks */
html[lang^="ja"]{
  --font:'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',Meiryo,'Yu Gothic','Pretendard Variable',sans-serif;
  --font-serif:'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP','Noto Serif TC',serif;
}
html[lang^="zh"]{               /* system fonts only — no web font is loaded for zh (layout.php) */
  --font:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC','Noto Sans SC','Heiti SC',sans-serif;
  --font-serif:'Songti SC','Noto Serif SC','Noto Serif TC','SimSun',serif;
}
html[lang^="ko"],html[lang^="ja"],html[lang^="zh"]{--track-display:-.02em;--track-meta:.05em;--track-btn:.03em}
html[lang^="ko"]{--track-display:-.03em}

/* 4. BASE ----------------------------------------------------------------- */
body{
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.page{display:flex;flex-direction:column;min-height:100vh;background:var(--paper);overflow-x:clip}
main{display:block;flex:1 0 auto;min-width:0}
body,h1,h2,h3,h4,p,li,dd,dt,b,span,a,label,legend,summary,blockquote{overflow-wrap:anywhere;word-break:keep-all}
html[lang^="ja"] *,html[lang^="zh"] *{word-break:normal}
::selection{background:var(--ink);color:#fff}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 14px;background:var(--cyan);color:var(--ink);font-weight:800}
.skip:focus{left:10px;top:10px}
.muted{color:var(--ink-dim)}
.num{font-family:var(--font-latin);font-variant-numeric:tabular-nums}
.ico{display:inline-block;flex:0 0 auto;vertical-align:-.15em}
[lang="zh-Hant"]{font-feature-settings:normal}

/* 5. CONTAINER ------------------------------------------------------------ */
.wrap,.topbar__in,.header__in,.mobnav,.hero__in,.hero__statsbar,.phead__in,.footer__in,.footer__bar,
.notice__in,.ctaband__in,.typebody,.doc,.empty__in{
  width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gutter);
}

/* 6. TOPBAR + LANGUAGE SWITCHER ------------------------------------------- */
.topbar{position:relative;z-index:60;background:var(--ink);color:#fff}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);min-height:30px}
.topbar__tag{
  display:none;align-items:center;gap:7px;min-width:0;
  font-family:var(--font);font-size:var(--fs-meta);font-weight:600;color:rgba(255,255,255,.62);
  letter-spacing:var(--track-meta);text-transform:var(--tt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topbar__spark{color:var(--pink-hl)}
@media(min-width:600px){.topbar__tag{display:flex}}
.langbar{position:relative;margin-inline-start:auto;flex-shrink:0}
.langbar__btn{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding-inline:8px;
  border:1px solid rgba(255,255,255,.34);background:transparent;color:#fff;
  font-size:var(--fs-meta);font-weight:800;letter-spacing:.04em;line-height:1;white-space:nowrap;
}
.langbar__btn:hover,.langbar.open .langbar__btn{background:#fff;color:var(--ink);border-color:#fff}
.langbar.open .langbar__chev{transform:rotate(180deg)}
.langbar__menu{
  position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 4px);z-index:70;
  display:none;min-width:190px;padding:4px;background:#fff;border:1px solid var(--ink);
  box-shadow:4px 4px 0 rgba(0,0,0,.18);
}
.langbar.open .langbar__menu{display:block}
.langbar__item{display:flex;align-items:center;gap:10px;padding:9px 10px;font-size:13px;line-height:1.3;color:var(--ink)}
.langbar__item b{font-family:var(--font-latin);font-size:9px;font-weight:900;letter-spacing:.08em;min-width:36px;color:var(--ink-mute)}
.langbar__item:hover{background:var(--ink);color:#fff}
.langbar__item:hover b{color:rgba(255,255,255,.6)}
.langbar__item[aria-current="true"]{background:var(--soft);font-weight:800}

/* 7. HEADER --------------------------------------------------------------- */
.header{position:sticky;inset-block-start:0;z-index:50;background:#fff;border-bottom:3px solid var(--ink)}
.header__in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap);min-height:60px}
.logo{
  order:1;display:flex;align-items:center;gap:10px;min-width:0;position:relative;
  font-family:var(--font-latin);font-size:19px;font-weight:900;line-height:1;letter-spacing:-.03em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.logo__mark{
  flex:0 0 auto;display:inline-grid;place-items:center;width:34px;height:34px;
  background:var(--ink);color:#fff;font-family:var(--font-latin);font-size:13px;font-weight:900;letter-spacing:.02em;
}
.logo__spark{color:var(--red);margin-inline-start:-4px;align-self:flex-start;margin-top:2px}
.logo:hover .logo__spark{animation:twinkle .9s ease-in-out}
.header__cta{
  order:2;margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;
  height:34px;padding-inline:13px;background:var(--ink);color:#fff;
  font-size:11px;font-weight:900;letter-spacing:var(--track-btn);text-transform:var(--tt);white-space:nowrap;
}
.header__cta:hover{background:var(--cyan);color:var(--ink)}
.burger{
  order:3;display:none;place-items:center;width:34px;height:34px;flex:0 0 auto;
  border:2px solid var(--ink);background:#fff;color:var(--ink);
}
.burger[aria-expanded="true"]{background:var(--ink);color:#fff}
.nav{
  order:4;flex:1 0 100%;display:flex;align-items:stretch;
  border-top:1px solid var(--line-2);overflow-x:auto;scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none}
.nav a{
  display:flex;align-items:center;flex:0 0 auto;height:40px;padding-inline:14px;
  font-size:12px;font-weight:800;line-height:1;letter-spacing:.04em;text-transform:var(--tt);
  color:var(--ink);white-space:nowrap;
}
.nav a:first-child{padding-inline-start:0}
/* the bar is drawn inside the link (inset shadow): a border pushed below it was clipped by the scrolling nav and,
   even unclipped, vanished into the header's own 3px ink rule */
.nav a:hover{box-shadow:inset 0 -3px 0 var(--cyan)}
.nav a.is-active{box-shadow:inset 0 -3px 0 var(--ink)}
.mobnav{display:none;border-top:1px solid var(--line-2);background:#fff;padding-block:0 10px}
.mobnav.open{display:block}
.mobnav a{
  display:flex;align-items:center;justify-content:space-between;padding:13px 0;
  font-size:14px;font-weight:800;text-transform:var(--tt);letter-spacing:.03em;color:var(--ink);
  border-bottom:1px solid var(--line-2);
}
.mobnav a:last-child{border-bottom:0}
.mobnav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.notice{background:var(--pink-soft);border-bottom:1px solid var(--ink)}
.notice__in{display:flex;align-items:center;gap:8px;padding-block:9px;font-size:13px;font-weight:600}

/* 8. ATOMS ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 20px;border:0;
  font-size:12px;font-weight:900;line-height:1.2;letter-spacing:var(--track-btn);text-transform:var(--tt);
  text-align:center;white-space:normal;cursor:pointer;transition:background-color .15s,color .15s,transform .15s;
}
.btn--cta{background:var(--cyan);color:var(--ink)}
.btn--cta:hover{background:var(--ink);color:#fff}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--cyan);color:var(--ink)}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--line:hover{background:var(--ink);color:#fff}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{background:var(--cyan);color:var(--ink)}
.btn--lg{min-height:54px;padding:14px 26px;font-size:13.5px}
.btn--sm{min-height:34px;padding:7px 13px;font-size:11px}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn.is-busy{opacity:.75;cursor:progress}

.sticker{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;
  padding:5px 9px 4px;transform:rotate(var(--tilt,-3deg));transform-origin:left center;
  font-family:var(--font);font-size:var(--fs-meta);font-weight:900;line-height:1.25;
  letter-spacing:.08em;text-transform:var(--tt);white-space:nowrap;
  background:var(--red);color:#fff;box-shadow:2px 2px 0 var(--ink);
}
html[lang^="ko"] .sticker,html[lang^="ja"] .sticker,html[lang^="zh"] .sticker{letter-spacing:.03em;font-size:11px}
.sticker--ink{background:var(--ink);color:#fff;box-shadow:2px 2px 0 var(--red)}
.sticker--white{background:#fff;color:var(--ink);box-shadow:2px 2px 0 var(--red)}
.sticker--line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink),2px 2px 0 var(--ink)}
.sticker--pink{background:var(--pink-soft);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink),2px 2px 0 var(--ink)}

.echip{
  display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 9px;max-width:100%;
  border:1px solid var(--el-c);background:var(--el-s);color:var(--el-i);
  font-size:11.5px;font-weight:800;line-height:1.2;white-space:nowrap;vertical-align:middle;
}
.echip__han{font-size:13px;font-weight:900;line-height:1}
.echip__val{font-family:var(--font-latin);font-variant-numeric:tabular-nums;font-weight:900;margin-inline-start:2px}
.echip--sm{min-height:22px;padding:2px 7px;font-size:10.5px;gap:4px}
.echip--sm .echip__han{font-size:11.5px}
.echip--lg{min-height:34px;padding:5px 12px;font-size:13px;gap:8px}
.echip--lg .echip__han{font-size:16px}
.echip--wood,.el--wood{--el-c:var(--el-wood);--el-s:var(--el-wood-soft);--el-i:var(--el-wood-ink)}
.echip--fire,.el--fire{--el-c:var(--el-fire);--el-s:var(--el-fire-soft);--el-i:var(--el-fire-ink)}
.echip--earth,.el--earth{--el-c:var(--el-earth);--el-s:var(--el-earth-soft);--el-i:var(--el-earth-ink)}
.echip--metal,.el--metal{--el-c:var(--el-metal);--el-s:var(--el-metal-soft);--el-i:var(--el-metal-ink)}
.echip--water,.el--water{--el-c:var(--el-water);--el-s:var(--el-water-soft);--el-i:var(--el-water-ink)}
.el-t--wood{color:var(--el-wood-ink)}.el-t--fire{color:var(--el-fire-ink)}.el-t--earth{color:var(--el-earth-ink)}
.el-t--metal{color:var(--el-metal-ink)}.el-t--water{color:var(--el-water-ink)}

.tag{
  display:inline-flex;align-items:center;padding:3px 7px;border:1px solid var(--line-4);
  font-size:11px;font-weight:700;line-height:1.3;color:var(--ink-dim);background:#fff;white-space:nowrap;
}
.label{font-size:var(--fs-meta);font-weight:800;letter-spacing:var(--track-meta);text-transform:var(--tt);color:var(--ink-mute)}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-meta);font-weight:900;letter-spacing:var(--track-meta);text-transform:var(--tt)}
.lead{font-size:17px;line-height:1.65;color:#333}

.mascot{display:inline-grid;place-items:center;flex:0 0 auto;line-height:0;vertical-align:middle}
.mascot svg{display:block;width:100%;height:auto;max-width:none;overflow:visible}
/* on black grounds the black line art needs a white sticker behind it */
.hero .mascot,.band--ink .mascot,.phead .mascot,.ctaband--ink .mascot{background:#fff;padding:5px;box-shadow:2px 2px 0 rgba(255,255,255,.25)}
.sparkle{display:inline-block;color:var(--red)}

.box{border-top:2px solid var(--ink);padding-top:12px;min-width:0}
.box__title{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:900;margin-bottom:6px}
.box p{font-size:14px;color:var(--ink-body);line-height:1.75}
.box p+p{margin-top:8px}
.box--warn{border-top-color:var(--red)}
.box--warn .box__title{color:var(--red)}
.box--ink{background:var(--ink);color:#fff;border-top:0;padding:18px}

.note{
  display:flex;align-items:flex-start;gap:8px;margin-top:26px;padding:12px 14px;
  background:var(--soft);border-inline-start:3px solid var(--ink);
  font-size:12px;line-height:1.6;color:var(--ink-body);
}
.note .ico{margin-top:2px}

/* 9. HERO (home) ---------------------------------------------------------- */
.hero{background:var(--ink);color:#fff}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:20px 44px;padding-block:44px 34px;align-items:start}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  font-family:var(--font-latin);font-size:var(--fs-meta);font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;line-height:1;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.5);
}
.hero__eyebrow .ico{color:var(--pink-hl)}
.hero__title{font-size:var(--fs-display);font-weight:900;line-height:1.04;letter-spacing:var(--track-display);color:#fff}
.hero__title-2{display:block;color:var(--pink-hl)}
.hero__lead{margin-top:16px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.76);max-width:52ch}
.hero__points{display:grid;gap:9px;margin-top:22px}
.hero__points li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9);line-height:1.5}
.hero__points .ico{margin-top:2px;color:var(--pink-hl)}
.hero__parade{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__parade .mascot{width:60px;height:60px}
.hero__parade .mascot:nth-child(odd){rotate:-5deg}
.hero__parade .mascot:nth-child(even){rotate:4deg}
.hero__copy{min-width:0;align-self:center}
.hero__form{position:relative;min-width:0;scroll-margin-top:120px}
.hero__statsbar{padding-bottom:34px}

/* 10. READING FORM -------------------------------------------------------- */
.rform{position:relative;background:#fff;color:var(--ink);padding:24px 22px 20px;box-shadow:6px 6px 0 var(--red)}
.rform__head{position:relative;padding-inline-end:64px;margin-bottom:16px}
.rform__sticker{position:absolute;top:-36px;left:-8px}
.rform__title{font-size:24px;font-weight:900;line-height:1.15;letter-spacing:var(--track-display)}
.rform__sub{margin-top:5px;font-size:13px;color:var(--ink-dim);line-height:1.5}
.rform__peek{position:absolute;top:-44px;right:-6px;width:64px;height:64px;rotate:8deg}
.rform .mascot{background:transparent;padding:0;box-shadow:none}
.rform__alert{margin-bottom:14px;padding:10px 12px;background:#fff1f3;border-inline-start:3px solid var(--red);color:#b0122a;font-size:13px;font-weight:700}
.rform__alert p{display:flex;gap:7px;align-items:flex-start}
.rform__alert .ico{margin-top:3px}
.field{margin-bottom:16px;min-width:0}
.field__label,.field__sublabel{
  display:block;margin-bottom:7px;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:var(--tt);color:var(--ink);
}
html[lang^="ko"] .field__label,html[lang^="ja"] .field__label,html[lang^="zh"] .field__label{font-size:13px;letter-spacing:0}
.field__sublabel{margin-top:10px}
.field__opt{font-weight:600;color:var(--ink-mute);text-transform:none;letter-spacing:0}
.field__hint{margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--ink-dim)}
.field__err{display:flex;gap:6px;margin-top:6px;font-size:12.5px;font-weight:800;color:#c8102e;line-height:1.45}
.field__err::before{content:"";flex:0 0 auto;width:12px;height:12px;margin-top:2px;background:currentColor;
  -webkit-mask:var(--ico-alert) center/contain no-repeat;mask:var(--ico-alert) center/contain no-repeat}
.field__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:8px}
.input,.select{
  display:block;width:100%;height:var(--control-h);padding:0 12px;
  border:1px solid var(--ink);background:#fff;color:var(--ink);
  font-size:15px;font-weight:600;line-height:1.2;
  -webkit-appearance:none;appearance:none;
}
.input::placeholder{color:var(--ink-mute);font-weight:500}
.select{
  padding-inline-end:30px;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:13px;
}
.input:disabled,.select:disabled{background-color:var(--soft);color:var(--ink-mute);border-color:var(--line-6);cursor:not-allowed}
.input[aria-invalid="true"],.select[aria-invalid="true"],.is-invalid .input,.is-invalid .select{border-color:#c8102e;box-shadow:inset 0 0 0 1px #c8102e}
.input:focus-visible,.select:focus-visible{outline:3px solid var(--focus);outline-offset:1px}

.seg{display:flex;min-width:0}
.seg__opt{position:relative;flex:1 1 0;min-width:0}
.seg__opt+.seg__opt{margin-inline-start:-1px}
.seg__opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg__opt span{
  display:flex;align-items:center;justify-content:center;gap:6px;height:var(--control-h);padding:0 10px;
  border:1px solid var(--ink);background:#fff;font-size:14px;font-weight:800;text-align:center;line-height:1.15;
  transition:background-color .12s,color .12s;
}
.seg__opt:hover span{background:var(--soft)}
.seg__opt input:checked+span{background:var(--ink);color:#fff;position:relative;z-index:1}
.seg__opt input:focus-visible+span{outline:3px solid var(--focus);outline-offset:1px;position:relative;z-index:2}
.seg--sm .seg__opt span{height:36px;font-size:13px;padding:0 12px}
.seg--sm{flex:0 1 auto}
.seg--sm .seg__opt{flex:0 0 auto}
.seg__opt span{white-space:nowrap}
.is-invalid .seg__opt span{border-color:#c8102e}

.check{position:relative;display:inline-flex;align-items:flex-start;gap:9px;margin-top:10px;font-size:13px;font-weight:600;line-height:1.4;cursor:pointer}
.check input{
  flex:0 0 auto;width:18px;height:18px;margin:0;border:1.5px solid var(--ink);background:#fff;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
.check input:checked{
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.check input:disabled{opacity:.4}
.check--leap{margin-top:0}

.dsel{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:6px}
.tsel{display:flex;align-items:center;gap:6px}
.tsel .select{flex:1 1 0;min-width:0}
.tsel__colon{font-weight:900;font-size:18px}

.city{position:relative}
.city__box{position:relative}
.city__ico{position:absolute;left:12px;top:50%;translate:0 -50%;color:var(--ink-dim);pointer-events:none}
.city__input{padding-left:36px;padding-right:38px}
.city__clear{position:absolute;right:4px;top:50%;translate:0 -50%;display:grid;place-items:center;width:36px;height:36px;color:var(--ink-dim)}
.city__clear:hover{color:var(--ink)}
.city__list{
  position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:40;max-height:300px;overflow-y:auto;
  background:#fff;border:1px solid var(--ink);box-shadow:5px 5px 0 rgba(0,0,0,.14);
}
.city__opt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.city__opt:last-child{border-bottom:0}
.city__opt b{font-size:14px;font-weight:800;min-width:0}
.city__opt small{flex:0 0 auto;font-family:var(--font-latin);font-size:10.5px;font-weight:700;color:var(--ink-mute);letter-spacing:.04em}
.city__opt .city__en{font-weight:600;color:var(--ink-dim);font-size:12.5px}
.city__opt[aria-selected="true"],.city__opt:hover{background:var(--ink);color:#fff}
.city__opt[aria-selected="true"] small,.city__opt:hover small,.city__opt[aria-selected="true"] .city__en,.city__opt:hover .city__en{color:rgba(255,255,255,.7)}
.city__empty{padding:12px;font-size:13px;color:var(--ink-dim)}
.city__picked{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;font-weight:700;color:var(--el-wood-ink)}
.tzpanel{display:none;margin-top:4px}
.field--city.is-manual .tzpanel,.no-js .tzpanel{display:block}
.field--city.is-manual .city{opacity:.45}
.tz-guess{margin-top:6px;font-size:12px;font-weight:700;color:var(--cyan-ink);text-decoration:underline;text-underline-offset:3px}

.hp{position:absolute !important;left:-10000px !important;top:auto;width:1px;height:1px;overflow:hidden}
.rform__submit{margin-top:6px}
.rform__submit .ico{animation:twinkle 2.4s ease-in-out infinite}
.rform__fine{margin-top:10px;font-size:11.5px;color:var(--ink-dim);line-height:1.6}
.rform__fine .ico{vertical-align:-1px;margin-inline-end:2px}
.rform__fine a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.rform__fine a:hover{color:var(--cyan-ink)}

/* 11. STATS --------------------------------------------------------------- */
.stats{display:flex;border-top:1px solid var(--rule-inv)}
.stats__item{flex:1 1 0;min-width:0;padding:16px 14px 0;border-inline-start:1px solid var(--rule-inv)}
.stats__item:first-child{border-inline-start:0;padding-inline-start:0}
.stats__item b{
  display:block;font-family:var(--font-latin);font-size:clamp(26px,3vw,38px);font-weight:900;line-height:1;
  letter-spacing:-.04em;white-space:nowrap;color:#fff;font-variant-numeric:tabular-nums;
}
html[lang^="ko"] .stats__item b,html[lang^="ja"] .stats__item b,html[lang^="zh"] .stats__item b{font-family:var(--font)}
.stats__item span{
  display:block;margin-top:8px;font-size:var(--fs-meta);font-weight:800;letter-spacing:var(--track-meta);
  text-transform:var(--tt);color:rgba(255,255,255,.6);line-height:1.4;
}
html[lang^="ko"] .stats__item span,html[lang^="ja"] .stats__item span,html[lang^="zh"] .stats__item span{font-size:11.5px}

/* 12. BANDS + SECTION HEADS ----------------------------------------------- */
.band{padding-block:42px 46px;background:#fff}
.band--soft{background:var(--soft)}
.band--ink{background:var(--ink);color:#fff}
.band--tight{padding-block:26px 30px}
.band__lead{margin:-6px 0 20px;font-size:14px;color:var(--ink-body);max-width:68ch}
.shead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap);
  margin-bottom:20px;padding-bottom:11px;border-bottom:3px solid var(--rule);
}
.shead__txt{min-width:0}
.shead h1,.shead h2,.shead h3{font-size:var(--fs-sect);font-weight:900;line-height:1.08;letter-spacing:var(--track-display);color:var(--ink)}
.shead h3{font-size:clamp(20px,2.4vw,26px)}
.tsec .shead h2{font-size:clamp(21px,2.4vw,26px)}
.shead p{margin-top:8px;font-size:var(--fs-meta);font-weight:800;letter-spacing:var(--track-meta);text-transform:var(--tt);color:var(--ink-mute);line-height:1.4}
html[lang^="ko"] .shead p,html[lang^="ja"] .shead p,html[lang^="zh"] .shead p{font-size:12px}
.shead__num{display:block;font-family:var(--font-latin);font-size:13px;font-weight:900;letter-spacing:.06em;color:var(--red);margin-bottom:4px}
.shead__more{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;background:var(--ink);color:#fff;
  font-size:var(--fs-meta);font-weight:900;line-height:1;letter-spacing:.1em;text-transform:var(--tt);white-space:nowrap;
}
html[lang^="ko"] .shead__more,html[lang^="ja"] .shead__more,html[lang^="zh"] .shead__more{font-size:11.5px;letter-spacing:.02em}
.shead__more:hover{background:var(--cyan);color:var(--ink)}
.shead--inv,.band--ink .shead{border-bottom-color:#fff}
.shead--inv h2,.band--ink .shead h2{color:#fff}
.shead--inv p,.band--ink .shead p{color:rgba(255,255,255,.55)}
.shead--inv .shead__more,.band--ink .shead__more{background:#fff;color:var(--ink)}

.grid{display:grid;gap:22px var(--gap);min-width:0}
.grid>*{min-width:0}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:28px 44px;align-items:start}
.stack>*+*{margin-top:16px}

/* 13. TILES — the 10 beauty types (numbered squares) ----------------------- */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));counter-reset:none}
.tiles>li{min-width:0;display:flex}
.tile{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1 1 auto;min-width:0;
  min-height:210px;padding:14px 13px 15px;background:#fff;color:var(--ink);
  border:1px solid var(--line-3);margin-inline-end:-1px;margin-block-end:-1px;
  transition:box-shadow .15s,transform .15s;
}
.tile:hover,.tile:focus-visible{z-index:2;box-shadow:inset 0 0 0 2px var(--ink),4px 4px 0 var(--ink);transform:translate(-2px,-2px)}
.tile:hover .tile__mascot{animation:boing .6s ease}
.tile.is-current{box-shadow:inset 0 0 0 2px var(--ink);z-index:1;background:var(--pink-soft)}
.tile__num{position:absolute;top:11px;right:11px;font-family:var(--font-latin);font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--line-6)}
.tile:hover .tile__num{color:var(--red)}
.tile__han{position:absolute;top:30px;right:12px;font-size:30px;font-weight:900;line-height:1;color:var(--line);pointer-events:none}
.tile__mascot{width:72px;height:72px;margin-bottom:6px}
.tile__name{font-size:16px;font-weight:900;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.tile__meta{
  display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-meta);font-weight:800;letter-spacing:.06em;
  text-transform:var(--tt);color:var(--ink-mute);line-height:1.3;
}
.tile__meta::before{content:"";width:7px;height:7px;flex:0 0 auto;background:var(--el-c);border:1px solid var(--ink)}
.tile--wood{--el-c:var(--el-wood)}.tile--fire{--el-c:var(--el-fire)}.tile--earth{--el-c:var(--el-earth)}
.tile--metal{--el-c:var(--el-metal)}.tile--water{--el-c:var(--el-water)}
.tile__tag{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
  margin-top:2px;font-size:12px;font-weight:500;color:var(--ink-body);line-height:1.5;
}
.tiles--compact .tile{min-height:0;align-items:center;text-align:center;padding:12px 6px 10px;gap:4px}
.tiles--compact .tile__mascot{width:44px;height:44px;margin:0}
.tiles--compact .tile__han{display:none}
.tiles--compact .tile__num{top:6px;right:7px;font-size:9px}
.tiles--compact .tile__name{font-size:12px;font-weight:800}

/* 14. NUMBERED LIST — "why we're precise" ---------------------------------- */
.numlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 28px}
.numlist__item{position:relative;min-width:0;padding-top:12px;border-top:2px solid var(--ink)}
.numlist__num{
  display:block;font-family:var(--font-latin);font-size:64px;font-weight:900;line-height:.9;
  letter-spacing:-.06em;color:var(--ink);margin-bottom:12px;font-variant-numeric:tabular-nums;
}
.numlist__item:nth-child(2) .numlist__num{-webkit-text-stroke:2px var(--ink);color:transparent}
.numlist__item:nth-child(3) .numlist__num{color:var(--red)}
.numlist__item h3{font-size:19px;font-weight:900;line-height:1.25;letter-spacing:-.02em;margin-bottom:8px}
.numlist__item p{font-size:13.5px;color:var(--ink-body);line-height:1.7}
.numlist__proof{
  display:inline-flex !important;align-items:center;gap:6px;margin-top:12px;padding:6px 9px;
  background:var(--soft);border:1px solid var(--line-3);
  font-size:11.5px !important;font-weight:800;color:var(--ink) !important;line-height:1.4 !important;
}

/* 15. HORSE BAND (home 2026) ----------------------------------------------- */
.horse{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:24px 40px;align-items:center}
.horse__title{margin-top:14px;font-size:clamp(26px,3.6vw,40px);font-weight:900;line-height:1.1;letter-spacing:var(--track-display);color:#fff}
.horse__lead{margin-top:12px;font-size:15px;color:rgba(255,255,255,.76);max-width:56ch;line-height:1.7}
.horse__chips{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 22px}
.horse__art{position:relative;min-height:220px;display:flex;align-items:flex-end;justify-content:center;gap:14px}
.horse__gz{
  position:absolute;inset:0 0 auto 0;text-align:center;font-size:clamp(84px,11vw,132px);font-weight:900;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.34);letter-spacing:.02em;pointer-events:none;
}
.horse__art .mascot{position:relative}
.horse__art .mascot:first-of-type{width:124px;height:124px;rotate:-4deg}
.horse__art .mascot:last-of-type{width:96px;height:96px;rotate:6deg}

/* 16. FAQ ----------------------------------------------------------------- */
.faq{border-top:2px solid var(--ink)}
.shead+.faq{border-top:0}
.faq__item{border-bottom:1px solid var(--line-4);background:transparent}
.faq__item summary{
  display:flex;align-items:flex-start;gap:12px;padding:16px 2px;cursor:pointer;
  font-size:15px;font-weight:800;line-height:1.45;color:var(--ink);
}
.faq__item summary>span:nth-child(2){flex:1 1 auto;min-width:0}
.faq__item summary:hover>span:nth-child(2){text-decoration:underline;text-underline-offset:3px}
.faq__q{
  flex:0 0 auto;display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 4px;margin-top:-1px;
  background:var(--ink);color:#fff;font-family:var(--font-latin);font-size:11px;font-weight:900;letter-spacing:.02em;
}
.faq__chev{flex:0 0 auto;margin-top:3px;transition:transform .2s}
.faq__item[open] .faq__chev{transform:rotate(180deg)}
.faq__item[open] .faq__q{background:var(--red)}
.faq__a{padding:0 4px 18px 36px;font-size:14px}
.faqwrap{max-width:820px}
.faqwrap__more{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;color:var(--ink-dim)}
.faqwrap__more a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:3px}
.faqwrap__more a:hover{color:var(--cyan-ink)}

/* 17. CTA BAND ------------------------------------------------------------ */
.ctaband{padding-block:46px 50px}
.ctaband--ink{background:var(--ink);color:#fff;border-bottom:1px solid var(--rule-inv)}
.ctaband--soft{background:var(--soft);border-top:1px solid var(--line-3)}
.ctaband__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 40px;align-items:center}
.ctaband__copy{min-width:0}
.ctaband__title{margin-top:14px;font-size:clamp(25px,3.4vw,38px);font-weight:900;line-height:1.1;letter-spacing:var(--track-display)}
.ctaband__copy>.ctaband__title:first-child{margin-top:0}
.ctaband__text{margin-top:10px;font-size:15px;line-height:1.7;max-width:56ch;color:var(--ink-body)}
.ctaband--ink .ctaband__text{color:rgba(255,255,255,.74)}
.ctaband .btn{margin-top:22px}
.ctaband__mascots{display:flex;align-items:flex-end;gap:12px}
.ctaband__mascots .mascot{width:92px;height:92px}
.ctaband__mascots .mascot:nth-child(2){width:108px;height:108px}

/* 18. PAGE HEAD (black) --------------------------------------------------- */
.phead{background:var(--ink);color:#fff;overflow:hidden}
.phead__in{padding-block:30px 34px;position:relative}
.phead h1{margin-top:14px;font-size:var(--fs-page);font-weight:900;line-height:1.05;letter-spacing:var(--track-display);color:#fff;max-width:20ch}
.phead .sticker+h1,.phead .typehead__stickers+h1{margin-top:16px}
.phead__lead{margin-top:14px;font-size:15.5px;font-weight:500;line-height:1.7;color:rgba(255,255,255,.76);max-width:62ch}
.phead__meta{display:flex;align-items:center;gap:7px;margin-top:14px;font-size:12px;font-weight:700;color:rgba(255,255,255,.6)}
.phead .sticker{margin-top:16px}
.phead__pals{display:none}
@media(min-width:720px){
  .phead--pals .phead__in{padding-inline-end:calc(var(--gutter) + 200px)}
  .phead__pals{position:absolute;inset-inline-end:var(--gutter);top:50%;translate:0 -50%;display:flex;align-items:flex-end;gap:14px}
  .phead__pals .mascot:first-child{rotate:-5deg}
  .phead__pals .mascot:last-child{rotate:6deg;margin-bottom:-6px}
}
.phead__parade{display:flex;gap:10px;max-width:var(--w);margin:0 auto;padding:0 var(--gutter) 26px;overflow:hidden}
.phead__parade .mascot{width:52px;height:52px;flex:0 0 auto}
.phead__parade .mascot:nth-child(odd){rotate:-4deg}
.phead__parade .mascot:nth-child(even){rotate:5deg}
/* phones: all ten types as a 5 × 2 sticker grid instead of a row cut off mid-mascot at the screen edge */
@media(max-width:719px){
  .phead__parade{display:grid;grid-template-columns:repeat(5,52px);justify-content:space-between;row-gap:12px;max-width:420px;margin-inline:0}
}
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
  font-size:var(--fs-meta);font-weight:800;letter-spacing:.1em;text-transform:var(--tt);line-height:1.6;color:var(--ink-mute);
}
html[lang^="ko"] .crumb,html[lang^="ja"] .crumb,html[lang^="zh"] .crumb{font-size:11.5px;letter-spacing:.02em}
.crumb a:hover{text-decoration:underline}
.phead .crumb{color:rgba(255,255,255,.55)}
.phead .crumb a{color:rgba(255,255,255,.75)}
.phead .crumb a:hover{color:#fff}
.phead .crumb [aria-current]{color:#fff}

/* 19. TYPE CARDS (index) + element rows ----------------------------------- */
.typecards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.typecard{min-width:0;border-top:2px solid var(--ink)}
.typecards>.typecard:nth-last-child(-n+2){border-bottom:2px solid var(--ink)}
.typecard__link{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:16px 0;align-items:start}
.typecard__plate{
  position:relative;display:grid;place-items:center;aspect-ratio:1;background:var(--soft);
  box-shadow:inset 0 0 0 1px var(--line-3);overflow:hidden;
}
.typecard__plate .mascot{width:96px;height:96px;position:relative;z-index:1;transition:transform .2s}
.typecard__link:hover .typecard__plate .mascot{transform:translateY(-3px) rotate(-3deg)}
.typecard__num{position:absolute;top:7px;left:8px;z-index:2;font-family:var(--font-latin);font-size:11px;font-weight:900;letter-spacing:.06em;color:var(--ink)}
.typecard__han{position:absolute;right:6px;bottom:-6px;font-size:58px;font-weight:900;line-height:1;color:#e6e6e6}
.typecard__body{display:flex;flex-direction:column;gap:5px;min-width:0}
.typecard__meta{font-size:var(--fs-meta);font-weight:800;letter-spacing:.1em;text-transform:var(--tt);color:var(--ink-mute)}
html[lang^="ko"] .typecard__meta,html[lang^="ja"] .typecard__meta,html[lang^="zh"] .typecard__meta{font-size:11.5px;letter-spacing:.02em}
.typecard__name{font-size:22px;font-weight:900;line-height:1.1;letter-spacing:-.02em}
.typecard__title{font-size:14px;font-weight:800;color:#333;line-height:1.4}
.typecard__tag{font-size:13px;color:var(--ink-body);line-height:1.55}
.typecard__kw{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.typecard__more{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:var(--tt)}
.typecard__link:hover .typecard__name{text-decoration:underline;text-underline-offset:4px}
.typecard__link:hover .typecard__more{color:var(--cyan-ink)}
.elrows{border-top:3px solid var(--ink)}
.elrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--line-4)}
.elrow__types{display:flex;flex-wrap:wrap;gap:6px 12px}
.elrow__types a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800}
.elrow__types a:hover span{text-decoration:underline}
.elrow__types .mascot{width:30px;height:30px}

/* 20. TYPE DETAIL --------------------------------------------------------- */
.typehead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,270px);gap:24px 40px;align-items:center}
.typehead__copy{min-width:0}
.typehead__stickers{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px}
.typehead__stickers .sticker{margin-top:0}
.typehead__name{display:flex;align-items:baseline;gap:10px;margin-top:18px;font-size:15px;font-weight:900;letter-spacing:.02em;color:var(--pink-hl)}
.typehead__name span{font-size:22px;color:#fff}
.phead--type h1{margin-top:6px;max-width:16ch}
.typehead__kw{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.typehead__kw li{padding:4px 9px;border:1px solid rgba(255,255,255,.4);font-size:12px;font-weight:700;color:rgba(255,255,255,.88)}
.typehead__art{display:flex;justify-content:center}
.typehead__plate{
  position:relative;display:grid;place-items:center;width:100%;max-width:260px;aspect-ratio:1;
  background:#fff radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.2px) 0 0/10px 10px;
  box-shadow:6px 6px 0 var(--red);
}
.typehead__plate .mascot{width:76%;height:auto;background:transparent;padding:0;box-shadow:none}
.typehead__han{position:absolute;right:10px;bottom:4px;font-size:44px;font-weight:900;line-height:1;color:var(--ink)}
.typehead__plate::after{
  content:"";position:absolute;top:10px;right:10px;width:18px;height:18px;
  border:3px solid var(--ink);border-left:0;border-bottom:0;
}
.typebody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,290px);gap:32px 44px;padding-block:36px 50px;align-items:start}
.typebody__main{min-width:0}
.typebody__summary p{font-size:18px;font-weight:600;line-height:1.7;color:#222}
.typebody__summary p+p{margin-top:12px}
.tsec{margin-top:40px}
.tsec .shead{margin-bottom:16px}
.typebody__side{position:sticky;top:calc(var(--header-h) + 16px);display:grid;gap:20px;min-width:0}
.ritual{display:grid;gap:10px}
.ritual li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;background:var(--soft)}
.ritual__n{font-family:var(--font-latin);font-size:26px;font-weight:900;line-height:1;letter-spacing:-.05em;color:var(--red)}
.ritual p{font-size:14px;line-height:1.7;color:#333}
.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.swatch{display:flex;flex-direction:column;gap:4px;min-width:0}
.swatch__chip{display:block;height:70px;border:1px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.swatch b{margin-top:6px;font-size:13px;font-weight:800;line-height:1.3}
.swatch code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--ink-dim)}
.vibes{display:grid;gap:8px}
.vibes li{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-3);font-size:14px;line-height:1.6;color:#333}
.vibes .ico{margin-top:4px;color:var(--red)}
.spots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 18px}
.spot{position:relative;min-width:0;padding-top:12px;border-top:2px solid var(--ink)}
.spot__n{display:block;font-family:var(--font-latin);font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--red);margin-bottom:6px}
.spot__name{display:flex;align-items:flex-start;gap:6px;font-size:15px;font-weight:900;line-height:1.3}
.spot__name .ico{margin-top:2px}
.spot p{margin-top:6px;font-size:13px;color:var(--ink-body);line-height:1.65}
.duo{align-items:start}
.quote{position:relative;margin:0;padding:30px 26px 24px;background:var(--ink);color:#fff;box-shadow:6px 6px 0 var(--red)}
.quote::before{
  content:"";position:absolute;top:12px;right:12px;width:18px;height:18px;
  border:3px solid #fff;border-left:0;border-bottom:0;opacity:.85;
}
.quote__orig{font-family:var(--font-serif);font-size:clamp(20px,2.6vw,26px);font-weight:700;line-height:1.7;letter-spacing:.12em;color:#fff}
.quote__l{display:block}
.quote__h{display:inline-block}
.quote__trans{margin-top:14px;font-size:15px;line-height:1.75;color:rgba(255,255,255,.86)}
.quote__src{display:block;margin-top:14px;font-size:var(--fs-meta);font-weight:800;letter-spacing:.12em;text-transform:var(--tt);color:var(--pink-hl)}
html[lang^="ko"] .quote__src,html[lang^="ja"] .quote__src,html[lang^="zh"] .quote__src{font-size:12px;letter-spacing:.02em}
.quote__note{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule-inv);font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.62)}
.sidebox{border:2px solid var(--ink);padding:18px;background:#fff;box-shadow:5px 5px 0 var(--ink)}
.sidebox__eyebrow{display:flex;align-items:center;gap:6px;font-size:var(--fs-meta);font-weight:900;letter-spacing:.14em;text-transform:var(--tt);color:var(--red)}
html[lang^="ko"] .sidebox__eyebrow,html[lang^="ja"] .sidebox__eyebrow,html[lang^="zh"] .sidebox__eyebrow{font-size:11.5px;letter-spacing:.02em}
.sidebox__title{margin:8px 0 12px;font-size:19px;font-weight:900;line-height:1.3;letter-spacing:-.02em}
.sidebox__fine{margin-top:10px;font-size:11.5px;color:var(--ink-dim);line-height:1.5}
.sidebox--mini{display:grid;justify-items:start;gap:4px;box-shadow:4px 4px 0 var(--red)}
.sidebox--mini .sidebox__title{font-size:16px;margin:4px 0 8px}
.facts{border-top:3px solid var(--ink);margin-bottom:16px}
.fact{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr);gap:2px var(--gap);align-items:center;padding-block:9px;border-bottom:1px solid var(--line-3)}
.fact dt{font-size:var(--fs-meta);font-weight:800;letter-spacing:.12em;text-transform:var(--tt);color:var(--ink-mute)}
html[lang^="ko"] .fact dt,html[lang^="ja"] .fact dt,html[lang^="zh"] .fact dt{font-size:12px;letter-spacing:0}
.fact dd{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.5}
.prevnext{display:flex;justify-content:space-between;gap:12px;margin-top:20px}
.prevnext__a{display:inline-flex;align-items:center;gap:10px;min-width:0;padding:10px 0;font-size:15px;font-weight:900}
.prevnext__a small{display:block;font-size:var(--fs-meta);font-weight:800;letter-spacing:.12em;text-transform:var(--tt);color:var(--ink-mute)}
.prevnext__a--next{text-align:end}
.prevnext__a:hover span{text-decoration:underline;text-underline-offset:3px}

/* 21. 2026 PAGE ----------------------------------------------------------- */
.horsehead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:24px 40px;align-items:center}
.horsehead__copy{min-width:0}
.horsehead__art{position:relative;display:grid;place-items:center;min-height:240px}
.horsehead__gz{
  position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(96px,13vw,150px);font-weight:900;line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.5);pointer-events:none;
}
.horsehead__art .mascot{position:relative;width:150px;height:150px;rotate:-5deg}
.horsefacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:24px;border-top:1px solid var(--rule-inv)}
.horsefacts>div{min-width:0;padding:12px 12px 0;border-inline-start:1px solid var(--rule-inv)}
.horsefacts>div:first-child{border-inline-start:0;padding-inline-start:0}
.horsefacts dt{font-size:var(--fs-meta);font-weight:800;letter-spacing:.12em;text-transform:var(--tt);color:rgba(255,255,255,.55)}
html[lang^="ko"] .horsefacts dt,html[lang^="ja"] .horsefacts dt,html[lang^="zh"] .horsefacts dt{font-size:11.5px;letter-spacing:.02em}
.horsefacts dd{margin-top:5px;font-size:14px;font-weight:800;color:#fff;line-height:1.45}
.elcards{display:grid;gap:0;border-top:3px solid var(--ink)}
.shead+.elcards{border-top:0}
.elcard{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:8px 28px;padding:20px 0;border-bottom:1px solid var(--line-4)}
.elcard__head{display:flex;flex-direction:column;align-items:flex-start;gap:10px;grid-row:span 2}
.elcard__types{display:flex;gap:6px}
.elcard__types .mascot{width:44px;height:44px}
.elcard__types a{transition:transform .15s}
.elcard__types a:hover{transform:translateY(-3px)}
.elcard__who{font-size:var(--fs-meta);font-weight:800;letter-spacing:.1em;text-transform:var(--tt);color:var(--ink-mute)}
html[lang^="ko"] .elcard__who,html[lang^="ja"] .elcard__who,html[lang^="zh"] .elcard__who{font-size:12px;letter-spacing:0}
.elcard__text p{font-size:14.5px;line-height:1.8;color:#333}
.elcard__text p+p{margin-top:8px}
.next27{display:grid;justify-items:start;gap:12px}
.next27__title{font-size:clamp(24px,3.2vw,34px);font-weight:900;line-height:1.15;letter-spacing:var(--track-display);color:#fff}
.next27__lead{font-size:15px;line-height:1.75;color:rgba(255,255,255,.74);max-width:62ch}

/* 22. DOC PAGES + PROSE ---------------------------------------------------- */
.doc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,250px);gap:32px 56px;padding-block:36px 56px;align-items:start}
.doc__main{min-width:0}
.doc__side{position:sticky;top:calc(var(--header-h) + 16px);display:grid;gap:20px;min-width:0}
.sidenav{border-top:3px solid var(--ink)}
.sidenav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 0;border-bottom:1px solid var(--line-4);font-size:13.5px;font-weight:800}
.sidenav a:hover{color:var(--cyan-ink)}
.sidenav a[aria-current="page"]{color:var(--red)}
.prose{max-width:70ch;min-width:0;font-size:15px;line-height:1.85;color:#333}
.prose--big{font-size:17px;line-height:1.85;max-width:68ch}
.prose p{margin-bottom:16px}
.prose p:last-child,.prose ul:last-child,.prose ol:last-child{margin-bottom:0}
.prose a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{color:var(--cyan-ink)}
.prose strong,.prose b{font-weight:800;color:var(--ink)}
.prose h2{font-size:21px;font-weight:900;letter-spacing:-.02em;line-height:1.3;color:var(--ink);margin:34px 0 12px;padding-bottom:9px;border-bottom:2px solid var(--ink)}
.prose h3{font-size:17px;font-weight:900;line-height:1.35;color:var(--ink);margin:24px 0 8px}
.prose>h2:first-child,.prose>h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 16px;padding-inline-start:0}
.prose li{position:relative;padding-inline-start:20px;margin-bottom:7px}
.prose ul>li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:6px;background:var(--ink)}
.prose ol{counter-reset:li}
.prose ol>li{counter-increment:li}
.prose ol>li::before{content:counter(li) ".";position:absolute;left:0;top:0;font-family:var(--font-latin);font-weight:900;font-size:13px;color:var(--red)}

/* 23. EMPTY / 404 --------------------------------------------------------- */
.empty{padding-block:70px 80px;text-align:center}
.empty__in{display:grid;justify-items:center;gap:14px}
.empty__mascot{width:120px;height:120px}
.empty h1{font-size:var(--fs-page);font-weight:900;line-height:1.05;letter-spacing:var(--track-display);max-width:20ch}
.empty p{font-size:15px;color:var(--ink-body);max-width:46ch}
.empty__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}

/* 24. SHARE --------------------------------------------------------------- */
.share__title{margin-bottom:8px;font-size:var(--fs-meta);font-weight:900;letter-spacing:.14em;text-transform:var(--tt);color:var(--ink-mute)}
html[lang^="ko"] .share__title,html[lang^="ja"] .share__title,html[lang^="zh"] .share__title{font-size:12px;letter-spacing:0}
.share__row{display:flex;flex-wrap:wrap;gap:6px}
.share__btn{
  display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 12px;
  border:1px solid var(--ink);background:#fff;color:var(--ink);font-size:12px;font-weight:800;line-height:1.2;white-space:nowrap;
}
.share__btn:hover{background:var(--ink);color:#fff}
.share__btn.is-done{background:var(--ink);color:#fff}
.share__btn--copy{flex:1 1 100%;justify-content:center}
.band--ink .share__btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.band--ink .share__btn:hover{background:#fff;color:var(--ink)}

/* 25. PILLAR + METER (result page building blocks) ------------------------- */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pillar{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;text-align:center}
.pillar__label{font-size:var(--fs-meta);font-weight:900;letter-spacing:.12em;text-transform:var(--tt);color:var(--ink-mute);padding-bottom:6px;border-bottom:2px solid var(--ink)}
html[lang^="ko"] .pillar__label,html[lang^="ja"] .pillar__label,html[lang^="zh"] .pillar__label{font-size:12px;letter-spacing:0}
.pillar__tg{font-size:11.5px;font-weight:800;color:var(--ink-dim);line-height:1.3;min-height:1.3em}
.pillar__cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1;
  border:1px solid var(--el-c,var(--line-4));background:var(--el-s,#fff);color:var(--ink);
}
.pillar__cell b{font-size:clamp(26px,4vw,36px);font-weight:900;line-height:1}
.pillar__cell small{font-size:10.5px;font-weight:800;color:var(--el-i,var(--ink-dim));line-height:1.2}
.pillar--day .pillar__cell{box-shadow:inset 0 0 0 2px var(--ink)}
.pillar--day .pillar__label{color:var(--red)}
.pillar__cell--q{border-style:dashed;border-color:var(--line-6);background:var(--soft);color:var(--ink-mute)}
.pillar__hidden{display:flex;justify-content:center;gap:3px;font-size:13px;font-weight:800;min-height:1.4em}
.pillar__stage{font-size:11px;font-weight:700;color:var(--ink-dim)}
.pillar__unknown{font-size:11px;font-weight:600;color:var(--ink-dim);line-height:1.35}
.meter{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 10px}
.meter__label{font-size:13px;font-weight:800}
.meter__val{font-family:var(--font-latin);font-size:15px;font-weight:900;font-variant-numeric:tabular-nums}
.meter__bar{grid-column:1/-1;display:block;height:8px;background:var(--line-2);position:relative;overflow:hidden}
.meter__bar>i{position:absolute;inset:0 auto 0 0;width:calc(var(--v,0) * 1%);background:var(--ink)}
.meter__bar>i::after{content:"";position:absolute;right:0;top:0;bottom:0;width:6px;background:var(--pink)}
.band--ink .meter__bar,.hero .meter__bar{background:rgba(255,255,255,.18)}
.band--ink .meter__bar>i,.hero .meter__bar>i{background:#fff}

/* 26. FOOTER -------------------------------------------------------------- */
.footer{background:var(--ink);color:#fff;margin-top:auto}
.footer__in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:28px var(--gap);padding-block:46px 34px}
.footer__in>*{min-width:0}
.footer__logo{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-family:var(--font-latin);font-size:21px !important;font-weight:900;letter-spacing:-.03em;text-transform:uppercase;color:#fff !important}
.footer__logo .logo__mark{background:#fff;color:var(--ink)}
.footer p{font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.7;max-width:40ch}
.footer__note{display:flex;gap:6px;align-items:flex-start;margin-top:12px;font-size:11.5px !important;color:rgba(255,255,255,.5) !important}
.footer__note .ico{margin-top:3px}
.footer__h{
  font-size:var(--fs-meta);font-weight:900;line-height:1.4;letter-spacing:var(--track-meta);text-transform:var(--tt);
  color:#fff;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--rule-inv);
}
html[lang^="ko"] .footer__h,html[lang^="ja"] .footer__h,html[lang^="zh"] .footer__h{font-size:12px}
.footer a{display:block;font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.4;padding-block:5px}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__langs{display:flex;flex-wrap:wrap;gap:5px}
.footer__langs a{padding:5px 9px;border:1px solid rgba(255,255,255,.3);font-size:11.5px;line-height:1.3}
.footer__langs a:hover{border-color:#fff;text-decoration:none}
.footer__langs a[aria-current="true"]{background:#fff;color:var(--ink);border-color:#fff}
.footer__bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px var(--gap);padding-block:16px;
  border-top:1px solid var(--rule-inv);font-size:var(--fs-meta);font-weight:800;letter-spacing:.08em;text-transform:var(--tt);
  color:rgba(255,255,255,.48);line-height:1.6;
}

/* 27. MOTION -------------------------------------------------------------- */
@keyframes floaty{from{translate:0 0}to{translate:0 -5px}}
@keyframes boing{0%{transform:scale(1)}30%{transform:scale(1.12,.9)}55%{transform:scale(.94,1.06)}80%{transform:scale(1.03,.98)}100%{transform:scale(1)}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(20deg)}}
.mascot--float{animation:floaty 2.6s ease-in-out infinite alternate}
.mascot--d1{animation-delay:-.9s}
.mascot--d2{animation-delay:-1.7s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
}

/* icons drawn as masks */
:root{
  --ico-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 5h2.4l-.3 7h-1.8Zm1.2 11a1.4 1.4 0 1 1 0-2.8 1.4 1.4 0 0 1 0 2.8Z'/%3E%3C/svg%3E");
}

/* 28. RESPONSIVE ---------------------------------------------------------- */
@media(min-width:720px){.mobnav,.mobnav.open{display:none}}

@media(max-width:979px){
  .hero__in{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:20px 30px}
  .footer__in{grid-template-columns:1fr 1fr 1fr}
  .footer__brand{grid-column:1/-1}
  .typebody{grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:28px 30px}
}

@media(max-width:859px){
  .hero__in{grid-template-columns:minmax(0,1fr)}
  .hero__copy{max-width:640px}
  .hero__form{max-width:560px;width:100%;margin-top:30px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles--compact{grid-template-columns:repeat(5,minmax(0,1fr))}
  .numlist{grid-template-columns:minmax(0,1fr)}
  .numlist__item{display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:16px}
  .numlist__num{grid-row:span 3;font-size:52px}
  .split{grid-template-columns:minmax(0,1fr)}
  .typebody,.doc{grid-template-columns:minmax(0,1fr)}
  .typebody__side,.doc__side{position:static}
  .typehead{grid-template-columns:minmax(0,1fr) minmax(0,210px)}
  .horsehead{grid-template-columns:minmax(0,1fr) minmax(0,220px)}
  .spots{grid-template-columns:minmax(0,1fr)}
  .grid--4,.grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:719px){
  :root{--header-h:58px}
  html{scroll-padding-top:70px}
  .header__in{min-height:56px;padding-block:9px}
  .logo{font-size:16px;gap:8px}
  .logo__mark{width:30px;height:30px;font-size:12px}
  .header__cta{height:32px;padding-inline:10px;font-size:10.5px}
  .burger{display:grid}
  .nav{display:none}
  .hero__in{padding-block:30px 26px}
  .hero__lead{font-size:14.5px}
  .hero__parade{margin-top:22px;gap:10px}
  .hero__parade .mascot{width:50px;height:50px}
  .rform{padding:22px 16px 18px;box-shadow:5px 5px 0 var(--red)}
  .rform__title{font-size:21px}
  .stats{flex-wrap:wrap}
  .stats__item{flex:1 1 40%;padding:14px 12px 4px}
  .stats__item:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .stats__item:nth-child(n+3){border-top:1px solid var(--rule-inv);margin-top:12px}
  .band{padding-block:30px 34px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{min-height:0;padding:12px 11px 13px}
  .tile__mascot{width:60px;height:60px}
  .tile__han{font-size:24px;top:28px}
  .tile__name{font-size:15px}
  .horse{grid-template-columns:minmax(0,1fr)}
  .horse__art{min-height:170px;order:-1;justify-content:flex-start}
  .horse__gz{text-align:start;font-size:92px}
  .horse__art .mascot:first-of-type{width:100px;height:100px;margin-inline-start:40px}
  .horse__art .mascot:last-of-type{width:78px;height:78px}
  .ctaband__in{grid-template-columns:minmax(0,1fr)}
  .ctaband__mascots{order:-1}
  .ctaband__mascots .mascot{width:70px;height:70px}
  .ctaband__mascots .mascot:nth-child(2){width:82px;height:82px}
  .typecards{grid-template-columns:minmax(0,1fr)}
  .typecards>.typecard:nth-last-child(2){border-bottom:0}
  .typecard__link{grid-template-columns:104px minmax(0,1fr);gap:14px}
  .typecard__plate .mascot{width:78px;height:78px}
  .typecard__han{font-size:44px}
  .typecard__name{font-size:19px}
  .typehead{grid-template-columns:minmax(0,1fr)}
  .typehead__art{justify-content:flex-start}
  .typehead__plate{max-width:190px}
  .horsehead{grid-template-columns:minmax(0,1fr)}
  .horsehead__art{min-height:180px;justify-items:start}
  .horsehead__gz{justify-items:start;font-size:104px}
  .horsehead__art .mascot{width:112px;height:112px;margin-inline-start:44px}
  .horsefacts{grid-template-columns:minmax(0,1fr)}
  .horsefacts>div{border-inline-start:0;padding:10px 0;border-bottom:1px solid var(--rule-inv)}
  .elcard{grid-template-columns:minmax(0,1fr)}
  .elcard__head{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;grid-row:auto}
  .swatches{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .swatch__chip{height:54px}
  .grid--2{grid-template-columns:minmax(0,1fr)}
  .typebody__summary p{font-size:16.5px}
  .prose--big{font-size:16px}
  .footer__in{grid-template-columns:1fr 1fr;padding-block:34px 26px}
  .footer__brand,.footer__langs-col{grid-column:1/-1}
  .phead__in{padding-block:24px 28px}
  .faq__a{padding-left:4px}
  .numlist__item{grid-template-columns:62px minmax(0,1fr)}
  .numlist__num{font-size:44px}
}

@media(max-width:479px){
  :root{--gutter:14px}
  .rform__head{padding-inline-end:52px}
  .rform__peek{width:54px;height:54px;top:-40px;right:-4px}
  .dsel{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:5px}
  .select{padding-inline:9px 24px;background-position:right 7px center;background-size:11px;font-size:14.5px}
  .tile__tag{-webkit-line-clamp:2;line-clamp:2}
  .tiles--compact{grid-template-columns:repeat(5,minmax(0,1fr))}
  .tiles--compact .tile{padding:10px 2px 8px}
  .tiles--compact .tile__mascot{width:38px;height:38px}
  .tiles--compact .tile__name{font-size:10.5px}
  .typecard__link{grid-template-columns:88px minmax(0,1fr);gap:12px}
  .typecard__plate .mascot{width:66px;height:66px}
  .langbar__menu{min-width:170px}
  .share__btn{padding:7px 10px}
}

/* phones: logo + CTA + burger never wrap to a second row — also before the web font swaps in (or when the CDN fails)
   and the fallback font is wider: the CTA gives way first (its arrow, then its label, is clipped) */
@media(max-width:719px){
  .header__in{flex-wrap:nowrap}
  .logo{flex-shrink:0}
  .header__cta{min-width:0;overflow:hidden}
}

/* 360–389px phones: the GANGNAM SAJU wordmark + CTA + burger must stay on one row (the CTA keeps its label, drops the arrow) */
@media(max-width:389px){
  .logo{gap:6px;letter-spacing:-.04em}
  .logo__word{font-size:15px}
  .header__cta{padding-inline:8px}
  .header__cta .ico{display:none}
}

@media(max-width:359px){
  .logo__word{font-size:15px}
  .header__cta{display:none}
  .burger{margin-inline-start:auto}
}

/* 28b. LINE BREAKING ------------------------------------------------------ */
/* balanced headings (no one-word last lines); Japanese: phrase-aware breaks (Chrome 119+, e.g. 「わたしの／ビューティー四柱」
   instead of 「ビューテ／ィー」) and strict kinsoku everywhere (no small kana or prolonged-sound mark at a line start) */
h1,h2,h3{text-wrap:balance}
html[lang^="ja"] :is(h1,h2,h3,.hero__title-2,.ctaband__title,.rform__title){word-break:auto-phrase}
html[lang^="ja"] body{line-break:strict}

/* 29. PRINT --------------------------------------------------------------- */
@media print{
  .topbar,.langbar,.burger,.mobnav,.nav,.header__cta,.footer__langs,.share,.ctaband,.rform{display:none !important}
  .header{position:static}
  .hero,.footer,.band--ink,.phead{background:#fff !important;color:#000 !important}
  .hero h1,.phead h1,.band--ink h2{color:#000 !important}
}