/*! UPINTER v4.2 · detail pages · 2026-10-19 (노션 「피드백2」 · 「261012 회의록」: 마지막 섹션 가운데 정렬 · 도쿄 팝업 벽면 · 구분선 #262626)
   ---- v4.1 ----
   A detail page is an ordinary page now: it opens in this window (no sheet over the home, no ×), its chapters are
   read top to bottom (no sideways strip), pictures are plain rectangles (no arches, no circles, one per chapter), and
   no picture develops in a circle. Black like the home; the footer is the white one. Layout: shared/site.css. */

.detail .ch{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:28px;align-items:start;
  padding:var(--pad) max(var(--gx),calc((100% - var(--max)) / 2));border-top:1px solid var(--rule);min-height:100vh;min-height:100svh;align-content:center}
.detail .ch:first-child{border-top:0}
.detail .ch.tone-dark{background:var(--ink2)}
.detail .ch > *{grid-column:1 / -1;min-width:0}

/* head: label + one headline (+ lead) */
.detail .ch-head{grid-column:1 / span 6}
.detail .ch-what .ch-head{grid-column:1 / span 7}
.detail .ch-head .h1{font-size:clamp(38px,4.6vw,76px)}
.detail .ch-head .h2{font-size:clamp(30px,3.4vw,56px)}
.detail .ch-head .lead{max-width:36em}
.detail .ch .basis{grid-column:1 / span 7;margin-top:0}
.label .sub{font-weight:600;opacity:.72;margin-left:4px}

/* one picture per chapter, at the right, a 650:800 rectangle */
/* its width is a share of its own grid column (columns 8–12, never wider than 650px or than the window's height allows), so the
   picture scales with the window and can never grow into the copy at the left (columns 1–7); the height follows the ratio */
.detail .art{grid-column:8 / span 5;grid-row:1 / span 3;align-self:center;justify-self:end;position:relative;width:min(100%,650px,calc((100svh - 2 * var(--pad)) * 650 / 800))}
.detail .art .frame{--ar:650 / 800;width:100%}
.detail .art .frame.wide{--ar:1600 / 790}
.detail .art .cap{margin-top:12px}
.detail .art .scr{display:block;margin:0;overflow:hidden;border-radius:6px;background:#fff;outline:1px solid var(--line)}
.detail .art .scr img{display:block;width:100%;height:auto}
.detail .logo-card{display:grid;place-items:center;aspect-ratio:4 / 3;margin:0;border:1px solid var(--line);background:var(--ink)}
.detail .logo-card img{width:min(60%,300px);height:auto;filter:brightness(0) invert(1)}

/* a wall of pictures behind a chapter (the Tokyo pop-up): the copy sits on a dark gradient in front of it */
.detail .ch-wall{overflow:hidden;isolation:isolate}
.detail .pwall{position:absolute;z-index:-1;inset:0 0 0 30%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;padding:10px 0}
.detail .pwall img{width:100%;height:100%;object-fit:cover;display:block}
.detail .pwall img:first-child{grid-row:1 / span 2}
.detail .pwall::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink2) 0,rgba(27,26,29,.9) 22%,rgba(27,26,29,.5) 62%,rgba(27,26,29,.32) 100%),linear-gradient(180deg,var(--ink2) 0,rgba(27,26,29,0) 22%,rgba(27,26,29,0) 78%,var(--ink2) 100%)}

