/* Shared subpage extension based on wonkang/Design.md.
   main.css continues to own the global header, typography tokens and footer. */
.detail-page { --detail-gutter:clamp(20px,4.453125vw,86px); }
.detail-page .detail-shell { width:min(calc(100% - var(--detail-gutter)*2),1520px); margin-inline:auto; }
.detail-page .detail-kicker { display:inline-flex; align-items:center; gap:12px; color:var(--primary-default); font-weight:700; letter-spacing:.13em; font-size:13px; }
.detail-page .detail-kicker::before { content:''; display:block; width:26px; height:2px; background:currentColor; }
.detail-page .detail-hero { display:flex; position:relative; isolation:isolate; align-items:flex-end; min-height:clamp(580px,72svh,820px); overflow:hidden; color:#fff; background:var(--brand-neutral-950); }
.detail-page .detail-hero__image { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center; }
.detail-page .detail-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#0b1421e8,#0c192c9b 57%,#0a111e49),linear-gradient(0deg,#0009,transparent 55%); }
.detail-page .detail-hero__content { padding-block:calc(var(--header-height) + 105px) 130px; }
.detail-page .detail-hero__eyebrow { font-size:14px; font-weight:700; letter-spacing:.19em; }
.detail-page .detail-hero h1 { margin-top:28px; font-size:clamp(50px,5vw,96px); line-height:1.25; letter-spacing:-.05em; font-weight:700; word-break:keep-all; }
.detail-page .detail-hero__description { margin-top:28px; max-width:850px; font-size:clamp(16px,1.2vw,20px); line-height:1.85; font-weight:500; word-break:keep-all; }
.detail-page .detail-hero__bottom { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; gap:14px; padding:22px var(--detail-gutter); border-top:1px solid #ffffff80; font-size:12px; font-weight:700; letter-spacing:.13em; }
.detail-page .detail-breadcrumb { background:#fff; border-bottom:1px solid var(--border-default); }
.detail-page .detail-breadcrumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:12px; min-height:64px; color:var(--text-muted); font-size:13px; font-weight:500; }
.detail-page .detail-breadcrumb li { display:flex; align-items:center; gap:12px; }
.detail-page .detail-breadcrumb li+li::before { content:'/'; }
.detail-page .detail-breadcrumb a { display:inline-flex; align-items:center; min-height:44px; }
.detail-page .detail-breadcrumb a:hover { color:var(--primary-default); }
.detail-page .detail-breadcrumb [aria-current] { color:var(--text-primary); font-weight:700; }
.detail-page .detail-siblings { position:sticky; top:var(--header-height); z-index:80; background:#fff; border-bottom:1px solid var(--border-default); box-shadow:0 7px 18px #00000008; }
.detail-page .site-header.is-hidden ~ main .detail-siblings { top:0; }
.detail-page .detail-siblings__list { display:flex; align-items:center; gap:clamp(15px,2.3vw,46px); overflow-x:auto; scrollbar-width:thin; }
.detail-page .detail-siblings a { display:inline-flex; align-items:center; flex:none; min-height:66px; padding:6px 0; border-bottom:2px solid transparent; font-size:15px; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.detail-page .detail-siblings a:hover { color:var(--primary-default); }
.detail-page .detail-siblings a:focus-visible { outline:2px solid var(--primary-default); outline-offset:-4px; }
.detail-page .detail-siblings [aria-current=page] { border-bottom-color:var(--primary-default); color:var(--text-primary); }
.detail-page main section:not(.detail-hero) { scroll-margin-top:95px; }
.detail-page .detail-section { padding-block:clamp(95px,9vw,165px); }
.detail-page .detail-section--muted { background:var(--background-default); }
.detail-page .detail-section__heading { max-width:990px; }
.detail-page .detail-section__heading h2 { margin-top:24px; font-size:clamp(36px,3.35vw,64px); line-height:1.28; letter-spacing:-.045em; font-weight:700; word-break:keep-all; }
.detail-page .detail-section__heading>p { max-width:860px; margin-top:27px; font-size:clamp(16px,1.2vw,19px); line-height:1.9; color:var(--text-muted); word-break:keep-all; }
.detail-page .detail-lead { font-size:clamp(21px,1.7vw,33px); font-weight:500; line-height:1.65; letter-spacing:-.035em; }
.detail-page .detail-copy { color:var(--text-muted); font-size:17px; line-height:1.95; word-break:keep-all; }
.detail-page .detail-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(35px,6vw,114px); align-items:center; margin-top:70px; }
.detail-page .detail-split--reverse .detail-split__media { order:2; }
.detail-page .detail-split__text h3 { font-size:clamp(28px,2.6vw,48px); line-height:1.3; letter-spacing:-.04em; }
.detail-page .detail-split__text .detail-copy { margin-top:26px; }
.detail-page .detail-split__media { min-width:0; margin:0; }
.detail-page .detail-split__media img { display:block; width:100%; aspect-ratio:1.32; object-fit:cover; background:var(--brand-neutral-200); }
.detail-page .detail-split__media figcaption { display:flex; justify-content:space-between; gap:15px; margin-top:13px; padding-top:15px; border-top:1px solid var(--border-default); color:var(--text-muted); font-size:12px; letter-spacing:.07em; }
.detail-page .detail-rule-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:65px; }
.detail-page .detail-rule-card { min-width:0; padding:27px 24px 32px; background:var(--surface-default); border-top:2px solid var(--primary-default); }
.detail-page .detail-rule-card__count { font-size:13px; font-weight:700; color:var(--primary-default); }
.detail-page .detail-rule-card h3 { margin-top:22px; font-size:clamp(22px,1.55vw,30px); line-height:1.4; font-weight:700; }
.detail-page .detail-rule-card p { margin-top:15px; font-size:15px; line-height:1.85; color:var(--text-muted); word-break:keep-all; }
.detail-page .detail-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:70px; }
.detail-page .detail-stat { padding:33px 20px 44px; border-top:2px solid var(--text-primary); }
.detail-page .detail-stat__label { font-size:14px; color:var(--text-muted); font-weight:600; }
.detail-page .detail-stat__value { display:block; margin-top:21px; font-size:clamp(42px,4vw,80px); font-weight:700; letter-spacing:-.05em; line-height:1.12; }
.detail-page .detail-stat__note { margin-top:12px; color:var(--text-muted); font-size:14px; }
.detail-page .detail-timeline { display:grid; gap:0; margin-top:60px; }
.detail-page .detail-timeline__row { display:grid; grid-template-columns:minmax(110px,200px) 1fr; gap:28px; padding:29px 8px; border-top:1px solid var(--border-default); }
.detail-page .detail-timeline__row:last-child { border-bottom:1px solid var(--border-default); }
.detail-page .detail-timeline__year { color:var(--primary-default); font-size:clamp(25px,2.3vw,42px); font-weight:700; }
.detail-page .detail-timeline__row h3 { font-size:21px; font-weight:700; }
.detail-page .detail-timeline__row p { margin-top:8px; font-size:15px; line-height:1.8; color:var(--text-muted); }
.detail-page .detail-logo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:65px; }
.detail-page .detail-logo-grid li { display:grid; place-items:center; min-width:0; min-height:175px; padding:30px 20px; background:#fff; border:1px solid var(--border-default); }
.detail-page .detail-logo-grid img { display:block; max-height:86px; max-width:100%; width:auto; height:auto; object-fit:contain; }
.detail-page .detail-certificate-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:65px; }
.detail-page .detail-certificate { display:flex; flex-direction:column; min-width:0; width:100%; padding:16px; background:#fff; border:1px solid var(--border-default); text-align:left; }
.detail-page .detail-certificate img { display:block; width:100%; height:260px; object-fit:contain; background:var(--background-default); }
.detail-page .detail-certificate span { display:flex; justify-content:space-between; gap:9px; margin-top:17px; font-size:15px; font-weight:700; }
.detail-page .detail-certificate span::after { content:'↗'; color:var(--primary-default); font-size:18px; }
.detail-page .detail-certificate:hover { border-color:var(--primary-default); }
.detail-page .detail-certificate:focus-visible { outline:2px solid var(--primary-default); outline-offset:2px; }
.detail-page .detail-certificate-dialog { max-width:min(920px,94vw); max-height:90dvh; padding:26px; border:0; background:#fff; box-shadow:0 20px 90px #0005; }
.detail-page .detail-certificate-dialog::backdrop { background:#000b; }
.detail-page .detail-certificate-dialog__top { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:16px; }
.detail-page .detail-certificate-dialog__caption { font-weight:700; }
.detail-page .detail-certificate-dialog__close { width:44px; height:44px; font-size:28px; }
.detail-page .detail-certificate-dialog__image { display:block; width:auto; max-width:100%; height:auto; max-height:calc(85dvh - 100px); margin-inline:auto; object-fit:contain; }
.detail-page .detail-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:70px; }
.detail-page .detail-info-card { min-width:0; background:#fff; border:1px solid var(--border-default); padding:36px 32px 40px; }
.detail-page .detail-info-card__eyebrow { font-size:13px; letter-spacing:.1em; color:var(--primary-default); font-weight:700; }
.detail-page .detail-info-card h3 { margin-top:20px; font-size:clamp(26px,2vw,38px); font-weight:700; }
.detail-page .detail-info-card dl { display:grid; gap:18px; margin-top:30px; }
.detail-page .detail-info-card dl>div { display:grid; grid-template-columns:68px 1fr; gap:20px; font-size:16px; line-height:1.8; }
.detail-page .detail-info-card dt { color:var(--text-muted); font-weight:600; }
.detail-page .detail-info-card dd { font-weight:500; overflow-wrap:anywhere; }
.detail-page .detail-info-card a { border-bottom:1px solid currentColor; }
.detail-page .detail-copy-address { margin-top:26px; display:inline-flex; min-height:44px; align-items:center; font-size:14px; font-weight:700; color:var(--primary-default); }
.detail-page .detail-copy-feedback { margin-top:8px; min-height:20px; font-size:13px; color:var(--text-muted); }
.detail-page .detail-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:300px; padding:35px; text-align:center; background:var(--background-default); border:1px dashed var(--brand-neutral-200); }
.detail-page .detail-placeholder__kicker { font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--primary-default); }
.detail-page .detail-placeholder strong { font-size:23px; }
.detail-page .detail-placeholder span:last-child { color:var(--text-muted); font-size:14px; }
.detail-page .detail-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:70px 24px; margin-top:70px; }
.detail-page .detail-step { min-width:0; }
.detail-page .detail-step img { display:block; width:100%; aspect-ratio:1.65; object-fit:cover; background:var(--brand-neutral-200); }
.detail-page .detail-step__meta { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-block:19px; border-bottom:1px solid var(--border-default); color:var(--primary-default); font-size:13px; font-weight:700; }
.detail-page .detail-step h3 { margin-top:24px; font-size:clamp(26px,2vw,38px); line-height:1.35; }
.detail-page .detail-step p { margin-top:14px; font-size:16px; line-height:1.8; color:var(--text-muted); word-break:keep-all; }
.detail-page .detail-product-feature { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:clamp(36px,6vw,112px); margin-top:67px; }
.detail-page .detail-product-feature img { display:block; width:100%; aspect-ratio:1.12; object-fit:cover; background:var(--brand-neutral-200); }
.detail-page .detail-product-feature__copy h3 { font-size:clamp(33px,3vw,60px); line-height:1.3; letter-spacing:-.045em; }
.detail-page .detail-product-feature__copy .detail-lead { margin-top:24px; }
.detail-page .detail-product-feature__copy .detail-copy { margin-top:23px; }
.detail-page .detail-link { display:inline-flex; align-items:center; justify-content:space-between; gap:32px; padding:14px 0; min-height:54px; margin-top:35px; border-bottom:1px solid currentColor; font-size:16px; font-weight:700; color:var(--text-primary); }
.detail-page .detail-link:hover { color:var(--primary-default); }
.detail-page .detail-cta { background:var(--background-default); padding:clamp(92px,9vw,160px) 0; }
.detail-page .detail-cta__inner { display:flex; align-items:end; justify-content:space-between; gap:40px; }
.detail-page .detail-cta h2 { margin-top:24px; font-size:clamp(34px,3.25vw,62px); line-height:1.3; letter-spacing:-.04em; }
.detail-page .detail-cta p:not(.detail-kicker) { margin-top:22px; max-width:700px; font-size:17px; line-height:1.8; color:var(--text-muted); }
.detail-page .detail-cta .detail-link { flex:none; margin-bottom:8px; }
.detail-page .detail-note { margin-top:32px; color:var(--text-muted); font-size:13px; line-height:1.85; }
@media(max-width:1100px) {
.detail-page .detail-logo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.detail-page .detail-certificate-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.detail-page .detail-rule-grid { gap:15px; }
}
@media(max-width:850px) {
.detail-page .detail-hero { min-height:650px; }
.detail-page .detail-hero h1 { font-size:clamp(42px,7vw,64px); }
.detail-page .detail-split,.detail-page .detail-product-feature { grid-template-columns:1fr; }
.detail-page .detail-split--reverse .detail-split__media { order:0; }
.detail-page .detail-rule-grid { grid-template-columns:1fr; }
.detail-page .detail-cta__inner { align-items:start; flex-direction:column; }
.detail-page .detail-logo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.detail-page .detail-certificate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
.detail-page .detail-hero { min-height:570px; }
.detail-page .detail-hero__content { padding-top:145px; padding-bottom:115px; }
.detail-page .detail-hero__eyebrow { font-size:11px; }
.detail-page .detail-hero h1 { font-size:clamp(31px,8.2vw,42px); }
.detail-page .detail-hero__description { font-size:14px; line-height:1.75; }
.detail-page .detail-hero__description br { display:none; }
.detail-page .detail-hero__bottom { font-size:9px; }
.detail-page .detail-breadcrumb ol { font-size:12px; }
.detail-page .detail-siblings a { min-height:56px; font-size:13px; }
.detail-page .detail-section { padding-block:78px; }
.detail-page .detail-section__heading h2 { font-size:clamp(30px,8.5vw,39px); }
.detail-page .detail-stats { grid-template-columns:1fr; gap:0; }
.detail-page .detail-stats .detail-stat { padding-bottom:28px; }
.detail-page .detail-timeline__row { grid-template-columns:80px 1fr; gap:15px; }
.detail-page .detail-timeline__row h3 { font-size:18px; }
.detail-page .detail-logo-grid { gap:10px; }
.detail-page .detail-logo-grid li { min-height:125px; padding:20px 12px; }
.detail-page .detail-logo-grid img { max-height:60px; }
.detail-page .detail-certificate-grid { gap:12px; }
.detail-page .detail-certificate { padding:8px; }
.detail-page .detail-certificate img { height:160px; }
.detail-page .detail-certificate span { font-size:12px; }
.detail-page .detail-info-grid,.detail-page .detail-steps { grid-template-columns:1fr; gap:22px; }
.detail-page .detail-step { margin-bottom:35px; }
.detail-page .detail-info-card { padding:30px 22px; }
.detail-page .detail-placeholder { min-height:210px; }
.detail-page .detail-cta h2 { font-size:36px; }
}
@media(prefers-reduced-motion:reduce) {
.detail-page .detail-hero,.detail-page .detail-siblings { transition:none!important; }
}