/* Shared page rhythm: the accepted kangdaejong.com homepage. Colors come from tokens.css.
   T-261024-050: 모든 숫자는 공용 톤 파일(--tone-*)의 이름으로만 쓴다 — 첫이름(토스 톤) 스펙 v3 와 같은 값. 작업장도 이 파일을 함께 읽는다. */
body.studio-page{font-family:var(--tone-font);margin:0;background:var(--bg);color:var(--fg);font-size:var(--tone-body-size);line-height:var(--tone-body-line);letter-spacing:normal;-webkit-text-size-adjust:100%}
.studio-page *{box-sizing:border-box}.studio-page .studio-width{width:min(calc(100% - var(--tone-gutter) * 2),var(--page-max));margin-inline:auto;padding-inline:0}
body.studio-page h1{font-family:inherit;font-size:var(--tone-display-size);font-weight:var(--tone-weight-bold);line-height:var(--tone-display-line);letter-spacing:var(--tone-tracking-title);margin:0 0 var(--tone-space-3);word-break:keep-all}
body.studio-page h1 em,body.studio-page h1 span{font-family:inherit;font-style:normal;color:var(--accent)}
body.studio-page h2{font-size:var(--tone-title-size);line-height:var(--tone-title-line);font-weight:var(--tone-weight-bold);letter-spacing:var(--tone-tracking-title);margin:0 0 var(--tone-space-2);word-break:keep-all}
body.studio-page h3{font-size:var(--tone-subtitle-size);line-height:var(--tone-subtitle-line);font-weight:var(--tone-weight-bold);letter-spacing:var(--tone-tracking-title);word-break:keep-all}
.studio-page .studio-hero{padding:var(--tone-hero-top) 0 var(--tone-section-gap)}.studio-page .studio-label{font-family:inherit;font-size:var(--tone-caption-size);font-weight:var(--tone-weight-bold);line-height:var(--tone-caption-line);letter-spacing:0;color:var(--fg-dim);margin:0 0 var(--tone-space-1)}.studio-page .studio-lead{font-size:var(--tone-body-size);line-height:var(--tone-body-line);color:var(--fg-dim);margin:0;word-break:keep-all;max-width:var(--tone-prose-max)}
.studio-page .studio-section{padding:0;margin-top:var(--tone-section-gap)}.studio-page .studio-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tone-space-2);margin-top:var(--tone-space-4)}.studio-page .studio-card{border:0;border-radius:var(--tone-radius-card);padding:var(--tone-card-padding);background:var(--bg-elev)}.studio-page .studio-card h3{margin:0 0 var(--tone-space-1)}.studio-page .studio-card p{font-size:var(--tone-label-size);color:var(--fg-dim);line-height:var(--tone-label-line);margin:0}
.studio-page a{color:inherit;text-underline-offset:var(--tone-underline-offset)}.studio-page a:hover{color:var(--accent)}.studio-page .studio-link{display:inline-flex;align-items:center;gap:4px;min-height:var(--tone-tap-height);color:var(--accent);font-size:var(--tone-label-size);font-weight:var(--tone-weight-bold);line-height:var(--tone-body-line);text-decoration:underline;text-underline-offset:var(--tone-underline-offset);margin-top:var(--tone-space-3)}.studio-page .studio-link:hover,.studio-page .studio-link:focus-visible{color:var(--accent-hover)}.studio-page :where(a,button,input,select,textarea,summary):focus-visible{outline:var(--tone-focus-width) solid var(--accent);outline-offset:var(--tone-focus-offset)} /* tone:fixed: 링크 글자·아이콘 미세 간격 4px(의장) */
.studio-page ::selection{background:var(--cta-bg);color:var(--cta-fg)}
@media(max-width:760px){.studio-page .studio-cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.studio-page{scroll-behavior:auto}}