/* key numbers (what) and big numbers (proof) */
.detail .keys,.detail .big{grid-column:1 / span 7;display:flex;flex-wrap:wrap;gap:18px clamp(28px,4vw,64px);margin:12px 0 0;padding:0;list-style:none}
.detail .keys .n,.detail .big .n{display:block;font-size:clamp(34px,3.4vw,58px);font-weight:820;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.detail .big .n{font-size:clamp(44px,5vw,88px)}
.detail .keys li:first-child .n,.detail .big li:first-child .n{color:var(--brand)}
.detail .keys .t,.detail .big .t{display:block;font-size:14px;font-weight:600;margin-top:10px;color:var(--t2)}

/* AX MD: the key numbers are centred; the growth rows read as one table, left aligned (logo · number · basis — 노션 261019VER) */
[data-page="md"].detail .keys{justify-content:center;text-align:center}
[data-page="md"].detail .grow{max-width:860px}

/* cards */
.detail .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin:12px 0 0;padding:0;list-style:none}
.detail .cards.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.detail .cards li{display:flex;flex-direction:column;gap:8px;padding:24px 22px 22px;border:1px solid var(--line);background:var(--ink2)}
.detail .ch.tone-dark .cards li{background:var(--ink)}
.detail .cards .ico{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);margin-bottom:16px}
.detail .cards .ico svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.detail .cards .ico .a{stroke:var(--brand)}
.detail .cards b{font-size:clamp(18px,1.4vw,22px);font-weight:780;letter-spacing:-.02em}
.detail .cards span{font-size:14.5px;line-height:1.6;color:var(--t2)}
.detail .cards small{margin-top:auto;padding-top:6px;font-size:12.5px;font-weight:650;color:var(--brand)}

/* steps on a line (a real sequence: the numbers stay) */
.detail .steps{display:grid;grid-template-columns:repeat(var(--sn,3),minmax(0,1fr));gap:clamp(16px,2vw,32px);margin:12px 0 0;padding:36px 0 0;list-style:none;position:relative;counter-reset:st}
.detail .steps::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line)}
.detail .steps li{position:relative;counter-increment:st}
.detail .steps li::before{content:counter(st);position:absolute;top:-36px;left:0;width:20px;height:20px;border-radius:2px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center}
.detail .steps em{display:block;font-style:normal;font-size:13px;font-weight:650;color:var(--brand);margin-bottom:6px}
.detail .steps b{display:block;font-size:clamp(20px,1.7vw,28px);font-weight:800;letter-spacing:-.03em}
.detail .steps span{display:block;font-size:14.5px;line-height:1.6;color:var(--t2);margin-top:8px;max-width:30ch}
.detail .chips{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0;list-style:none;font-size:13.5px;color:var(--t2)}
.detail .chips li{padding:7px 12px;border:1px solid var(--line);border-radius:2px}
.detail .chips b{color:#fff;margin-right:6px}
.detail .flow{display:flex;flex-wrap:wrap;gap:6px 0;margin:20px 0 0;padding:0;list-style:none;font-size:14px;font-weight:650}
.detail .flow li:not(:last-child)::after{content:"→";margin:0 10px;color:var(--t3)}

/* plans (AX MD) */
.detail .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin:12px 0 0;padding:0;list-style:none}
.detail .plans li{display:flex;flex-direction:column;gap:6px;padding:24px 22px;border:1px solid var(--line);background:var(--ink2)}
.detail .plans li.hot{border-color:var(--brand)}
.detail .plans b{font-size:18px;font-weight:800}
.detail .plans em{font-style:normal;font-size:13px;font-weight:650;color:var(--brand)}
.detail .plans span{font-size:14.5px;line-height:1.6;color:var(--t2);margin-top:4px}
.detail .plans small{margin-top:auto;padding-top:10px;font-size:15px;font-weight:750}

