:root {
  color-scheme: light;
  --ink: #20211f; --muted: #62645f; --line: #d6d8d1; --paper: #fff;
  --font-body: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  --font-heading: var(--font-body);
  --text-section: clamp(36px, 3.8vw, 48px);
  --text-category: clamp(22px, 2.1vw, 26px);
  --text-title: 22px;
  --text-body: 16px;
  --text-description: 14px;
  --text-meta: 13px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 32px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
p, h1, h2, h3, h4 { margin: 0; }
h1, h2, h3, h4 { line-height: 1.15; }
.page, .contact-inner { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.header { min-height: 128px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); }
.home { display: inline-flex; align-items: center; gap: 18px; font-family: "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.home-icon { display: block; width: 80px; height: 80px; object-fit: contain; }
.home-suffix { font-size: .43em; font-weight: 500; letter-spacing: -.01em; margin-left: .18em; }
.header nav { display: flex; align-items: center; gap: 36px; }
.header nav a { font-size: var(--text-description); text-decoration: none; padding-block: 12px; }
.header nav a:hover { text-decoration: underline; }
.intro { display: grid; grid-template-columns: 1.65fr 1fr; align-items: start; column-gap: 8%; padding-block: 72px 88px; }
h1 { font-family: Arial, "Helvetica Neue", sans-serif; font-size: clamp(72px, 8.8vw, 132px); font-weight: 800; line-height: .96; letter-spacing: -.055em; }
h1 > span { display: block; }
.brand-name { font-weight: 400; color: var(--muted); }
.brand-initial { font-weight: 800; color: var(--ink); }
.intro-copy { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; gap: 36px; padding-bottom: 6px; max-width: 340px; }
.support-banners { display: grid; gap: 12px; }
.support-notice-link { justify-self: start; font-size: var(--text-meta); color: var(--muted); }
.support-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid var(--ink); text-decoration: none; }
.support-banner strong { display: block; font-size: 18px; line-height: 1.3; }
.support-banner small { display: block; margin-top: 4px; font-size: var(--text-meta); word-break: keep-all; }
.banner-art { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 86px; height: 72px; }
.banner-art img { flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain; }
.banner-art img + img { margin-left: -10px; }
.art-caret img + img { margin-left: -19px; }
.art-v img:first-of-type { transform: rotate(-14deg); }
.art-v img:last-of-type { transform: rotate(14deg); }
.art-caret img:first-of-type { transform: rotate(14deg); }
.art-caret img:last-of-type { transform: rotate(-14deg); }
.github-mark { filter: invert(1); }
.support-banner:hover strong { text-decoration: underline; }
.support-banner:focus-visible { outline-color: var(--ink); }
.github-banner { background: var(--ink); color: #fff; }
.coffee-banner { background: #ffdd00; border-color: #ffdd00; }
.intro-title { font-size: 24px; line-height: 1.55; font-weight: 600; letter-spacing: -.025em; }
.text-link { display: inline-flex; align-items: center; gap: 22px; font-size: var(--text-description); font-weight: 600; text-decoration-thickness: 1px; padding-block: 8px; }
.text-link span { font-size: 20px; font-weight: 400; line-height: 1; }
.text-link:hover { text-decoration-thickness: 2px; }
.work { padding-bottom: 88px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding-block: 38px 44px; border-top: 2px solid var(--ink); }
h2 { font-family: var(--font-heading); font-size: var(--text-section); font-weight: 600; line-height: 1.4; letter-spacing: -.035em; }
.section-head > p, .contact-heading p { font-size: var(--text-description); font-weight: 400; line-height: 1.75; word-break: keep-all; }
.section-head > p { color: var(--muted); }
.project-notice { margin-bottom: 8px; color: var(--muted); font-size: var(--text-meta); word-break: keep-all; }
.process { border-top: 2px solid var(--ink); padding-block: 38px 88px; }
.process h2 { margin-bottom: 24px; }
.development-guide { width: 100%; max-width: 650px; border-collapse: collapse; font-size: var(--text-body); text-align: left; }
.development-guide th, .development-guide td { border-bottom: 1px solid var(--line); padding: 12px 0; vertical-align: top; }
.development-guide thead th { color: var(--muted); font-size: var(--text-meta); font-weight: 400; }
.development-guide tbody th { padding-right: 24px; font-weight: 600; white-space: nowrap; }
.development-guide td { word-break: keep-all; }
.project { border-bottom: 1px solid var(--line); }
.project > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 32px; cursor: pointer; list-style: none; }
.project > summary::-webkit-details-marker { display: none; }
.project-name { font-size: var(--text-category); font-weight: 500; line-height: 1.4; letter-spacing: -.02em; word-break: keep-all; }
.project-toggle { flex: 0 0 24px; font-size: 28px; line-height: 1; text-align: center; }
.project-toggle::before { content: "+"; }
.project[open] .project-toggle::before { content: "−"; }
.project-copy { max-width: 650px; padding-bottom: 36px; }
.project-copy + .project-copy { border-top: 1px solid var(--line); padding-top: 24px; }
.project-copy > p { word-break: keep-all; }
.project-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 12px; }
.project-title, .notice-heading h3 { font-size: var(--text-title); font-weight: 600; line-height: 1.4; word-break: keep-all; }
.project-title .project-translation { font-size: .85em; font-weight: 400; }
.project-status { color: var(--muted); font-size: var(--text-meta); word-break: keep-all; }
.project-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; font-size: var(--text-description); line-height: 1.5; color: var(--muted); }
.project-stages li { border-top: 2px solid var(--line); padding-top: 8px; word-break: keep-all; }
.project-stages [aria-current="step"] { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.project-stages span { display: block; margin-top: 4px; font-size: var(--text-meta); font-weight: 400; }
.project-plan { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.project-plan > summary { width: fit-content; cursor: pointer; font-size: var(--text-description); font-weight: 600; }
.plan-note { margin-block: 16px 24px; font-size: var(--text-meta); color: var(--muted); word-break: keep-all; }
.stage-details { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.stage-details h4 { display: flex; justify-content: space-between; gap: 16px; font-size: var(--text-description); font-weight: 600; line-height: 1.5; }
.stage-details h4 span { color: var(--muted); font-size: var(--text-meta); font-weight: 400; white-space: nowrap; }
.stage-details dl { margin: 8px 0 0; font-size: var(--text-meta); }
.stage-details dl > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 3px; }
.stage-details dt { word-break: keep-all; }
.stage-details dd { flex-shrink: 0; margin: 0; color: var(--muted); }
.project-copy .text-link { margin-top: 14px; margin-right: 24px; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; padding-block: 104px 112px; }
.about-copy { max-width: 490px; padding-top: 8px; word-break: keep-all; }
.contact { background: var(--ink); color: #fff; }
.contact-inner { padding-block: 60px 26px; }
.contact-heading { display: flex; justify-content: space-between; align-items: start; gap: 32px; }
.contact-heading p { max-width: 400px; color: #c9cbc5; }
.contact-email { display: inline-block; margin-block: 28px 48px; font-family: Arial, sans-serif; font-size: clamp(20px, 2.3vw, 28px); line-height: 1.5; letter-spacing: -.025em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.contact-email span { margin-left: 16px; }
.contact-email:hover { text-decoration-thickness: 2px; }
.site-notices { display: flex; flex-wrap: wrap; gap: 0 28px; border-top: 1px solid #63655f; padding-block: 12px; font-size: var(--text-description); }
.site-notices > a { padding-block: 10px; text-decoration: none; }
.site-notices > a:hover { text-decoration: underline; }
.notice-copy { display: none; max-width: 720px; padding-block: 16px 32px; color: #c9cbc5; font-size: var(--text-body); word-break: keep-all; overflow-wrap: anywhere; }
.notice-copy:target { display: block; }
.notice-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 16px; color: #fff; }
.notice-heading a { flex-shrink: 0; font-size: var(--text-meta); }
.notice-copy > p + p { margin-top: 14px; }
.notice-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--text-description); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 24px; border-top: 1px solid #63655f; padding-top: 22px; font-size: var(--text-meta); color: #c9cbc5; }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }
.skip-link { position: absolute; left: 16px; top: 12px; transform: translateY(-200%); z-index: 2; background: #fff; padding: 12px 20px; }
.skip-link:focus { transform: none; }
.coming-soon-page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 48px 24px; }
.coming-soon { width: min(100%, 640px); text-align: center; }
.coming-soon-brand { display: inline-block; }
.coming-soon-brand img { display: block; width: 144px; height: 144px; object-fit: contain; }
.coming-soon-service { margin-top: 24px; color: var(--muted); font-size: 18px; font-weight: 600; }
.coming-soon h1 { margin-top: 12px; font-family: var(--font-heading); font-size: clamp(40px, 8vw, 72px); font-weight: 700; line-height: 1.15; letter-spacing: -.035em; }
.coming-soon-message { margin-top: 24px; color: var(--muted); font-size: 18px; }
.coming-soon .text-link { margin-top: 32px; }
@media (min-width: 1500px) { .intro { padding-block: 92px 112px; } }
@media (max-width: 1000px) {
  .page, .contact-inner { width: calc(100% - 64px); }
  .intro { column-gap: 6%; grid-template-columns: 1.4fr 1fr; }
  h1 { font-size: 8.9vw; }
  .intro-title { font-size: 21px; }
  .about { gap: 6%; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 20px; }
  .page, .contact-inner { width: calc(100% - 40px); }
  .header { min-height: 96px; }
  .home { gap: 14px; font-size: 36px; }
  .home-icon { width: 62px; height: 62px; }
  .header nav { gap: 16px; }
  .intro { grid-template-columns: minmax(0, 1fr); padding-block: 45px 54px; gap: 36px; }
  h1 { font-size: clamp(48px, 15.3vw, 102px); letter-spacing: -.045em; }
  .intro-copy { max-width: none; }
  .intro-title { font-size: 22px; }
  .work { padding-bottom: 54px; }
  .process { padding-block: 28px 54px; }
  .section-head { display: block; padding-block: 28px 30px; }
  .section-head > p { margin-top: 18px; }
  .section-head > p br { display: none; }
  .project > summary { padding-block: 28px; gap: 16px; }
  .project-copy { padding-bottom: 30px; }
  .about { grid-template-columns: 1fr; gap: 28px; padding-block: 62px; }
  .about-copy { padding-top: 0; }
  .contact-inner { padding-top: 42px; }
  .contact-heading { display: block; }
  .contact-heading p { margin-top: 20px; }
  .contact-email { margin-block: 28px 46px; }
  .contact-email span { margin-left: 8px; }
  .footer-bottom { gap: 16px; }
}
@media (max-width: 400px) {
  .header { flex-wrap: wrap; gap: 0; padding-block: 12px; }
  .header nav { width: 100%; justify-content: space-between; }
}

/* Voice introduction: retain the homepage typography, navigation and footer. */
.voice-page .header [aria-current="page"] { text-decoration: underline; }
.voice-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; padding-block: 72px 88px; }
.voice-kicker { margin-bottom: 20px; color: var(--muted); font-size: var(--text-description); }
.voice-hero h1 { font-family: var(--font-heading); font-size: clamp(42px, 5vw, 68px); font-weight: 600; line-height: 1.2; letter-spacing: -.04em; word-break: keep-all; }
.voice-lead { max-width: 520px; padding-top: 4px; word-break: keep-all; }
.voice-lead > p:first-child { font-size: 20px; line-height: 1.75; }
.voice-lead .text-link { margin-top: 24px; }
.voice-note { margin-top: 8px; color: var(--muted); font-size: var(--text-meta); }
.voice-section { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; border-top: 2px solid var(--ink); padding-block: 38px 64px; }
.voice-section-note { margin-top: 12px; color: var(--muted); font-size: var(--text-description); word-break: keep-all; }
.voice-sample { border: 1px solid var(--line); padding: 28px; }
.voice-sample audio { display: block; width: 100%; min-width: 0; margin-top: 22px; }
.voice-sample h3 { font-size: var(--text-title); font-weight: 600; line-height: 1.4; }
.voice-sample p { margin-top: 14px; color: var(--muted); word-break: keep-all; }
.voice-facts { margin: 0; }
.voice-facts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 24px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.voice-facts > div:first-child { padding-top: 0; }
.voice-facts dt { color: var(--muted); font-size: var(--text-description); }
.voice-facts dd { margin: 0; word-break: keep-all; }
@media (max-width: 700px) {
  .voice-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 45px 54px; }
  .voice-hero h1 { font-size: clamp(40px, 8vw, 56px); }
  .voice-lead { max-width: none; padding-top: 0; }
  .voice-lead > p:first-child { font-size: 18px; }
  .voice-section { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 28px 42px; }
  .voice-sample { padding: 24px; }
  .voice-facts > div { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
}