/* Starlit Scholar — the reading (home page, revealed by card.js after the gate).
   Ha-on stays in the star-reader's study and presents the chart, one part at a time:
   who you are → your four pillars → your five elements → your 2026 → where to go next. */
.rd{position:relative;isolation:isolate;padding:0 0 80px;opacity:0;transition:opacity .4s ease;--dmc:var(--amber)}
.rd.open{opacity:1}
.rd[hidden]{display:none}

/* the study behind everything, fading into a starry night */
.rd-sky{position:absolute;inset:0 0 auto;height:min(110vh,980px);z-index:-2;overflow:hidden}
.rd-sky img{width:100%;height:100%;object-fit:cover;object-position:46% 40%;opacity:.55;filter:blur(1.5px) saturate(.9)}
.rd-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,13,.35) 0,rgba(7,8,13,.7) 45%,var(--night) 100%),linear-gradient(90deg,rgba(7,8,13,.1) 0,rgba(7,8,13,.6) 70%)}
.rd::before{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(1px 1px at 12% 22%,rgba(242,207,138,.7),transparent),radial-gradient(1px 1px at 78% 31%,rgba(242,207,138,.55),transparent),
    radial-gradient(1.5px 1.5px at 64% 58%,rgba(242,207,138,.5),transparent),radial-gradient(1px 1px at 31% 71%,rgba(242,207,138,.5),transparent),
    radial-gradient(1px 1px at 88% 84%,rgba(242,207,138,.45),transparent),radial-gradient(60% 40% at 80% 60%,rgba(60,74,110,.18),transparent 70%);
  background-size:420px 520px,420px 520px,420px 520px,420px 520px,420px 520px,auto}

/* the hanji doors slide open when the chart arrives */
/* the chart simply fades in (0.4 s) — no plain paper doors */
.doors{display:none}
.doors i{flex:1;background:var(--paper);background-image:url(/img/hanji.webp),repeating-linear-gradient(90deg,var(--wood-frame) 0 3px,transparent 3px 22px),linear-gradient(var(--wood-frame),var(--wood-frame)) 0 22%/100% 4px no-repeat,linear-gradient(var(--wood-frame),var(--wood-frame)) 0 78%/100% 4px no-repeat;
  background-size:320px,auto,auto,auto;background-blend-mode:multiply;border:14px solid var(--wood-frame);transition:transform 1.25s cubic-bezier(.65,0,.25,1) .25s}
.rd.open .doors i:first-child{transform:translateX(-101%)}
.rd.open .doors i:last-child{transform:translateX(101%)}

/* stage: Ha-on on the left (desktop), the chart on the right */
.rd-stage{max-width:1240px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start}
.rd-reader{position:sticky;top:64px;height:calc(100vh - 64px);max-height:900px;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.rd-reader::before{content:"";position:absolute;left:50%;top:18%;width:min(420px,90%);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(225,232,250,.16),rgba(150,175,230,.06) 60%,transparent)}
.haon{position:relative;width:min(100%,520px);aspect-ratio:900/1002}
.haon img{width:100%;height:100%;object-fit:contain;object-position:bottom center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 80%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 80%,transparent);mask-composite:intersect;
  filter:brightness(.93) contrast(1.04) saturate(.95) drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.rd-main{padding-top:clamp(104px,12vw,150px);min-width:0;max-width:680px}