/* growth rows (AX MD proof) */
.detail .grow{grid-column:1 / span 9;margin:12px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.detail .grow li{position:relative;display:grid;grid-template-columns:130px auto 1fr;align-items:center;gap:18px;padding:12px 0;border-top:1px solid var(--line)}
.detail .grow img{height:30px;width:auto;max-width:120px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
.detail .grow b{font-size:clamp(22px,2vw,32px);font-weight:820;letter-spacing:-.03em}
.detail .grow span{font-size:13px;color:var(--t3)}

/* start: centred like the home inquiry — no picture; the boxes keep their shape and sit in the middle */
.detail .ch-start{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(36px,6vh,56px);min-height:100svh;padding-top:clamp(84px,9vh,160px);padding-bottom:clamp(84px,9vh,160px)}
.detail .ch-start .ch-head{width:min(100%,780px);display:flex;flex-direction:column;align-items:center}
.detail .ch-start .ch-head .h2{font-size:clamp(34px,4.4vw,72px)}
.detail .ch-start .lead{margin-inline:auto;text-align:center}
.detail .ch-start .acts,.detail .ch-start .flow{justify-content:center}
.detail .ch-start .reach{flex-direction:column;align-items:center;gap:6px;margin:clamp(24px,4vh,36px) 0 0;font-size:clamp(17px,1.5vw,22px)}
.detail .ch-start .reach a{border-bottom:0}
.detail .ch-start > .reach{margin:0}
.detail .ch-start .doors{width:min(100%,880px);text-align:left}
.detail .ch-start .doors{grid-column:auto;grid-row:auto}
.detail .ch-start .ch-head{grid-column:auto}
.detail .doors{grid-column:7 / span 6;grid-row:1 / span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.detail .door{display:flex;flex-direction:column;gap:10px;min-height:clamp(220px,32vh,300px);padding:24px 22px;text-decoration:none;border:1px solid var(--line);background:var(--ink2);transition:border-color .2s}
.detail .door:hover{border-color:var(--brand)}
.detail .door b{font-size:clamp(22px,1.8vw,28px);font-weight:800}
.detail .door b small{font-size:12px;font-weight:650;color:var(--t3);margin-left:6px}
.detail .door span{font-size:14.5px;line-height:1.6;color:var(--t2)}
.detail .door em{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;height:44px;padding:0 18px;font-style:normal;font-weight:700;font-size:15px;background:var(--brand);color:#fff;transition:background-color .2s,color .2s}
.detail .door:hover em{background:#fff;color:var(--k1)}
.detail .door + .door em{background:#fff;color:var(--k1)}
.detail .door + .door:hover em{background:var(--brand);color:#fff}
.detail .door.door-scan{grid-column:1 / -1;min-height:0;gap:6px;padding:18px 22px}
.detail .door.door-scan em{background:transparent;color:var(--brand);padding:0;height:auto;border-bottom:1px solid currentColor}
.detail .reach{display:flex;flex-wrap:wrap;gap:6px 22px;margin:22px 0 0;font-size:15px;font-weight:650}
.detail .reach a{text-decoration:none;border-bottom:1px solid var(--line)}
.detail .reach a:hover{color:var(--brand)}
.detail .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* questions */
.detail .ch-faq .ch-head{grid-column:1 / span 5}
.detail .faq{grid-column:7 / span 6;grid-row:1 / span 2;display:grid;border-top:1px solid var(--line)}
.detail .faq details{border-bottom:1px solid var(--line)}
.detail .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 2px}
.detail .faq summary::-webkit-details-marker{display:none}
.detail .faq summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.detail .faq details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.detail .faq h3{margin:0;font-size:clamp(16px,1.25vw,19px);font-weight:750;line-height:1.45}
.detail .faq p{margin:0;padding:0 2px 22px;font-size:15px;line-height:1.7;color:var(--t2);max-width:62ch}

/* contact: copy left, form right (white fields); channels + offices */
.detail .ch-inquiry .ch-head{grid-column:1 / span 5;grid-row:1 / span 2}
.detail .ch-inquiry .ch-head .reach{margin-top:26px;font-size:16px}
.detail .ch-inquiry .fwrap{grid-column:7 / span 6;grid-row:1 / span 2}
.detail .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.detail .form .f{display:flex;flex-direction:column;gap:6px;min-width:0}
.detail .form .f.full{grid-column:1 / -1}
.detail .form label{font-size:13.5px;font-weight:650}
.detail .form label small{color:var(--t3);font-weight:600;margin-left:4px}
.detail .form input,.detail .form select,.detail .form textarea{font:inherit;font-size:16px;padding:12px 13px;border:1px solid transparent;border-radius:2px;background:#fff;color:var(--k1);min-width:0}
.detail .form textarea{resize:vertical;min-height:120px}
.detail .form input:focus-visible,.detail .form select:focus-visible,.detail .form textarea:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.detail .form .err{display:none;font-size:12.5px;color:#FF7A5C}
.detail .form .bad .err{display:block}
.detail .form .bad input,.detail .form .bad textarea{border-color:var(--brand)}
.detail .form .agree label{display:flex;gap:8px;align-items:flex-start;font-weight:600}
.detail .form .agree input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--brand)}
.detail .form .agree a{color:#fff}
.detail .form .hp{position:absolute;left:-9999px}
.detail .form .sub{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.detail .form .preview{font-size:12.5px;color:var(--t3)}
.detail .form .sent,.detail .form .fail{grid-column:1 / -1;padding:18px;border:1px solid #fff;background:var(--ink2)}
.detail .form .fail{border-color:var(--brand)}
.detail .form .sent b,.detail .form .fail b{display:block;font-size:18px}
.detail .form .fail b{color:var(--brand)}
.detail .form .sent span,.detail .form .fail span{display:block;margin-top:4px;color:var(--t2)}
.detail .form .sent small{display:block;margin-top:8px;font-size:12.5px;color:var(--t3)}
.detail .form .fail a{color:inherit}
.detail .form button[aria-busy]{opacity:.7;cursor:progress}
.detail .form.done .f,.detail .form.done .sub{opacity:.45}
.detail .ch-reach .ch-head{grid-column:1 / span 7}
.detail .chan{grid-column:1 / span 7;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.detail .chan li{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);background:var(--ink2);min-width:0}
.detail .chan b{font-size:13px;color:var(--t3);font-weight:650}
.detail .chan a,.detail .chan span{font-size:15px;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.detail .chan img{width:84px;height:84px;margin-top:6px;background:#fff;padding:4px}
.detail .chan li.sns > a{display:flex;flex-direction:column;gap:6px;color:inherit}
.detail .chan i{font-style:normal}
.detail .office{grid-column:8 / span 5;grid-row:1 / span 2;margin:0;padding:0;list-style:none;display:grid;gap:22px;align-self:center}
.detail .office b{display:block;font-size:clamp(24px,2.2vw,34px);font-weight:820;letter-spacing:-.03em}
.detail .office span{display:block;font-size:16px;font-weight:650;margin-top:4px}
.detail .office em{display:block;font-style:normal;font-size:13.5px;color:var(--t3);margin-top:2px}
.detail .corp{font-size:12.5px;color:var(--t3);margin:0}

/* ---------- tablet · phone: one column, the picture under the head ---------- */
@media (max-width:1100px){
  .detail .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .detail .ch{grid-template-columns:minmax(0,1fr);row-gap:24px;padding-top:96px;padding-bottom:96px;min-height:0}
  .detail .pwall{position:relative;inset:auto;z-index:auto;order:99;height:clamp(240px,46vw,380px);grid-template-columns:repeat(3,minmax(0,1fr));padding:0;grid-column:1 / -1}
  .detail .pwall img:first-child{grid-row:auto}
  .detail .pwall img:nth-child(n+7){display:none}
  .detail .pwall::after{background:linear-gradient(180deg,var(--ink2) 0,rgba(27,26,29,0) 30%)}
  .detail .ch-start{min-height:0}
  .detail .ch:first-child{padding-top:calc(var(--hd) + 48px)}
  .detail .ch > *{grid-column:1 / -1 !important;grid-row:auto !important}
  .detail .art{max-width:560px;width:100%;justify-self:center}
  .detail .doors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail .office{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .detail .ch{padding:72px 20px;row-gap:20px}
  .detail .ch-start{padding-top:96px;padding-bottom:96px}
  .detail .ch:first-child{padding-top:calc(var(--hd) + 36px)}
  .detail .art{max-width:none}
  .detail .ch-head .h1{font-size:clamp(32px,9vw,44px)}
  .detail .ch-head .h2{font-size:clamp(26px,7.4vw,36px)}
  .detail .cards,.detail .cards.six,.detail .plans,.detail .chan,.detail .office,.detail .doors{grid-template-columns:minmax(0,1fr)}
  .detail .cards li{padding:18px}
  .detail .cards .ico{margin-bottom:8px}
  .detail .steps{grid-template-columns:minmax(0,1fr);padding:0 0 0 36px;gap:18px}
  .detail .steps::before{left:9px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .detail .steps li::before{top:2px;left:-36px}
  .detail .grow li{grid-template-columns:96px auto;row-gap:2px}
  .detail .grow span{grid-column:1 / -1}
  .detail .keys .n{font-size:32px}
  .detail .big .n{font-size:42px}
  .detail .form{grid-template-columns:minmax(0,1fr)}
  .detail .door{min-height:0}
  .detail .faq summary{padding:16px 2px}
  .detail .faq p{font-size:14.5px}
}

/* a detail page's header also carries the crumb: the menu gives way a little earlier */
@media (max-width:1180px){
  .detail .hd nav.menu{display:none}
  .detail .hd nav.lang{margin-left:auto}
}

/* ===================================================================================================================
   2026-10-20 노션 「자사몰 수정 요청사항 (261019VER.)」 — the example pages (upinter_marketing_merged · sales · axmd)
   =================================================================================================================== */

/* ---------- global marketing · the opening: the copy stays in the middle of the window while six Xiaohongshu KOC cards rise
   over it in three columns, each column at its own speed (detail.js); the copy fades back a little as they come ---------- */
.detail .ch.ch-hero{display:block;min-height:0;padding:0 var(--gx);align-content:normal;border-top:0}
.ch-hero .hero-pin{position:sticky;top:var(--hd);height:calc(100svh - var(--hd));min-height:560px;display:grid;place-items:center;z-index:1}
.ch-hero .hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:940px;transform-origin:50% 40%;will-change:opacity,transform}
.ch-hero .label{margin-bottom:22px}
.detail .ch-hero .h1{font-size:clamp(40px,5.8vw,92px)}
.ch-hero .lead{max-width:36em;margin:28px auto 0}
.detail .ch-hero .keys{justify-content:center;text-align:center;margin-top:44px}
.detail .ch-hero .basis{margin-top:28px}
.ch-hero .hero-grid{position:relative;z-index:2;max-width:1020px;margin:-4vh auto 0;padding-bottom:6vh;display:flex;gap:clamp(12px,1.6vw,20px);align-items:flex-start}
.ch-hero .hero-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px);will-change:transform}
.ch-hero .hero-card{display:block;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:3 / 4;background:var(--ink2);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);transition:transform .35s var(--ease)}
.ch-hero .hero-card img{display:block;width:100%;height:100%;object-fit:cover}
.ch-hero .hero-card:hover{transform:translateY(-6px)}
.ch-hero .hero-cap{position:relative;z-index:2;margin:0 auto;padding-bottom:16vh;text-align:center;font-size:12px;color:var(--t3)}
@media (max-width:1023px){
  .detail .ch.ch-hero{padding:0 20px}
  .ch-hero .hero-pin{min-height:620px}
  .ch-hero .hero-grid{margin-top:-2vh}
}
@media (max-width:767px){
  .ch-hero .hero-card{border-radius:10px}
  .detail .ch-hero .keys{gap:18px 28px}
}
@media (prefers-reduced-motion:reduce){
  .ch-hero .hero-col,.ch-hero .hero-copy{transform:none!important}
  .ch-hero .hero-card{transition:none}
}

/* ---------- global marketing · the case: a collage fills the section to its right edge and fades into the background at the left ---------- */
@media (min-width:1024px){
  .detail .ch-collage{overflow:hidden;isolation:isolate}
  .detail .ch-collage > :not(.art){position:relative;z-index:1}
  .detail .ch-collage .art{position:absolute;grid-area:auto;top:0;right:0;bottom:0;width:46%;justify-self:auto;align-self:auto;max-width:none;margin:0;z-index:0;
    -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 14%,#000 32%);mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 14%,#000 32%)}
  .detail .ch-collage .art .frame{--ar:auto;aspect-ratio:auto;width:100%;height:100%;background:transparent}
  .detail .ch-collage .art .frame > img{object-fit:cover;object-position:0% 50%}
}
@media (max-width:1023px){
  .detail .ch-collage .art .frame{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}
}

/* ---------- global sales · AX MD · the opening (C안): the headline in the middle, three cards under it that rise one by one ---------- */
.detail .ch.ch-c{display:block;text-align:center;padding-top:calc(var(--hd) + clamp(56px,7vw,96px));padding-bottom:clamp(64px,8vw,112px)}
.detail .ch-c .ch-head{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.detail .ch-c .h1{font-size:clamp(40px,6vw,80px);line-height:1.12}
.detail .ch-c .lead{margin:32px auto 0;max-width:720px;font-size:clamp(16px,1.6vw,19px)}
.detail .ch-c .basis{display:block;text-align:center;margin-top:28px}
.stat-grid{max-width:1192px;margin:clamp(48px,6vw,80px) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;text-align:left}
.stat-card{position:relative;border-radius:32px;padding:12px 12px 0;display:flex;flex-direction:column;isolation:isolate;
  background:linear-gradient(180deg,#1C1C1C 0%,#1C1C1C 68%,#2E2E2E 80%,#1F1F1F 100%)}
.stat-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#8A8A8A 0%,#3A3A3A 45%,#1C1C1C 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.stat-card .panel{position:relative;height:clamp(300px,26vw,380px);border-radius:24px;overflow:hidden;display:flex;justify-content:center}
.stat-card .panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(to bottom,transparent,var(--panel) 85%);pointer-events:none}
.stat-card .p-brand{--panel:#2A1E1A;background:var(--panel)}
.stat-card .p-market{--panel:#20232A;background:var(--panel)}
.stat-card .p-channel{--panel:#23221E;background:var(--panel)}
.stat-card .mini{margin-top:clamp(28px,3.4vw,48px);width:74%;height:400px;border-radius:18px;background:#262626;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.35);text-align:left}
.stat-card .lb{font-size:11px;font-weight:700;letter-spacing:.12em;color:#A3A3A3}
.stat-card .num{font-weight:800;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-card .mini-head{background:var(--brand);padding:22px 20px 20px;display:flex;flex-direction:column;gap:2px}
.stat-card .mini-head .lb{color:rgba(255,255,255,.9)}
.stat-card .mini-head .num{font-size:clamp(48px,4.4vw,64px)}
.stat-card .mini-head small{font-size:12px;opacity:.9}
.stat-card .rows{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.stat-card .row{display:flex;align-items:center;gap:10px}
.stat-card .row .ic{width:30px;height:30px;border-radius:8px;background:#333;display:flex;align-items:center;justify-content:center;flex:none}
.stat-card .row b{display:block;font-size:13px}
.stat-card .row span{display:block;font-size:11px;color:#A3A3A3}
.stat-card .row span.hi{color:#FF8A6A}
.stat-card .m-head{padding:22px 20px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;border-bottom:1px solid #333}
.stat-card .m-head strong{display:block;font-size:16px;font-weight:850;margin-top:2px}
.stat-card .m-head .num{font-size:clamp(48px,4.4vw,64px);line-height:1;color:var(--brand)}
.stat-card .markets{list-style:none;margin:0;padding:8px 20px}
.stat-card .markets li{display:flex;align-items:center;padding:11px 0;border-bottom:1px solid #303030;font-size:14px;font-weight:700}
.stat-card .markets li:last-child{border-bottom:0}
.stat-card .markets li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);margin-right:10px}
.stat-card .markets li em{margin-left:auto;font-style:normal;font-size:11px;font-weight:400;color:#A3A3A3}
.stat-card .c-head{padding:22px 20px 16px}
.stat-card .c-head .count{display:flex;align-items:baseline;gap:8px}
.stat-card .c-head .num{font-size:clamp(48px,4.4vw,64px)}
.stat-card .c-head .count > span:not(.num){font-size:14px;font-weight:700;color:#D4D4D4}
.stat-card .mchips{padding:4px 20px 20px;display:flex;flex-wrap:wrap;gap:8px}
.stat-card .mchips span{padding:8px 14px;border-radius:999px;background:#333;font-size:13px;font-weight:700}
.stat-card .mchips span.on{background:var(--brand)}
.stat-card .more{margin:0 20px;padding:14px 16px;border-radius:12px;background:#2E2E2E;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:#D4D4D4}
/* AX MD: two bars (×1 → ×3) and an eleven-week line */
.stat-card .num .unit{font-size:26px;font-weight:850;margin-left:4px;letter-spacing:0}
.stat-card .m-head .num .pre{font-size:16px;font-weight:850;margin-right:2px;vertical-align:baseline}
.stat-card .m-head .num .unit{font-size:22px;margin-left:2px}
.stat-card .bars{padding:22px 20px 0;display:flex;align-items:flex-end;justify-content:center;gap:36px;height:170px}
.stat-card .bars div{display:flex;flex-direction:column;align-items:center;gap:8px}
.stat-card .bars i{display:block;width:52px;border-radius:8px 8px 0 0;background:#3A3A3A}
.stat-card .bars .now i{background:var(--brand)}
.stat-card .bars small{font-size:11px;color:#A3A3A3}
.stat-card .bars .now small{color:#FF8A6A;font-weight:700}
.stat-card .bars span{font-size:12px;font-weight:700;color:#D4D4D4}
.stat-card .bars .now span{color:#fff}
.stat-card .timeline{padding:0 20px}
.stat-card .timeline .seg{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px}
.stat-card .timeline .seg i{height:8px;border-radius:2px;background:var(--brand)}
.stat-card .timeline .ends{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;font-weight:700}
.stat-card .timeline .ends span:last-child{color:#FF8A6A}
.stat-card .more .tag{padding:4px 10px;border-radius:999px;background:#3A3A3A;font-size:11px;font-weight:700;color:#fff}
.stat-card .caption{padding:28px 24px 32px;text-align:center}
.stat-card .caption p{margin:0;font-size:15px;color:#A3A3A3}
.stat-card .caption h2{margin:8px 0 0;font-size:clamp(18px,1.6vw,22px);font-weight:850;letter-spacing:-.02em}
/* the cards come up one by one as the page scrolls (detail.js); once up they stay */
.js .stat-card{opacity:0;transform:translateY(var(--rise));transition:opacity 1.1s ease-out,transform 1.9s var(--ease)}
.js .stat-card:nth-child(1){--rise:90px}
.js .stat-card:nth-child(2){--rise:170px}
.js .stat-card:nth-child(3){--rise:250px}
.js .stat-card.is-in{opacity:1;transform:none}
@media (max-width:1023px){
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}
@media (max-width:767px){
  .detail .ch.ch-c{padding:calc(var(--hd) + 36px) 20px 72px}
  .detail .ch-c .h1{font-size:clamp(32px,9vw,44px)}
  .stat-grid{grid-template-columns:minmax(0,1fr)}
  .stat-card .panel{height:320px}
}
@media (prefers-reduced-motion:reduce){.js .stat-card{opacity:1;transform:none;transition:none}}
.no-js .stat-card{opacity:1;transform:none}

/* ---------- global sales · the case: the pop-up pictures drift slowly at the right half (90s a round, never stopping) and sink into
   the dark at the copy's side ---------- */
.detail .ch-reel{overflow:hidden;isolation:isolate}
.detail .ch-reel > :not(.case-reel){position:relative;z-index:2}
.detail .case-reel{position:absolute;z-index:0;grid-area:auto;top:0;bottom:0;left:50%;right:0;margin:0;overflow:hidden}   /* grid-area:auto: measured from the section, not from its grid lines */
.detail .case-reel .reel-track{display:flex;gap:8px;height:100%;width:max-content;animation:reel 90s linear infinite}
.detail .case-reel .reel-track img{height:100%;width:auto;max-width:none;aspect-ratio:1300 / 1600;object-fit:cover;flex:none}
@keyframes reel{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 4px))}}
.detail .case-reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--ink2) 0%,rgba(27,26,29,.82) 18%,rgba(27,26,29,.42) 48%,rgba(27,26,29,.28) 100%),
             linear-gradient(180deg,var(--ink2) 0%,rgba(27,26,29,0) 20%,rgba(27,26,29,0) 80%,var(--ink2) 100%)}
@media (max-width:1023px){
  .detail .case-reel{position:relative;left:auto;right:auto;order:99;height:clamp(280px,70vw,420px);margin:16px calc(-1 * var(--gx)) 0}
  .detail .case-reel::after{background:linear-gradient(180deg,var(--ink2) 0%,rgba(27,26,29,.3) 30%,rgba(27,26,29,.3) 70%,var(--ink2) 100%)}
}
@media (max-width:767px){.detail .case-reel{margin:16px -20px 0}}
@media (prefers-reduced-motion:reduce){.detail .case-reel .reel-track{animation:none}}

/* AX MD · the last screen: the headline and the lead each on two lines (노션 261019VER 「4줄 > 2줄」) */
[data-page="md"].detail .ch-start .lead{max-width:44em}