/* Page-specific shells use the same measure and heading hierarchy. */
body.studio-page main :is(h1,h2,h3){font-family:inherit}
body.studio-page main#main-content h1{font-size:var(--tone-display-size);font-weight:var(--tone-weight-bold);line-height:var(--tone-display-line);letter-spacing:var(--tone-tracking-title)}
body.studio-page main#main-content h2{font-size:var(--tone-title-size);line-height:var(--tone-title-line);font-weight:var(--tone-weight-bold);letter-spacing:var(--tone-tracking-title)}
body.studio-page main#main-content h3{font-size:var(--tone-subtitle-size);line-height:var(--tone-subtitle-line);font-weight:var(--tone-weight-bold);letter-spacing:var(--tone-tracking-title)}
body.studio-page :is(.digital-page,.ipta-page,.closed-page,.our-sai){width:min(calc(100% - var(--tone-gutter) * 2),var(--page-max));max-width:none;margin:0 auto;padding:var(--tone-hero-top) 0 var(--tone-section-gap)}
body.studio-page :is(.digital-page .hero,.ipta-hero){padding-top:0;padding-bottom:var(--tone-section-gap)}
body.studio-page .our-sai{color:var(--fg)}
body.studio-page .our-sai a{color:var(--accent)}
body.studio-page .our-sai .note{background:var(--accent-tint);border-radius:var(--tone-radius-card)}
body.studio-page .our-sai nav{border-color:var(--border)}
body.studio-page .template-shell{max-width:var(--page-max);gap:var(--tone-space-6);padding:var(--tone-hero-top) 0 var(--tone-section-gap);margin:auto;grid-template-columns:280px minmax(0,1fr)}
body.studio-page main#main-content .template-rail h1{font-size:var(--tone-display-size)}
body.studio-page main#main-content .markdown-body h1{font-size:var(--tone-title-size)}
@media(max-width:820px){body.studio-page .template-shell{grid-template-columns:1fr;width:calc(100% - var(--tone-gutter) * 2)}}

/* 첫이름 .btn-primary/.btn-secondary 와 같은 버튼. 올려도 색은 그대로, 누르는 동안만 눌린 파랑·살짝 작아짐. */
body.studio-page a.r-button,body.studio-page a.r-button:hover,body.studio-page a.r-button:focus-visible{color:var(--cta-fg)}
body.studio-page a.r-button{min-height:var(--tone-control-height);height:var(--tone-control-height);display:inline-flex;align-items:center;justify-content:center;gap:var(--tone-space-1);padding:0 var(--tone-control-padding);border:0;border-radius:var(--tone-radius-control);background:var(--cta-bg);font:var(--tone-weight-bold) var(--tone-body-size)/var(--tone-body-line) var(--tone-font);letter-spacing:normal;text-decoration:none;transition:transform var(--tone-press-ms) linear,background-color var(--tone-press-ms) linear}
body.studio-page a.r-button:hover{background:var(--cta-bg)}
body.studio-page a.r-button:active{background:var(--accent-hover);transform:scale(var(--tone-press-scale))}
body.studio-page a.r-button.secondary,body.studio-page a.r-button.secondary:hover,body.studio-page a.r-button.secondary:focus-visible,body.studio-page a.r-button.secondary:active{background:var(--bg-elev);color:var(--fg)}
body.studio-page :is(.studio-label,.eyebrow,.r-kicker){font-family:var(--tone-font);font-size:var(--tone-caption-size);line-height:var(--tone-caption-line);font-weight:var(--tone-weight-bold);letter-spacing:0;text-transform:none;color:var(--fg-dim);margin:0 0 var(--tone-space-1)}

/* T-261011-068: shared header/footer (mb-components.js, shadow DOM) follow the page width and reserve
   their height before the script defines them, so the page does not jump (CLS) on load.
   T-261024-050: 헤더 높이 = 공용 톤 값(64px + 1px 선). 650px 이하에서는 두 줄(상호 줄·메뉴 줄 44px씩 + 위아래 8px). */
mb-header,mb-footer{--mb-max:var(--page-max)}
mb-header:not(:defined){display:block;min-height:calc(var(--tone-header-height) + 1px)} /* tone:fixed: 머리글 경계선 1px(의장) */
@media(max-width:650px){mb-header:not(:defined){min-height:calc(var(--tone-tap-height) * 2 + var(--tone-space-3) + 1px)}} /* tone:fixed: 머리글 경계선 1px(의장) */
/* T-261024-062: 공용 헤더가 화면 위에 고정(sticky)되므로 #앵커 이동·초점 이동이 헤더 아래로 숨지 않게 헤더 높이만큼 비워 둔다.
   값 = 헤더가 알리는 실측 높이 --mb-header-block(mb-components.js), 정의 전에는 위 자리 잡기 식. 사이트가 여백을 더 주려면 이 변수에 더한다. */
html{scroll-padding-top:var(--mb-header-block,calc(var(--tone-header-height) + 1px))}
@media(max-width:650px){html{scroll-padding-top:var(--mb-header-block,calc(var(--tone-tap-height) * 2 + var(--tone-space-3) + 1px))}}
@media(prefers-reduced-motion:reduce){body.studio-page a.r-button{transition:none}body.studio-page a.r-button:active{transform:none}}