/* Ha-on's lines */
.say{position:relative;margin:0 0 18px;padding:2px 0 2px 18px;border-left:2px solid rgba(226,195,132,.7);font:italic 300 clamp(18px,1.7vw,21px)/1.5 var(--serif);color:#EADFC8;max-width:34em}
.say::before{content:"Ha-on";display:block;margin-bottom:4px;font:600 13px/1.2 var(--sans);font-style:normal;letter-spacing:.04em;color:var(--amber)}

/* who you are */
.rd .tag{font:600 14px/1.2 var(--sans);color:var(--amber);margin-bottom:18px}
.rd-who{display:flex;align-items:center;gap:clamp(18px,3vw,30px);margin-bottom:26px}
.rd-moon{flex:none;width:clamp(112px,13vw,150px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(60% 60% at 50% 40%,color-mix(in srgb,var(--dmc) 18%,#1A1C26) 0,#0E1018 75%);
  box-shadow:0 0 0 8px var(--wood-frame),0 0 0 9px rgba(226,195,132,.45),0 20px 70px -10px color-mix(in srgb,var(--dmc) 40%,transparent)}
.rd-moon .hz{font-size:clamp(64px,7.4vw,88px);line-height:1;text-shadow:0 0 30px color-mix(in srgb,var(--dmc) 55%,transparent)}
.rd-h{font:300 clamp(36px,4.6vw,58px)/1.04 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.rd-h .hz{display:none}
.rd-kind{margin-top:8px;font-size:16px;color:var(--moon)}
.rd-desc{margin-top:20px;font:300 clamp(19px,1.8vw,22px)/1.55 var(--serif);color:var(--ink);max-width:32em}
.rd-morelink{margin-top:14px}
.rd-morelink a{color:var(--amber);font-weight:600;text-underline-offset:4px}
.rd-compare{margin-top:18px;font-size:15.5px;line-height:1.6;border-left:2px solid var(--amber);padding-left:14px;color:#E3DCCD}
.rd-compare b{color:var(--amber)}

/* the parts that follow */
.rd-part{position:relative;margin-top:clamp(64px,8vw,96px);padding-top:clamp(40px,5vw,56px)}
.rd-part::before{content:"";position:absolute;left:0;top:0;width:min(320px,70%);height:10px;opacity:.4;
  background:repeating-linear-gradient(90deg,var(--amber) 0 1px,transparent 1px 12px),linear-gradient(var(--amber),var(--amber)) 0 0/100% 1px no-repeat,linear-gradient(var(--amber),var(--amber)) 0 100%/100% 1px no-repeat}
.rd-part h3{font:300 clamp(28px,3.2vw,40px)/1.1 var(--serif);letter-spacing:-.01em;margin:6px 0 18px}
.rd-plain{font-size:16px;line-height:1.7;color:#D9D3C6;max-width:36em;margin-bottom:22px}

/* four pillars on a lacquered star-chart board, sealed */
.rd-board{position:relative;padding:26px clamp(14px,2.6vw,28px) 20px;border-radius:3px;
  background:radial-gradient(1px 1px at 20% 30%,rgba(242,207,138,.5),transparent),radial-gradient(1px 1px at 70% 12%,rgba(242,207,138,.4),transparent),radial-gradient(1px 1px at 86% 70%,rgba(242,207,138,.4),transparent),
    linear-gradient(180deg,#151821,#0c0e15);background-size:180px 160px,220px 190px,200px 170px,auto;
  box-shadow:inset 0 0 0 1px rgba(226,195,132,.55),inset 0 0 0 6px #0a0b10,inset 0 0 0 7px rgba(226,195,132,.22),0 30px 80px -20px rgba(0,0,0,.7)}
.rd-seal{position:absolute;top:-14px;right:18px;padding:7px 6px;writing-mode:vertical-rl;background:var(--seal);color:#F7E9D2;font-size:14px;letter-spacing:.1em;line-height:1;border-radius:2px;
  box-shadow:inset 0 0 0 1.5px rgba(247,233,210,.35),0 6px 14px rgba(0,0,0,.4);transform:rotate(3deg)}
.rd-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1vw,12px)}
.pc{display:flex;flex-direction:column;align-items:center;padding:14px 4px 10px;border-radius:2px;border:1px solid rgba(226,195,132,.16);background:rgba(7,8,13,.45);min-width:0;text-align:center}
.pc.me{border-color:var(--amber);background:rgba(201,164,92,.08);box-shadow:0 0 36px -8px rgba(201,164,92,.4)}
.pc small{font:600 12.5px/1 var(--sans);color:var(--moon);margin-bottom:10px}
.pc.me small{color:var(--amber)}
.pc b{font-weight:400;font-size:clamp(38px,4.4vw,54px);line-height:1.1}
.pc b.q{color:#6E675C;font-family:var(--serif)}
.pc i{font-style:normal;font-size:12px;line-height:1.35;color:var(--moon);margin:3px 0 10px;overflow-wrap:anywhere}
.pc i .mn{display:block;font-size:13px;color:var(--ink);font-weight:600}
.rd-key{list-style:none;padding:16px 4px 0;margin:16px 0 0;border-top:1px solid rgba(226,195,132,.16);display:grid;gap:6px;font-size:14.5px;line-height:1.5;color:var(--moon)}
.rd-key b{color:var(--ink);font-weight:600;margin-right:6px}
.rd-howbox{margin-top:14px;border:1px dashed rgba(201,191,174,.3);border-radius:3px;padding:0 16px}
.rd-howbox summary{cursor:pointer;padding:13px 0;font-size:15px;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:12px}
.rd-howbox summary::-webkit-details-marker{display:none}
.rd-howbox summary::after{content:"+";color:var(--amber);font-weight:400}
.rd-howbox[open] summary::after{content:"−"}
.rd-how{padding:0 0 14px;font-size:14.5px;line-height:1.65;color:var(--moon)}
.rd-how b{color:var(--ink);font-weight:600}
.rd-how .approx{color:var(--amber)}

/* five elements */
.rd-elements{display:grid;gap:18px}
.rd-bars{padding:18px 20px;border:1px solid var(--line);border-radius:3px;background:rgba(16,19,28,.6)}
.bar{display:grid;grid-template-columns:96px 1fr 22px;gap:12px;align-items:center;margin:9px 0;font-size:15px;color:var(--ink)}
.bar>div{height:8px;border-radius:8px;background:rgba(201,191,174,.12);overflow:hidden}
.bar i{display:block;height:100%;border-radius:8px;filter:saturate(.7)}
.bar em{font-style:normal;color:var(--moon);text-align:right}
.rd-bars .note{font-size:15px;color:#D9D3C6;margin-top:12px;line-height:1.6}
.rd-balance p{font-size:16px;line-height:1.65;color:#E3DCCD;margin:0 0 12px;max-width:36em}
.rd-balance b{color:var(--ink)}
.rd-balance .lk{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--k);margin:0 6px -1px 2px;box-shadow:0 0 0 2px rgba(255,255,255,.25)}

/* 2026: lit like a lantern page */
.rd-y26{padding:24px 26px;border-radius:3px;font:300 clamp(19px,1.9vw,22px)/1.6 var(--serif);color:var(--paper-ink);max-width:34em;
  background:var(--paper) url(/img/hanji.webp);background-size:320px;background-blend-mode:multiply;
  box-shadow:0 0 0 8px var(--wood-frame),0 0 0 9px rgba(226,195,132,.35),0 30px 80px -20px rgba(230,160,80,.35)}

/* keep going */
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.next-grid>.nx-dm{grid-column:1/-1}
.nx{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px;border:1px solid var(--line);border-radius:3px;background:rgba(16,19,28,.6);text-decoration:none;color:var(--ink);transition:border-color .2s,background .2s;min-width:0}
a.nx:hover{border-color:var(--amber);background:rgba(16,19,28,.85)}
.nx b{font:600 16.5px/1.3 var(--sans)}
.nx span:not(.nx-glyph){font-size:14.5px;line-height:1.55;color:var(--moon)}
.nx-glyph{display:block;font-size:40px;line-height:1;height:44px;color:var(--amber);margin-bottom:8px}
.nx-glyph svg{width:44px;height:44px}
.nx-dm{background:var(--paper) url(/img/hanji.webp);background-size:320px;background-blend-mode:multiply;color:var(--paper-ink);border-color:transparent}
a.nx-dm:hover{background-color:#F3E8CE;border-color:var(--seal)}
.nx-dm span:not(.nx-glyph){color:#4A3C2A}
.nx-dm .nx-glyph{color:var(--seal);font-size:48px;height:52px}
.nx-card{flex-direction:row;gap:16px;align-items:flex-start}
.nx-card>div{display:flex;flex-direction:column;gap:6px;min-width:0}
#rd-card{flex:none;width:86px;border-radius:2px;box-shadow:0 0 0 1px rgba(226,195,132,.35),0 16px 36px rgba(0,0,0,.55)}
#rd-card:not([src]){visibility:hidden}
.rd-cardbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rd-btn{min-height:46px;padding:0 16px;border-radius:6px;border:1px solid rgba(201,191,174,.4);background:transparent;color:var(--ink);font:600 14.5px/1 var(--sans);cursor:pointer}
.rd-btn:hover{border-color:var(--ink)}
.nx>.rd-btn{margin-top:10px;align-self:flex-start}
.nx-full{border-color:rgba(201,164,92,.5);background:linear-gradient(180deg,rgba(201,164,92,.12),rgba(16,19,28,.6))}
.rd-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:12px;padding:0 20px;border-radius:6px;background:var(--seal);color:#FBEFD8;font:600 15px/1.2 var(--sans);text-decoration:none;text-align:center;box-shadow:inset 0 0 0 2px rgba(251,239,216,.18)}
.rd-cta:hover{background:#932D23}
.rd-sample{margin-top:8px;color:var(--amber);font-size:14.5px;font-weight:600;text-underline-offset:4px}
.rd-disc{margin-top:40px;font-size:12.5px;color:#8E8676}

/* tablets and phones: Ha-on stands at the top of the page, then speaks beside each part */
@media (max-width:1023px){
  .rd-stage{grid-template-columns:1fr;gap:0}
  .rd-reader{position:absolute;top:56px;right:4vw;left:auto;width:min(66vw,420px);height:auto;max-height:none;z-index:-1;opacity:1}
  .rd-reader::before{top:8%}
  .haon img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%),linear-gradient(180deg,transparent,#000 10%,#000 55%,transparent 96%);mask-image:linear-gradient(90deg,transparent,#000 22%),linear-gradient(180deg,transparent,#000 10%,#000 55%,transparent 96%)}
  .rd-main{max-width:none;padding-top:min(76vw,430px)}
  .say{padding-left:56px;border-left:0;min-height:44px}
  .say::before{position:absolute;left:0;top:2px;width:42px;height:42px;margin:0;border-radius:50%;content:"";
    background:#141720 url(/img/ha-on.webp) 50% 12%/cover no-repeat;box-shadow:0 0 0 1px rgba(226,195,132,.7),0 0 0 3px #0b0806}
}
@media (max-width:759px){
  .rd-who{gap:16px}
  .rd-moon{width:96px;box-shadow:0 0 0 6px var(--wood-frame),0 0 0 7px rgba(226,195,132,.45)}
  .rd-moon .hz{font-size:58px}
  .rd-h{font-size:clamp(30px,8.6vw,38px)}
  .rd-pillars{gap:5px}
  .pc{padding:12px 1px 8px}
  .pc b{font-size:34px}
  .pc i{font-size:11px}
  .pc i .mn{font-size:12px}
  .rd-board{padding:24px 7px 16px}
  .rd-key{font-size:14px}
  .next-grid{grid-template-columns:1fr}
  .rd-y26{padding:20px}
  .bar{grid-template-columns:84px 1fr 20px;font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.doors{display:none}}
@media (min-width:1024px){.say:not([data-line=who])::before{display:none}}

/* ════ the reading as one scene (owner 11/05 15:45): not the study again — the star-reader's open
   observatory room (img/obs-*: the night sky through the open doors, armillary sphere, candle on the
   right). It stays put while the chart scrolls (sticky, no fixed layers). Ha-on is his own art cut out
   (img/haon-cut-*, nothing redrawn), dimmed to the room, standing at the edge behind the words. */
.rd-sky{inset:0;height:auto;overflow:visible}
.rd-sky::after{display:none}
.rd-sky picture{position:sticky;top:0;display:block;height:100vh;overflow:hidden}
.rd-sky img{object-position:50% 46%;opacity:1;filter:brightness(.5) saturate(.85) blur(1px);transform:scale(1.02)}
.rd-sky picture::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,8,13,.3) 0,rgba(7,8,13,.5) 34%,rgba(7,8,13,.84) 52%,rgba(7,8,13,.9) 100%),
    radial-gradient(120% 90% at 30% 55%,transparent 45%,rgba(3,4,8,.6) 100%),linear-gradient(180deg,rgba(7,8,13,.5) 0,rgba(7,8,13,0) 18%,rgba(7,8,13,0) 80%,rgba(7,8,13,.6) 100%)}
.rd-reader::before{display:none}
.rd-reader{justify-content:flex-end}
.haon{width:min(118%,680px,calc((100vh - 64px) * .898));flex:none}
.haon img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 74%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 74%,transparent 100%);mask-composite:intersect;
  filter:brightness(.72) contrast(.95) saturate(.88)}
/* phones and tablets: only his head and shoulders at the top, faint, melting into the dark before the words */
@media (max-width:1023px){
  .rd-sky img{filter:brightness(.45) saturate(.85) blur(1px)}
  .rd-sky picture::after{background:linear-gradient(180deg,rgba(7,8,13,.35) 0,rgba(7,8,13,.6) 35%,rgba(7,8,13,.86) 55%,rgba(7,8,13,.9) 100%)}
  .rd-reader{top:44px;left:50%;right:auto;width:min(100vw,540px);transform:translateX(-50%);opacity:1}
  .haon{width:100%}
  /* 11/05 편집장 84: he is fully opaque (the lattice and stars no longer show through his face); the dimming is a filter instead */
  .haon img{filter:brightness(.6) contrast(.95) saturate(.88)}
  .haon img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 40%,transparent 70%);
    mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 40%,transparent 70%)}
}

/* ── 11/05 편집장 83 */
/* wide screens: the armillary sphere sat right behind Ha-on — the room is shifted right (and a touch larger) so the
   sphere stands in the gap between him and the words */
@media (min-width:1024px){
  .rd-sky img{transform:translateX(14.5vw) scale(1.24);transform-origin:50% 60%}
  .rd-sky picture::after{background:linear-gradient(90deg,rgba(7,8,13,.3) 0,rgba(7,8,13,.36) 34%,rgba(7,8,13,.44) 45%,rgba(7,8,13,.84) 56%,rgba(7,8,13,.9) 100%),
    radial-gradient(120% 90% at 30% 55%,transparent 45%,rgba(3,4,8,.6) 100%),linear-gradient(180deg,rgba(7,8,13,.5) 0,rgba(7,8,13,0) 18%,rgba(7,8,13,0) 80%,rgba(7,8,13,.6) 100%)}
}
/* phones and tablets: the bright night-sky door no longer frames his head like a portrait, and the room
   itself shows in the top third (overlay .35 there) before the dark under the words */
@media (max-width:1023px){
  .rd-sky img{object-position:0% 40%;filter:brightness(.5) saturate(.85) blur(1px)}
  .rd-sky picture::after{background:linear-gradient(180deg,rgba(7,8,13,.35) 0,rgba(7,8,13,.35) 35%,rgba(7,8,13,.82) 55%,rgba(7,8,13,.9) 100%)}
  /* his small speaking mark uses the same cut-out picture already on screen (no extra ha-on.webp download) */
  .say::before{background:#141720 50% 18%/170% auto no-repeat;background-image:url(/img/haon-cut-m.webp?v=11052200);
    background-image:image-set(url(/img/haon-cut-m.avif?v=11052200) type("image/avif"),url(/img/haon-cut-m.webp?v=11052200) type("image/webp"))}
}
@media (min-width:760px) and (max-width:1023px){
  .say::before{background-image:url(/img/haon-cut-d.webp?v=11052200);
    background-image:image-set(url(/img/haon-cut-d.avif?v=11052200) type("image/avif"),url(/img/haon-cut-d.webp?v=11052200) type("image/webp"))}
}

/* ── 11/05 편집장 84 */
/* tablets 760-1023: the lattice window sat right behind his head; the room slides so the dim night sky between the
   doors is behind him and the lattice stays off to the left */
@media (min-width:760px) and (max-width:1023px){.rd-sky img{object-position:38% 40%}}
/* phones: the room barely showed (only sky); the right lattice door now stands beside him, clear of his face */
@media (max-width:759px){.rd-sky img{object-position:85% 40%}}

/* 11/05 편집장 78 (AI 검수 1회차) */
/* once the chart is open, the "Haven't opened your chart yet?" line is no longer true */
html:has(#reading.open) .again{display:none}
/* tablets: the starry sky no longer twinkles through around his hand; phones: the italic line under his face sits on a darker band */
@media (max-width:1023px){
  .rd-reader::after{content:"";position:absolute;inset:4% -8% 18%;z-index:-1;pointer-events:none;
    background:radial-gradient(50% 50% at 50% 46%,rgba(7,8,13,.9) 0,rgba(7,8,13,.75) 55%,rgba(7,8,13,0) 100%)}
}
@media (max-width:759px){
  .say{text-shadow:0 1px 2px rgba(7,8,13,.95),0 0 14px rgba(7,8,13,.9),0 0 28px rgba(7,8,13,.75)}
}
/* 11/05 AI 검수 2회차 */
/* the gat brim tips were faded by the side/top masks, so the lattice showed through them: the solid zone now reaches the brim,
   and he is a touch brighter so the desk and props read */
@media (max-width:1023px){
  .haon img{filter:brightness(.7) contrast(.95) saturate(.88);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,#000 0,#000 40%,transparent 70%);
    mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,#000 0,#000 40%,transparent 70%)}
}
@media (min-width:760px) and (max-width:1023px){.haon img{filter:brightness(.72) contrast(.95) saturate(.88)}}
@media (min-width:1024px){
  .haon img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 94%,transparent 100%),linear-gradient(180deg,#000 0,#000 74%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 94%,transparent 100%),linear-gradient(180deg,#000 0,#000 74%,transparent 100%)}
}
/* sharp phones pick the -d portrait for <img>; the small speaking mark now uses that same file (no second download) */
@media (max-width:759px) and (min-resolution:1.5dppx){
  .say::before{background-image:url(/img/haon-cut-d.webp?v=11052200);
    background-image:image-set(url(/img/haon-cut-d.avif?v=11052200) type("image/avif"),url(/img/haon-cut-d.webp?v=11052200) type("image/webp"))}
}
/* 11/05 AI 검수 3회차 */
/* 1024-1439: he overflowed the left edge (brim and hand cut off); he now stays inside the screen */
@media (min-width:1024px) and (max-width:1439px){.haon{width:min(106%,680px,calc((100vh - 64px) * .898))}}
/* big screens (1600+): the page grows with the screen, small print one step larger */
@media (min-width:1600px){
  .rd-stage{max-width:1420px}
  .rd-main{max-width:760px}
  .rd-plain,.rd-balance,.rd-kind,.rd-morelink{font-size:17.5px}
  .rd-key,.rd-how,.rd-compare{font-size:16.5px}
  .rd-main .note{font-size:16.5px}
  .rd-desc,.rd-y26{font-size:24px}
  .say{font-size:23px}
}
/* 11/06 하온 검수 92 */
/* phones and tablets: more of him shows before he melts into the dark (solid to 58%, gone by 85%) */
@media (max-width:1023px){
  .haon img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,#000 0,#000 58%,transparent 85%);
    mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,#000 0,#000 58%,transparent 85%)}
}
/* wide screens (1440+): his outer edges were a hard cut-out line against the room; they now fade softly into it */
@media (min-width:1440px){
  .haon img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 70%,transparent 98%);
    mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 70%,transparent 98%)}
}