:root { color-scheme: light; --paper:#fbfbfa; --ink:#24231f; --muted:#727067; --line:#e4e1da; --brand:#a44636; --tint:#faf1ec; --serif:Georgia,"Times New Roman",serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--brand); outline-offset:7px; border-radius:2px; }
::selection { background:#edd1c8; color:#40251e; }
img { display:block; max-width:100%; }
.wrap { width:min(1120px, calc(100% - 96px)); margin-inline:auto; }
.skip { position:fixed; z-index:10; top:12px; left:12px; padding:10px 18px; background:var(--paper); transform:translateY(-160%); }
.skip:focus { transform:translateY(0); }
header { height:112px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; gap:9px; align-items:center; font-size:24px; font-weight:650; letter-spacing:-1px; }
.brand img { width:43px; height:43px; }
nav { display:flex; gap:32px; font-size:14px; }
nav a { transition:color .15s; }
nav a:hover { color:var(--brand); }
.language-switch { border-left:1px solid var(--line); padding-left:20px; }
html[lang="en"] h1 { letter-spacing:-.045em; }
.hero { display:grid; grid-template-columns:1.25fr 1fr; gap:64px; align-items:center; padding:88px 0 96px; }
.eyebrow { display:block; font-size:11px; line-height:1.5; letter-spacing:.17em; font-weight:650; text-transform:uppercase; }
.hero .eyebrow { color:var(--brand); margin-bottom:30px; }
h1 { margin:0; font-size:clamp(36px,4.3vw,57px); font-weight:650; letter-spacing:-.065em; line-height:1.35; word-break:keep-all; }
h1 span { display:block; }
.hero-copy p { margin:25px 0 30px; font-size:16px; color:var(--muted); line-height:1.9; word-break:keep-all; }
.text-link { display:inline-flex; align-items:center; gap:28px; padding-block:8px; border-bottom:1px solid var(--brand); font-size:14px; color:var(--brand); font-weight:600; }
.arrow { transition:transform .2s; }
.text-link:hover .arrow { transform:translateY(3px); }
.hero-art { margin:0; }
.symbol-stage { background:var(--brand); border-radius:4px; aspect-ratio:1; display:grid; place-items:center; }
.symbol-stage img { width:83%; height:83%; }
figcaption { display:flex; justify-content:space-between; gap:10px; margin-top:13px; color:var(--muted); font-size:10px; letter-spacing:.07em; }
.section-head { display:flex; gap:24px; justify-content:space-between; align-items:center; margin-bottom:34px; }
.section-head h2 { margin:0; font-size:13px; font-weight:600; letter-spacing:.02em; }
.section-head .eyebrow { color:var(--muted); font-weight:500; }
.works { border-top:1px solid var(--line); padding:32px 0 76px; }
.work-note { display:grid; grid-template-columns:1fr 1fr; gap:64px; padding:18px 0 0; }
.work-note h3 { margin:0 0 16px; font-size:30px; letter-spacing:-.05em; font-weight:600; line-height:1.5; word-break:keep-all; }
.work-note p { color:var(--muted); font-size:15px; margin:0; word-break:keep-all; }
.status { display:inline-flex; align-items:center; gap:8px; font-size:11px; color:var(--brand); letter-spacing:.04em; margin-bottom:15px; }
.status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.categories { display:flex; gap:32px; align-items:flex-start; padding-top:8px; }
.category { flex:1; border-top:2px solid var(--ink); padding-top:18px; }
.category .number { font-family:var(--serif); color:var(--brand); font-size:14px; }
.category h3 { font-family:var(--serif); font-size:34px; font-weight:400; letter-spacing:-.03em; margin:17px 0 5px; }
.category p { font-size:13px; }
.about { background:var(--tint); padding:64px 0; }
.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.about-title { color:var(--brand); }
.about-title h2 { font-size:53px; font-weight:600; letter-spacing:-.05em; line-height:1.3; margin:20px 0 8px; }
.about-title p { margin:0; font-family:var(--serif); font-size:18px; font-style:italic; }
.definition { margin:0; padding:2px 0 0; }
.definition div { display:grid; grid-template-columns:28px 1fr; gap:8px; padding:18px 0; border-bottom:1px solid #e5cec5; }
.definition dt { color:var(--brand); font-family:var(--serif); font-size:16px; }
.definition dd { margin:0; font-size:15px; word-break:keep-all; }
.about-note { margin:24px 0 0; color:#7c6259; font-size:13px; word-break:keep-all; }
.connect { display:grid; grid-template-columns:1fr 1fr; gap:64px; padding:76px 0 80px; }
.connect h2 { font-size:30px; letter-spacing:-.04em; font-weight:600; margin:16px 0 12px; }
.connect p { margin:0; font-size:15px; color:var(--muted); word-break:keep-all; }
.socials { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.socials a { display:grid; grid-template-columns:1fr 1.2fr 20px; align-items:center; gap:12px; padding:15px 2px; border-bottom:1px solid var(--line); transition:color .15s,background .15s; }
.socials a:hover { color:var(--brand); background:var(--tint); }
.social-name { font-size:14px; font-weight:550; }
.handle { font-size:12px; color:var(--muted); }
.social-arrow { font-size:17px; text-align:right; }
footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding:26px 0 34px; font-size:12px; color:var(--muted); }
.footer-name { display:flex; align-items:center; gap:12px; }
.footer-name strong { color:var(--ink); font-size:14px; font-weight:600; }
footer a { border-bottom:1px solid var(--line); }
footer a:hover { color:var(--brand); }
@media(min-width:1500px) { .hero { padding-block:108px; } }
@media(max-width:850px) {
  .wrap { width:calc(100% - 56px); }
  header { height:88px; }
  .hero { gap:32px; padding:64px 0; grid-template-columns:1.2fr 1fr; }
  h1 { font-size:38px; }
  .hero-copy p { font-size:14px; }
  .work-note,.about-inner,.connect { gap:36px; }
  .work-note h3,.connect h2 { font-size:26px; }
  .categories { gap:20px; }
}
@media(max-width:620px) {
  .wrap { width:calc(100% - 40px); }
  header { height:auto; min-height:80px; padding-block:20px; flex-wrap:wrap; gap:16px; }
  .brand { font-size:22px; }
  .brand img { width:36px; height:36px; }
  nav { gap:16px; font-size:13px; flex-wrap:wrap; }
  .language-switch { padding-left:16px; }
  .hero { grid-template-columns:1fr; gap:40px; padding:48px 0 52px; }
  .hero .eyebrow { margin-bottom:22px; }
  h1 { font-size:clamp(32px,8.5vw,47px); }
  .hero-copy p { margin-top:20px; font-size:15px; }
  .hero-art { width:100%; max-width:420px; justify-self:center; }
  .symbol-stage { aspect-ratio:1.14; }
  .symbol-stage img { width:78%; height:88%; }
  .works { padding-bottom:48px; }
  .section-head { margin-bottom:20px; }
  .work-note { grid-template-columns:1fr; gap:34px; }
  .work-note h3 { font-size:27px; }
  .categories { gap:24px; }
  .category h3 { font-size:31px; }
  .about { padding:44px 0; }
  .about-inner { grid-template-columns:1fr; gap:24px; }
  .about-title h2 { font-size:44px; margin-top:16px; }
  .definition div { padding:16px 0; }
  .connect { grid-template-columns:1fr; gap:30px; padding:48px 0; }
  footer { align-items:flex-start; }
  .footer-name { flex-direction:column; align-items:flex-start; gap:4px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }