@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');

:root {
  --ink: #101b28;
  --blue-ink: #182e40;
  --paper: #f7f5ed;
  --white: #fffdf7;
  --lime: #c7fb63;
  --coral: #ff936f;
  --blue: #aecbff;
  --muted: #445260;
  --line: #c9c9bc;
  --sans: "DM Sans", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", Impact, "Noto Sans KR", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.65 var(--sans); }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, h4, h5, figure { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #3568b9; outline-offset: 4px; }
.hero :focus-visible, .cycle :focus-visible, .site-header :focus-visible, .footer :focus-visible { outline-color: var(--coral); }
.skip { position: fixed; z-index: 30; top: 12px; left: 12px; padding: 12px 16px; background: var(--white); transform: translateY(-150%); }
.skip:focus { transform: none; }
.shell { width: min(100% - 104px, 1260px); margin-inline: auto; }
.eyebrow { font: 700 .75rem/1.45 var(--mono); letter-spacing: .095em; }
.section { padding-block: clamp(65px, 8vw, 112px); }
.section h2 { font: 800 clamp(3.2rem, 6.2vw, 5.75rem)/.95 var(--display); text-transform: uppercase; margin-top: 14px; letter-spacing: -.02em; }
.section-intro { max-width: 65ch; margin-top: 20px; color: var(--muted); }
html[lang="ko"] .section h2 { font: 900 clamp(2.1rem, 4.7vw, 4rem)/1.18 var(--sans); letter-spacing: -.06em; word-break: keep-all; }
html[lang="ko"] p { word-break: keep-all; }
html[lang="ko"] .eyebrow { letter-spacing: .015em; }
.text-link { font-weight: 800; text-underline-offset: 4px; }
.section-jump { display: inline-block; margin-top: 16px; font-size: .89rem; }

.site-header { position: sticky; top: 0; z-index: 10; background: var(--ink); color: var(--white); border-bottom: 1px solid #ffffff25; }
.header-inner { display: flex; min-height: 73px; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 900 1.42rem/.95 var(--display); text-decoration: none; white-space: nowrap; }
.brand-mark { font: 400 2rem/1 var(--sans); color: var(--coral); }
.brand em { color: var(--lime); font-style: normal; }
.header-lockup { display: flex; flex: none; align-items: center; gap: 12px; }
.header-foundation { display: grid; flex: none; place-items: center; width: 86px; min-height: 38px; padding: 5px 8px; border-inline-start: 1px solid #ffffff32; color: #ffc0a8; }
.header-foundation:hover { color: var(--lime); }
.header-foundation svg { width: 100%; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(15px, 2.25vw, 32px); margin-left: auto; }
.nav a { text-decoration: none; font-size: .85rem; font-weight: 800; white-space: nowrap; }
.nav a:hover { color: var(--lime); }
.nav .nav-contact { color: var(--ink); background: var(--lime); border-radius: 30px; padding: 8px 17px; }
.nav .nav-contact:hover { color: var(--ink); background: var(--coral); }
.header-actions, .language { display: flex; align-items: center; gap: 8px; }
.language { gap: 0; border: 1px solid #788491; border-radius: 5px; padding: 2px; }
.language button { border: 0; border-radius: 3px; background: transparent; color: var(--white); padding: 6px 8px; font-weight: 800; font-size: .74rem; min-height: 33px; white-space: nowrap; }
.language button[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.menu { display: none; flex: none; border: 1px solid #788491; border-radius: 5px; background: none; padding: 8px; color: var(--white); }
.menu svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 2; }

.hero { background: var(--ink); color: var(--white); overflow: clip; }
.hero-layout { display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: clamp(30px, 5vw, 74px); padding-block: clamp(54px, 6.7vw, 92px); }
.hero-tag { color: var(--lime); display: flex; align-items: center; gap: 11px; }
.dot { width: 8px; height: 8px; border-radius: 100%; background: var(--lime); box-shadow: 0 0 0 4px #c7fb6324; }
.hero h1 { font: 900 clamp(3.3rem, 7.5vw, 7.35rem)/.84 var(--display); letter-spacing: -.035em; margin-top: 27px; }
.hero h1 span { display: block; }
.hero h1 span:last-child { color: var(--lime); }
.hero-lead { max-width: 47ch; margin-top: 27px; color: #d5dee4; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.hero-translation { margin-top: 22px; color: var(--lime); font-size: .95rem; font-weight: 700; }
.hero-translation:not([hidden]) + .hero-lead { margin-top: 10px; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 27px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 47px; padding: 11px 17px; border: 1px solid transparent; border-radius: 3px; font-size: .87rem; font-weight: 800; text-decoration: none; transition: background-color .18s, color .18s; }
.button.lime { background: var(--lime); color: var(--ink); }
.button.lime:hover { background: var(--coral); }
.button.outline { color: var(--white); border-color: #8996a2; background: transparent; }
.button.outline:hover { background: var(--white); color: var(--ink); }
.button.ink { background: var(--ink); color: var(--white); }
.button.ink:hover { background: #2f4863; }
.button.plain { color: var(--ink); background: var(--white); border-color: var(--ink); }
.button.plain:hover { background: #e9e9df; }
.hero-poster { width: min(100%, 475px); justify-self: end; transform: rotate(3deg); }
.hero-poster svg { width: 100%; }
.ticker { border-block: 1px solid var(--ink); background: var(--lime); }
.ticker-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 15px; padding-block: 9px; font: 800 clamp(1rem, 2.55vw, 1.85rem)/1.2 var(--display); letter-spacing: .035em; }
.ticker b { font-family: var(--sans); font-size: .72em; }
html[lang="ko"] .ticker-inner { font: 800 clamp(.75rem, 2vw, 1.2rem)/1.4 var(--sans); letter-spacing: 0; }

.pillar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 33px; }
.pillar { --accent: var(--lime); display: flex; flex-direction: column; min-width: 0; min-height: 248px; background: var(--accent); border: 1.5px solid var(--ink); border-radius: 5px; padding: 17px; box-shadow: 4px 4px var(--ink); }
.music { --accent: #c7fb86; }
.sound { --accent: #f9d879; }
.inquiry { --accent: #ffb39c; }
.digital { --accent: var(--blue); }
.pillar-top { display: flex; justify-content: space-between; align-items: start; min-height: 48px; font: 700 .75rem/1.1 var(--mono); }
.pillar-icon { font: 800 2.4rem/.8 var(--sans); }
.pillar h3 { font: 800 clamp(1.7rem, 2.55vw, 2.55rem)/1 var(--display); text-transform: uppercase; margin-block: 8px; }
.pillar p { font-size: .9rem; line-height: 1.52; margin-bottom: 15px; }
.pillar .text-link { align-self: start; margin-top: auto; font-size: .85rem; display: inline-flex; align-items: center; min-height: 38px; }

.workshops { background: #e9ece7; border-block: 1px solid #d6d9cf; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.stamp { flex: 0 0 auto; background: var(--coral); border: 2px solid var(--ink); border-radius: 50%; width: 104px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; transform: rotate(10deg); font: 900 1.35rem/.9 var(--display); }
.filters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 25px; }
.filters button { background: transparent; border: 1px solid #737f77; border-radius: 25px; padding: 7px 15px; min-height: 41px; color: var(--ink); font-size: .87rem; font-weight: 800; }
.filters button:hover { background: var(--white); }
.filters button[aria-pressed="true"] { color: var(--white); background: var(--ink); border-color: var(--ink); }
.results-count { color: var(--muted); font-size: .85rem; margin: 12px 0 18px; }
.path-group:not([hidden]) + .path-group { margin-top: 32px; }
.path-group-title { margin: 0 0 12px; font: 800 clamp(1.4rem, 2.4vw, 2rem)/1.15 var(--display); }
.path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; align-items: start; }
.path-card { min-width: 0; background: var(--white); border: 1.5px solid var(--ink); border-radius: 5px; overflow: clip; box-shadow: 3px 3px var(--ink); }
.path-card summary { display: flex; min-height: 213px; flex-direction: column; cursor: pointer; list-style: none; }
.path-card summary::-webkit-details-marker { display: none; }
.path-card summary:focus-visible { outline-offset: -4px; }
.path-type { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; min-height: 47px; background: var(--accent); font: 700 .73rem/1.25 var(--mono); letter-spacing: .04em; }
.path-type b { font: 800 1.4rem/1 var(--sans); }
.path-overview { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 8px 12px; padding: 15px 16px 19px; }
.path-overview strong { font: 800 2rem/.98 var(--display); }
.path-overview small { grid-column: 1 / -1; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.path-toggle { font-size: 1.25rem; font-weight: 800; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; width: 30px; height: 30px; line-height: 1; }
.path-card[open] .path-toggle { background: var(--ink); color: white; }
.path-card .close-indicator, .path-card[open] .open-indicator { display: none; }
.path-card[open] .close-indicator { display: inline; }
.path-detail { padding: 15px 16px 19px; border-top: 1px solid var(--line); }
.path-detail p { font-size: .9rem; line-height: 1.5; margin: 4px 0 14px; }
.path-detail h4 { font-size: .88rem; }
html[lang="ko"] .path-overview strong { font: 800 1.21rem/1.35 var(--sans); word-break: keep-all; }

.cycle { background: var(--blue-ink); color: var(--white); }
.cycle .eyebrow { color: var(--lime); }
.cycle .section-intro { max-width: 76ch; color: #d5dee4; }
.cycle-lesson { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 12px 28px; align-items: center; margin-top: 30px; padding: clamp(16px, 3vw, 27px); border: 1px solid #718493; border-radius: 5px; }
.cycle-lesson h3 { margin-block: 5px; font: 800 clamp(1.65rem, 3vw, 2.45rem)/1.1 var(--display); }
.cycle-meta, .cycle-materials { color: #c6d8e3; font-size: .88rem; }
.cycle-materials { margin-top: 6px; }
.cycle-materials strong { color: var(--white); margin-inline-end: .35em; }
.cycle-layout { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: 26px; }
.cycle-map { min-width: 0; }
.cycle-wheel { position: relative; max-width: 620px; aspect-ratio: 600 / 540; margin-inline: auto; }
.cycle-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #688597; stroke-width: 2; }
.cycle-ring .cycle-direction { stroke: #8daaba; stroke-width: 3; }
.cycle-agency { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 35%; aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 5px; padding: 12px; border: 1px solid #8daaba; border-radius: 50%; background: #223d50; text-align: center; }
.cycle-agency-icon { color: var(--lime); font-size: 1.6rem; line-height: 1; }
.cycle-agency strong { font: 800 clamp(1.14rem, 2.2vw, 1.75rem)/1.05 var(--display); }
.cycle-agency p, .cycle-hint { color: #c6d8e3; font-size: .78rem; line-height: 1.45; }
.cycle-hint { text-align: center; padding: 4px 14px 8px; }
.stage-notice { --stage-tone: #ffa9ad; --stage-x: 50%; --stage-y: 11.5%; }
.stage-explore { --stage-tone: #ffd08d; --stage-x: 83.8%; --stage-y: 38.7%; }
.stage-create { --stage-tone: #c7ed99; --stage-x: 71.5%; --stage-y: 82.4%; }
.stage-share { --stage-tone: #a9ddfa; --stage-x: 28.5%; --stage-y: 82.4%; }
.stage-reflect { --stage-tone: #d8beff; --stage-x: 16.2%; --stage-y: 38.7%; }
.stage-tabs button { position: absolute; inset: var(--stage-y) auto auto var(--stage-x); transform: translate(-50%, -50%); display: grid; gap: 4px; align-content: center; width: 30%; min-height: 70px; padding: 8px 10px; border: 1px solid var(--stage-tone); border-radius: 9px; background: #253e52; color: var(--white); text-align: left; transition: background-color .18s, color .18s, box-shadow .18s; }
.stage-tabs button:hover { background: #36536a; }
.stage-tabs button[aria-selected="true"] { background: var(--stage-tone); color: var(--ink); box-shadow: 0 0 0 5px #ffffff22; }
.stage-index { display: flex; justify-content: space-between; align-items: center; gap: 5px; color: var(--stage-tone); font: 700 .72rem/1.2 var(--mono); }
.stage-index span { font: 800 1.05rem/1 var(--sans); }
.stage-tabs button[aria-selected="true"] .stage-index { color: inherit; }
.stage-tabs strong { font: 800 clamp(1.05rem, 1.9vw, 1.55rem)/1.05 var(--display); overflow-wrap: anywhere; }
html[lang="ko"] .stage-tabs strong, html[lang="ko"] .cycle-agency strong { font: 800 clamp(.86rem, 1.45vw, 1.12rem)/1.25 var(--sans); word-break: keep-all; }
.stage-panel { display: grid; gap: 13px; min-width: 0; padding: clamp(15px, 2.7vw, 27px); border: 1px solid #718493; border-top: 4px solid var(--stage-tone); border-radius: 6px; background: #1c3548; }
.stage-kicker { display: flex; justify-content: space-between; gap: 8px; color: var(--stage-tone); font: 700 .77rem/1.4 var(--mono); }
.stage-panel h3 { margin: 7px 0 3px; font: 800 clamp(1.9rem, 3.2vw, 2.7rem)/1 var(--display); }
html[lang="ko"] .cycle-lesson h3, html[lang="ko"] .stage-panel h3 { font: 800 clamp(1.3rem, 2.7vw, 1.8rem)/1.35 var(--sans); word-break: keep-all; }
.stage-panel p:where(:not(.stage-kicker)), .stage-steps { color: #e1e9ef; font-size: .94rem; line-height: 1.6; }
.stage-panel .stage-verbs { margin-bottom: 8px; color: var(--stage-tone); font-weight: 800; }
.stage-panel h4 { color: var(--stage-tone); font-size: .85rem; }
.stage-prompt { padding: 9px 12px; border-left: 3px solid var(--stage-tone); background: #ffffff0c; }
.stage-steps { margin: -8px 0 0; padding-inline-start: 1.4em; }
.stage-steps li + li { margin-top: 6px; }
.stage-steps li::marker { color: var(--stage-tone); font-weight: 800; }
.stage-observation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stage-observation > div { padding: 10px 12px; border: 1px solid #718493; border-radius: 4px; }
.stage-extension, .cycle-sources { padding: 9px 0 0; border-top: 1px solid #718493; }
.stage-extension summary, .cycle-sources summary { cursor: pointer; font-weight: 800; }
.stage-extension p, .cycle-sources p { margin-top: 7px; }
.stage-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-controls .button { font-size: .85rem; }
.cycle-sources { margin-top: 25px; color: #e1e9ef; font-size: .9rem; }
.cycle-sources p { max-width: 78ch; }
.cycle-sources ul { margin: 8px 0 0; padding-inline-start: 1.2em; }
.cycle-sources a { text-underline-offset: 3px; }
@media (min-width: 901px) and (min-height: 720px) {
  .cycle-map { position: sticky; top: 100px; }
}
@media (max-width: 900px) {
  .cycle-layout { grid-template-columns: minmax(0, 1fr); }
  .cycle-wheel { max-width: 540px; }
}
@media (max-width: 620px) {
  .cycle-lesson, .stage-observation { grid-template-columns: minmax(0, 1fr); }
  .cycle-wheel { display: grid; gap: 10px; max-width: none; aspect-ratio: auto; }
  .cycle-ring { display: none; }
  .cycle-agency { position: static; transform: none; width: auto; aspect-ratio: auto; border-radius: 5px; gap: 3px; }
  .cycle-agency strong { font-size: 1.35rem; }
  .stage-tabs { display: grid; gap: 6px; }
  .stage-tabs button { position: static; transform: none; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 48px; }
  .stage-tabs strong { font-size: 1.19rem; }
  .stage-tabs button[aria-selected="true"] { box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .stage-panel:not([hidden]) { animation: cycle-reveal .25s ease-out; }
  @keyframes cycle-reveal { from { opacity: .65; transform: translateY(4px); } }
}

.about { background: var(--white); }
.about-layout { display: grid; grid-template-columns: .74fr 1.26fr; align-items: center; gap: clamp(35px, 7vw, 100px); }
.about-poster { position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; width: 100%; max-width: 380px; aspect-ratio: 4 / 4.6; border: 2px solid var(--ink); border-radius: 48% 48% 5px 5px; background: #b6d2db; box-shadow: 7px 7px var(--ink); }
.poster-disc { position: relative; width: 77%; aspect-ratio: 1; overflow: hidden; border: clamp(5px, 1vw, 9px) solid var(--ink); border-radius: 50%; background: #bdb6df; transform: translateY(-6%); }
.poster-disc img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.initials { position: absolute; right: 14%; bottom: 16%; padding: .18em .29em .24em; border-radius: 5px; background: var(--ink); color: var(--coral); font: 900 clamp(1.2rem, 2.6vw, 1.85rem)/.86 var(--display); letter-spacing: -.04em; }
.initials span { color: var(--lime); }
.poster-label, .poster-location { position: absolute; bottom: 38px; left: 18px; font: 700 .67rem/1.3 var(--mono); }
.poster-location { bottom: 17px; }
.bio-lead { font-weight: 800; font-size: 1.13rem; margin-top: 16px; }
.bio-lead + .section-intro { margin-top: 8px; }
.credential { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 13px; border-top: 1px solid var(--line); margin-top: 17px; padding-top: 15px; align-items: start; }
.credential h3 { font-size: 1rem; line-height: 1.3; margin-bottom: 4px; }
.credential p { font-size: .9rem; color: var(--muted); }
.credential p + p { margin-top: 5px; }
.credential-mark { display: grid; place-items: center; color: var(--ink); background: var(--blue); border-radius: 4px; font: 800 1rem/1 var(--mono); letter-spacing: .1em; min-height: 42px; }
.foundation-badge { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 5px 6px; min-height: 42px; display: grid; place-items: center; }
.foundation-badge img { width: 100%; height: auto; }
.credential .text-link { display: inline-block; font-size: .85rem; margin-top: 5px; }

.cv { border-top: 1px solid var(--line); margin-top: clamp(36px, 6vw, 72px); padding-top: 27px; }
.cv > h3, .archive-upcoming > h3 { margin-top: 6px; font: 800 clamp(2rem, 4vw, 3.35rem)/1.02 var(--display); }
.cv > .section-intro { margin-top: 10px; }
html[lang="ko"] .cv > h3, html[lang="ko"] .archive-upcoming > h3 { font: 900 clamp(1.5rem, 3vw, 2.25rem)/1.2 var(--sans); letter-spacing: -.045em; }
.cv-options, .archive-groups { display: grid; gap: 9px; margin-top: 19px; }
.cv-option, .archive-group { border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.cv-option > summary, .archive-group > summary, .activity-record > summary { cursor: pointer; list-style: none; }
.cv-option > summary::-webkit-details-marker, .archive-group > summary::-webkit-details-marker, .activity-record > summary::-webkit-details-marker { display: none; }
.cv-option > summary, .archive-group > summary { display: flex; align-items: center; gap: 12px; padding: 12px 15px; min-height: 51px; }
.cv-option > summary:hover, .archive-group > summary:hover, .activity-record > summary:hover { background: #f0f2e7; }
.cv-option > summary::after, .archive-group > summary::after, .activity-record > summary::after { content: "+" / ""; font: 700 1.2rem/1 var(--mono); }
.cv-option[open] > summary::after, .archive-group[open] > summary::after, .activity-record[open] > summary::after { content: "−" / ""; }
.cv-option > summary::after, .archive-group > summary::after { margin-left: auto; }
.cv-code { display: grid; place-items: center; width: 36px; min-height: 25px; background: var(--lime); border-radius: 3px; font: 700 .75rem/1 var(--mono); }
.cv-body { padding: 18px clamp(15px, 3vw, 30px); border-top: 1px solid var(--line); }
.cv-profile { font-weight: 800; margin-bottom: 18px; }
.cv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(20px, 5vw, 60px); }
.cv-group h4 { font-size: 1.04rem; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cv-group ul { padding-left: 19px; margin: 10px 0 0; }
.cv-group li + li { margin-top: 5px; }
.cv-entry { margin-top: 11px; }
.cv-entry h5 { font-size: 1rem; }
.cv-entry p, .cv-group li { color: var(--muted); font-size: .9rem; }
.cv-entry .cv-period { font: 700 .72rem/1.45 var(--mono); }
.cv-entry .cv-role { font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.cv-body > .text-link { display: inline-block; margin-top: 15px; font-size: .88rem; }

.archive { background: #e9ece7; border-block: 1px solid #d6d9cf; }
.archive .filters { margin-top: 20px; }
.archive-group > summary > strong { font: 800 1.85rem/1 var(--display); }
.group-count { color: var(--muted); font-size: .85rem; }
.archive-group > .record-list { border-top: 1px solid var(--line); }
.activity-record + .activity-record { border-top: 1px solid var(--line); }
.activity-record > summary { display: grid; grid-template-columns: minmax(90px, .55fr) minmax(0, 3fr) minmax(100px, auto) 14px; align-items: center; gap: 8px 15px; padding: 11px 15px; }
.activity-record > summary:focus-visible, .archive-group > summary:focus-visible, .cv-option > summary:focus-visible { outline-offset: -4px; }
.record-date { color: var(--muted); font: 700 .73rem/1.45 var(--mono); }
.record-main { display: grid; gap: 2px; }
.record-main strong { line-height: 1.35; }
.record-main small { color: var(--muted); font-size: .83rem; line-height: 1.45; }
.record-kind { justify-self: end; background: #e5ead9; border-radius: 18px; padding: 3px 9px; font-size: .73rem; font-weight: 800; }
.activity-record[data-kind="school"] .record-kind { background: #dce8ff; }
.activity-record[data-kind="project"] .record-kind { background: #ffe2d6; }
.activity-record[data-kind="scheduled"] .record-kind { background: #e0f3be; }
.activity-record[data-kind="planning"] .record-kind, .activity-record[data-kind="discussion"] .record-kind { background: #f9e8b8; }
.record-detail { color: var(--muted); font-size: .92rem; padding: 2px 15px 13px; }
.archive-upcoming { margin-top: 32px; padding-top: 21px; border-top: 1px solid var(--line); }
.archive-upcoming > .record-list { margin-top: 13px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }

.contact { background: var(--lime); }
.contact-layout { display: grid; grid-template-columns: .93fr 1.07fr; align-items: start; gap: clamp(35px, 7vw, 95px); }
.contact .section-intro { color: #283744; }
.address { margin-top: 28px; display: inline-flex; align-items: center; gap: 12px; padding: 10px 0; border-block: 1px solid var(--ink); }
.address > span { font-size: 2.2rem; line-height: 1; }
.address div { display: grid; }
.address div span { font: 700 .67rem/1.3 var(--mono); letter-spacing: .06em; }
.address strong { font-size: 1rem; }
.contact-card { background: var(--white); border: 2px solid var(--ink); box-shadow: 6px 6px var(--ink); padding: clamp(17px, 3vw, 33px); min-width: 0; }
.contact-card h3 { font: 800 2.4rem/1 var(--display); text-transform: uppercase; }
html[lang="ko"] .contact-card h3 { font: 800 1.55rem/1.25 var(--sans); }
.form-note { color: var(--muted); font-size: .87rem; margin: 8px 0 15px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.contact-card label { display: block; font-size: .89rem; font-weight: 800; margin-bottom: 11px; }
.contact-card input, .contact-card textarea, .contact-card select { display: block; margin-top: 4px; border: 1px solid #78838b; border-radius: 3px; color: var(--ink); background: #fff; padding: 8px 9px; width: 100%; min-height: 44px; font: 400 1rem/1.35 var(--sans); }
.contact-card textarea { resize: vertical; }
.contact-card [aria-invalid="true"] { border: 2px solid #a42d2d; }
.contact-card .form-actions { margin-top: 0; }
.contact-card .form-actions .ink { flex: 1 1 145px; }
.form-status { font-size: .88rem; margin-top: 8px; font-weight: 700; }
.form-status:empty { display: none; }
#form-status[data-state="invalid"] { color: #97272c; }
#draft-text { white-space: pre-wrap; }
.footer { background: var(--ink); color: var(--white); padding-block: 25px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 23px; }
.footer p, .footer .text-link { font-size: .85rem; }

@media (max-width: 1080px) {
  .header-inner { gap: 15px; }
  .pillar { min-height: 225px; }
  .shell { width: calc(100% - 48px); }
  .header-inner { min-height: 65px; justify-content: space-between; }
  .menu { display: block; }
  .nav { position: absolute; display: none; inset: 100% 0 auto; padding: 14px 24px 18px; background: var(--ink); border-bottom: 1px solid #8996a2; }
  .nav.open { display: grid; gap: 3px; }
  .nav a { display: block; padding: 9px 8px; }
  .nav .nav-contact { margin-top: 6px; text-align: center; }
}
@media (max-width: 850px) {
  .pillar-grid, .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar { min-height: 184px; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 77px; }
  .shell { width: calc(100% - 34px); }
  .hero-layout, .contact-layout, .about-layout { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.3rem, calc(12.8vw - 2px), 5.4rem); }
  .hero-layout { gap: 28px; padding-top: 42px; padding-bottom: 33px; }
  .hero-poster { width: min(89%, 340px); justify-self: center; }
  .ticker-inner { justify-content: center; gap: 4px 8px; }
  .about-poster { max-width: 255px; justify-self: center; }
  .stamp { width: 73px; font-size: 1.05rem; }
  .path-overview strong { font-size: 1.7rem; }
  .path-card summary { min-height: 0; }
  .credential { grid-template-columns: 76px minmax(0, 1fr); }
  .cv-grid { grid-template-columns: 1fr; }
  .activity-record > summary { grid-template-columns: minmax(0, 1fr) 14px; gap: 5px 10px; }
  .record-date, .record-main, .record-kind { grid-column: 1; }
  .record-kind { justify-self: start; }
  .activity-record > summary::after { grid-column: 2; grid-row: 2; }
}
@media (max-width: 440px) {
  .brand { font-size: clamp(.95rem, 4.3vw, 1.14rem); gap: 5px; }
  .brand-mark { font-size: 1.55rem; }
  .language button { padding-inline: 6px; }
  .menu { padding: 6px; }
  .menu svg { width: 20px; }
  .header-inner { gap: 7px; }
  .section-head .stamp { display: none; }
  .pillar-grid { gap: 9px; }
  .pillar { padding: 12px; }
  .pillar h3 { font-size: 1.5rem; }
  .pillar p { font-size: .84rem; }
  .path-grid, .form-row { grid-template-columns: 1fr; gap: 10px; }
  .form-row { gap: 0; }
}
@media (max-width: 500px) {
  .header-lockup { gap: 8px; }
  .header-lockup .brand { font-size: clamp(1rem, 4.3vw, 1.3rem); }
  .header-lockup .brand em { display: block; margin-top: 2px; }
  .header-foundation { width: 66px; min-height: 36px; padding: 5px 6px; }
}
@media (max-width: 350px) {
  .header-actions { gap: 5px; }
  .brand-mark { font-size: 1.23rem; }
  .language button { padding-inline: 5px; }
  .header-lockup .brand-mark { display: none; }
  .header-foundation { width: 57px; padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}