/* Standalone studio page; all webtoons remain visible in one continuous timeline. */
.studio-page .site-header { color:var(--ink); background:var(--paper); border-bottom:1px solid var(--line); }
.studio-page .header-description { color:var(--muted); }
.site-header nav a[aria-current="page"]::after { transform:scaleX(1); }
.studio-layout { max-width:1440px; margin:0 auto; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:clamp(48px,7vw,108px); padding:84px var(--gutter) 112px; }
.studio-intro { position:sticky; top:56px; align-self:start; }
.studio-intro .eyebrow { margin:0 0 26px; font-size:10px; color:#607264; }
.studio-intro h1 { margin:0; font-size:clamp(28px,3.4vw,48px); font-weight:550; letter-spacing:-.055em; line-height:1.3; white-space:nowrap; }
.history-years { display:flex; flex-wrap:wrap; gap:4px 20px; margin:36px 0 32px; }
.history-years a { padding:10px 0; font-size:12px; color:#657460; font-variant-numeric:tabular-nums; border-bottom:1px solid transparent; }
.history-years a:hover { border-color:#657460; color:var(--ink); }
.studio-catalog-link { gap:24px; font-size:13px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.studio-history { min-width:0; scroll-margin-top:36px; }
.history-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:22px; margin-bottom:42px; border-bottom:1px solid var(--line); }
.history-heading h2 { margin:0; font-size:16px; font-weight:550; }
.history-heading p { margin:0; color:var(--muted); font-size:10px; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.history-heading p span { display:inline-block; margin-left:20px; letter-spacing:0; }
.timeline { list-style:none; padding:0; margin:0; }
.timeline-year { display:grid; grid-template-columns:72px minmax(0,1fr); gap:28px; scroll-margin-top:42px; }
.timeline-year > h3 { margin:0; color:#303d34; font-size:29px; line-height:1.2; font-weight:450; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.year-events { min-width:0; border-left:1px solid #cbd1c7; padding:0 0 48px 28px; }
.history-event { position:relative; padding-bottom:34px; }
.history-event:last-child { padding-bottom:0; }
.history-event::before { position:absolute; content:''; top:6px; left:-32px; width:7px; height:7px; border:1px solid #9ca99b; border-radius:50%; background:var(--paper); }
.company-event::before { background:#4a6653; border-color:#4a6653; }
.event-meta { display:flex; align-items:center; gap:11px; margin:0 0 10px; color:var(--muted); font-size:10px; line-height:1.5; }
.event-meta time { color:#455047; font-variant-numeric:tabular-nums; }
.event-meta time + span::before { content:'/'; margin-right:11px; color:#b7beb1; }
.history-event h4 { margin:0; font-size:21px; font-weight:550; line-height:1.4; letter-spacing:-.04em; word-break:keep-all; overflow-wrap:anywhere; }
.company-event h4 { color:#263e2d; }
.event-participation { display:block; margin-top:4px; }
.event-description { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.65; word-break:keep-all; }
.history-work { display:grid; grid-template-columns:minmax(0,1fr) 14px; gap:18px; align-items:center; }
.event-arrow { font-size:19px; color:#778274; transition:transform .2s; }
.history-work:hover .event-arrow { transform:translate(2px,-2px); }
.history-work:hover h4 { color:#56705a; }
.timeline-year:last-child .year-events { padding-bottom:8px; }
.history-end { margin:40px 0 0 100px; padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; color:#657460; font-size:12px; }
.history-end a { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; font-size:18px; }
@media(max-width:1000px) {
 .studio-layout { gap:40px; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); padding-top:64px; }
  .timeline-year { grid-template-columns:58px minmax(0,1fr); gap:18px; }
 .timeline-year > h3 { font-size:25px; }
 .year-events { padding-left:24px; }
 .history-event::before { left:-28px; }
 .history-event h4 { font-size:18px; }
 .history-work { grid-template-columns:minmax(0,1fr); }
 .history-work .event-arrow { display:none; }
 .history-end { margin-left:76px; }
}
@media(max-width:680px) {
 .studio-layout { display:block; padding-top:48px; padding-bottom:64px; }
 .studio-intro { position:static; margin-bottom:55px; }
 .studio-intro h1 { font-size:clamp(28px,7.8vw,42px); }
 .studio-intro .eyebrow { margin-bottom:20px; font-size:9px; }
  .history-years { display:grid; grid-template-columns:repeat(4,1fr); gap:0 18px; max-width:280px; margin-bottom:24px; }
 .history-years a { font-size:12px; }
 .history-heading { margin-bottom:32px; padding-bottom:18px; }
 .history-heading p span { margin-left:12px; }
 .timeline-year { grid-template-columns:52px minmax(0,1fr); gap:15px; scroll-margin-top:24px; }
 .timeline-year > h3 { font-size:23px; }
 .year-events { padding-left:19px; padding-bottom:40px; }
 .history-event { padding-bottom:30px; }
 .history-event::before { left:-23px; }
 .history-event h4 { font-size:17px; }
 .event-meta { font-size:10px; margin-bottom:9px; }
 .event-description { font-size:11px; margin-top:6px; }
 .history-end { margin-left:67px; font-size:11px; }
}
@media(max-width:360px) {
 .history-event h4 { font-size:16px; }
}