/* dakim marketing - site styles
   Plain CSS, no build step. Fonts are served from /assets/fonts. */

@font-face {
  font-family: "Paperlogy";
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/paperlogy/Paperlogy-8ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/paperlogy/Paperlogy-7Bold.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --paper: #FAF8F5;
  --surface: #FFFEFB;
  --tint: #EDF3F2;
  --ink: #1F2E35;
  --body: #44535C;
  --muted: #5B6A73;
  --petrol: #0E5C66;
  --petrol-deep: #0A464F;
  --petrol-soft: #CFE6E4;
  --amber: #F0A03C;
  --amber-deep: #D98A25;
  --line: #E3E0DA;
  --field: #75878F;
  --error: #A3271C;
  --todo: #FFF3B0;

  --r: 12px;
  --r-sm: 8px;
  --r-btn: 10px;
  --wrap: 1120px;
  --gutter: clamp(20px, 4vw, 40px);
  --z-sticky: 20;

  --head: "Paperlogy", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo",
    "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: -0.005em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--head);
  color: var(--ink);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.15rem + 3vw, 3rem); font-weight: 800; line-height: 1.2; }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.125rem); font-weight: 800; line-height: 1.25; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.35; }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; border-radius: 4px; }

[hidden] { display: none !important; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: var(--gutter); top: -100px;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--surface); font-weight: 700; text-decoration: none;
}
.skip:focus { top: 10px; z-index: 30; }

/* Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border: 1.5px solid transparent; border-radius: var(--r-btn);
  font: 700 1rem/1 var(--sans); letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    transform 0.12s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--amber); color: var(--ink); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 0.94rem; }
.btn:disabled { cursor: progress; opacity: 0.7; }

.textlink { font-weight: 700; color: var(--petrol); }

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--petrol-deep); }
  .btn--primary:hover:not(:disabled) { background: var(--amber-deep); color: var(--ink); }
}

/* Header -------------------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--head); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand__bar { flex: none; width: 22px; height: 4px; border-radius: 2px; background: var(--amber); }
.nav__links { display: flex; gap: 30px; list-style: none; }
.nav__links a { color: var(--body); font-weight: 600; font-size: 0.97rem; text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .brand:hover { color: var(--ink); }
  .nav__links a:hover { color: var(--petrol); }
}

/* Sections ------------------------------------------------------------ */

.section { padding: clamp(44px, 6vw, 76px) 0; }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }
.section--tint { background: var(--tint); }
.section__lead { margin-top: 14px; max-width: 38em; font-size: 1.125rem; }

/* Hero ---------------------------------------------------------------- */

.hero { padding: clamp(40px, 6vw, 72px) 0 clamp(44px, 6vw, 76px); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero__lead { margin-top: 22px; max-width: 33em; font-size: 1.1875rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 34px; }

.focus { padding: clamp(24px, 3.5vw, 36px); border-radius: var(--r); background: var(--tint); }
.focus__label { font-size: 0.92rem; font-weight: 700; color: var(--petrol); }
.focus h2 { margin-top: 8px; font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.55rem); line-height: 1.35; }
.focus ul { margin-top: 18px; list-style: none; }
.focus li { padding: 13px 0; border-top: 1px solid rgba(14, 92, 102, 0.18); line-height: 1.6; color: var(--ink); }
.focus li:last-child { padding-bottom: 0; }

/* Two-column sections (situations, FAQ) ------------------------------- */

.split {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 6vw, 80px); align-items: start;
}
.split__head { position: sticky; top: 104px; }
.split__lead { margin-top: 12px; max-width: 22em; }

.cases { list-style: none; }
.cases li { padding: 28px 0; border-top: 1px solid var(--line); }
.cases li:first-child { padding-top: 0; border-top: 0; }
.cases li:last-child { padding-bottom: 0; }
.cases h3 { font-size: 1.3rem; }
.cases p { margin-top: 10px; max-width: 38em; }

/* Services ------------------------------------------------------------ */

.services {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 6vw, 72px); margin-top: 32px;
}
.service { padding: 26px 0 30px; border-top: 1px solid var(--line); }
.service p { margin-top: 8px; max-width: 30em; }
.service .service__out { margin-top: 14px; font-size: 0.94rem; line-height: 1.55; color: var(--ink); }
.service__out span { display: block; font-weight: 700; color: var(--muted); }

/* Korea / Germany comparison ------------------------------------------ */

.compare { width: 100%; margin-top: 32px; border-collapse: separate; border-spacing: 0; }
.compare th, .compare td { padding: 16px 20px; text-align: left; vertical-align: top; }
.compare thead th { padding-top: 14px; padding-bottom: 14px; font-size: 0.92rem; font-weight: 700; color: var(--muted); }
.compare tbody th, .compare tbody td { border-top: 1px solid var(--line); }
.compare tbody th { width: 8.5em; padding-left: 0; font-family: var(--head); font-weight: 700; color: var(--ink); white-space: nowrap; }
.compare thead th:first-child { padding-left: 0; }
.compare .de { background: var(--tint); color: var(--ink); font-weight: 600; }
.compare thead .de { border-radius: var(--r) var(--r) 0 0; color: var(--petrol); font-weight: 700; }
.compare tbody .de { border-top-color: rgba(14, 92, 102, 0.18); }
.compare tbody tr:last-child .de { border-radius: 0 0 var(--r) var(--r); }

/* 90-day project flow ------------------------------------------------- */

.flow {
  list-style: none; counter-reset: flow;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin-top: 32px;
}
.flow li { position: relative; padding: 18px 18px 20px; border-radius: var(--r-sm); background: var(--tint); }
.flow li::before {
  counter-increment: flow; content: counter(flow);
  display: block; margin-bottom: 6px;
  font-family: var(--head); font-weight: 800; font-size: 0.92rem; color: var(--petrol);
}
.flow li:not(:last-child)::after {
  content: "→"; position: absolute; top: 50%; right: -22px; width: 22px;
  transform: translateY(-50%); text-align: center; font-size: 1.05rem; line-height: 1; color: var(--petrol);
}
.flow strong { display: block; font-family: var(--head); font-size: 1.05rem; letter-spacing: -0.02em; color: var(--ink); }
.flow span { display: block; margin-top: 6px; font-size: 0.94rem; line-height: 1.55; }

.handover { margin-top: 36px; }
.handover h3 { font-size: 1.08rem; }
.handover ul {
  list-style: none; margin-top: 14px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 4vw, 48px);
}
.handover li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; }

/* Fit ----------------------------------------------------------------- */

.fitgrid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 6vw, 80px); align-items: start;
}
.fitgrid .plain-list { margin-top: 24px; }
.fitgrid .plain-list li { color: var(--ink); }
.fitgrid__out { padding: clamp(22px, 3vw, 30px); border-radius: var(--r); background: var(--tint); }
.fitgrid__out h3 { font-size: 1.08rem; }
.fitgrid__out .plain-list { margin-top: 14px; }
.fitgrid__out .plain-list li { border-top-color: rgba(14, 92, 102, 0.18); color: var(--body); }

/* Sample document ----------------------------------------------------- */

.doc {
  margin-top: 36px; overflow: hidden; border-radius: var(--r); background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 46, 53, 0.06), 0 4px 8px rgba(31, 46, 53, 0.05);
}
.doc__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px;
  padding: 18px clamp(20px, 4vw, 44px); border-bottom: 1px solid var(--line);
  font-size: 0.92rem; color: var(--muted);
}
.doc__head strong { font-family: var(--head); font-weight: 700; font-size: 1.02rem; color: var(--petrol-deep); }
.doc__body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 46px) clamp(28px, 5vw, 64px);
  padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 44px) clamp(28px, 4vw, 48px);
}
.doc__block--wide { grid-column: 1 / -1; }
.doc h3 { font-size: 1.08rem; color: var(--petrol-deep); }
.doc__note { margin-top: 14px; font-size: 0.97rem; }

.rank { margin-top: 14px; list-style: none; }
.rank li {
  display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: 14px;
  padding: 13px 0; border-top: 1px solid var(--line);
}
.rank li:first-child { border-top: 0; padding-top: 0; }
.rank li:last-child { padding-bottom: 0; }
.rank__tag { font-size: 0.9rem; font-weight: 700; line-height: 1.9; color: var(--petrol); }
.rank__tag--hold { color: var(--muted); }
.rank strong { display: block; color: var(--ink); }
.rank p { font-size: 0.97rem; line-height: 1.6; }

.rewrite { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; align-items: start; margin-top: 14px; }
.rewrite__col { padding: 18px 20px 20px; border-radius: var(--r-sm); background: var(--paper); }
.rewrite__col--after { background: var(--tint); }
.rewrite__label { display: block; margin-bottom: 8px; font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.rewrite__col--after .rewrite__label { color: var(--petrol); }
.rewrite__col p { line-height: 1.65; color: var(--ink); }
.rewrite__col .rewrite__ko { margin-top: 10px; font-size: 0.94rem; color: var(--body); }

.contacts { width: 100%; margin-top: 8px; border-collapse: collapse; }
.contacts th {
  padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line);
  text-align: left; font-size: 0.9rem; font-weight: 700; color: var(--muted); white-space: nowrap;
}
.contacts td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.97rem; line-height: 1.55; }
.contacts tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.contacts th:last-child, .contacts td:last-child { padding-right: 0; }
.contacts .co { font-weight: 700; color: var(--ink); }
.contacts .who { color: var(--ink); }
.contacts .who small { display: block; font-size: 0.9rem; color: var(--muted); }
.contacts .mail { overflow-wrap: anywhere; }

/* About --------------------------------------------------------------- */

.about {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 6vw, 88px); align-items: start;
}
.about__text p { margin-top: 18px; max-width: 34em; font-size: 1.125rem; }
.facts { margin: 0; }
.facts div {
  display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 16px;
  padding: 15px 0; border-top: 1px solid var(--line);
}
.facts div:first-child { padding-top: 6px; border-top: 0; }
.facts dt { font-size: 0.94rem; font-weight: 700; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; color: var(--ink); }
.facts dd small { display: block; font-size: 0.94rem; font-weight: 400; color: var(--muted); }

/* FAQ ----------------------------------------------------------------- */

.faq details { border-top: 1px solid var(--line); }
.faq details:first-child { border-top: 0; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--head); font-weight: 700; font-size: 1.15rem; line-height: 1.4;
  letter-spacing: -0.02em; color: var(--ink);
}
.faq details:first-child summary { padding-top: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-family: var(--sans); font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--petrol);
  transition: transform 0.18s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; max-width: 38em; }

/* Closing call -------------------------------------------------------- */

.cta { padding: clamp(44px, 6vw, 76px) 0; }
.cta__panel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px; align-items: center;
  padding: clamp(30px, 6vw, 60px); border-radius: var(--r); background: var(--petrol);
}
.cta__panel h2 { font-size: clamp(1.4rem, 1.05rem + 1.3vw, 1.9rem); line-height: 1.35; color: var(--surface); }
.cta__panel p { margin-top: 12px; color: var(--petrol-soft); }
.cta__panel :focus-visible { outline-color: var(--amber); }

/* Footer -------------------------------------------------------------- */

.site-foot { padding: 34px 0 44px; border-top: 1px solid var(--line); font-size: 0.94rem; color: var(--muted); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; }
.foot a { color: var(--body); }

/* Inner pages (contact, legal) ---------------------------------------- */

.page { padding: clamp(44px, 6vw, 80px) 0 clamp(56px, 8vw, 104px); }
.page__lead { margin-top: 16px; max-width: 32em; font-size: 1.1875rem; }

.contact-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 6vw, 88px); align-items: start; margin-top: clamp(36px, 5vw, 56px);
}
.contact-aside h2 { font-size: 1.25rem; }
.contact-aside h2:not(:first-child) { margin-top: 44px; }
.plain-list { margin-top: 16px; list-style: none; }
.plain-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.plain-list li:first-child { border-top: 0; padding-top: 0; }
.plain-list small { display: block; font-size: 0.94rem; color: var(--muted); }
.order-list { margin-top: 16px; padding-left: 1.3em; }
.order-list li { padding: 0 0 12px 4px; }
.order-list li::marker { font-family: var(--head); font-weight: 800; color: var(--petrol); }

/* Form ---------------------------------------------------------------- */

.form { display: grid; gap: 22px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.field label { display: block; margin-bottom: 7px; font-weight: 700; font-size: 0.97rem; color: var(--ink); }
.field label small { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1.5px solid var(--field); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; line-height: 1.5;
  transition: border-color 0.18s var(--ease);
}
.field textarea { min-height: 168px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--petrol); outline: 3px solid var(--petrol-soft); outline-offset: 0; border-radius: var(--r-sm);
}
.field [aria-invalid="true"] { border-color: var(--error); }
.field__hint { margin-top: 7px; font-size: 0.92rem; color: var(--muted); }
.field__error { margin-top: 7px; font-size: 0.92rem; font-weight: 600; color: var(--error); }
.field__error:empty { display: none; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.form__foot p { flex: 1 1 16em; font-size: 0.92rem; color: var(--muted); }
.form__status {
  padding: 14px 18px; border-radius: var(--r-sm);
  background: #F8E4E1; color: var(--error); font-weight: 600;
}
.form__status a { color: inherit; }
.form__check { min-height: 65px; }
.form noscript .form__status { display: block; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done { padding: clamp(24px, 4vw, 36px); border-radius: var(--r); background: var(--tint); }
.form-done p { margin-top: 10px; }

/* Legal --------------------------------------------------------------- */

.prose { max-width: 44em; }
.prose h2 { margin-top: 64px; font-size: 1.6rem; }
.prose h3 { margin-top: 30px; font-size: 1.1rem; }
.prose p, .prose address, .prose ul { margin-top: 12px; }
.prose ul { padding-left: 1.2em; }
.prose address { font-style: normal; }
.prose .stamp { margin-top: 40px; font-size: 0.94rem; color: var(--muted); }

.todo { padding: 0 0.3em; border-radius: 4px; background: var(--todo); color: var(--ink); }
.draft-note {
  margin-top: 24px; padding: 14px 18px; border-radius: var(--r-sm);
  background: var(--todo); color: var(--ink); font-size: 0.97rem;
}

/* Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .hero__grid, .split, .about, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .split__head { position: static; }
  .services, .cta__panel, .fitgrid { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .flow li:not(:last-child)::after { top: auto; bottom: -24px; right: auto; left: 18px; transform: rotate(90deg); }
  .handover ul { grid-template-columns: minmax(0, 1fr); }
  .cta__panel .btn { justify-self: start; }
}

@media (max-width: 940px) {
  .nav__links { display: none; }
}

@media (max-width: 700px) {
  .doc__body, .rewrite { grid-template-columns: minmax(0, 1fr); }
  /* The comparison table becomes one block per row with labelled cells. */
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare tr { padding: 18px 0; border-top: 1px solid var(--line); }
  .compare tbody tr:first-child { border-top: 0; padding-top: 0; }
  .compare tbody th, .compare tbody td { width: auto; padding: 0; border: 0; white-space: normal; }
  .compare tbody td { margin-top: 10px; }
  .compare tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.86rem; font-weight: 700; color: var(--muted); }
  .compare tbody .de { padding: 12px 14px; border-radius: var(--r-sm); }
  .compare tbody tr:last-child .de { border-radius: var(--r-sm); }
  .compare tbody .de::before { color: var(--petrol); }
  /* The contact table becomes one stacked block per row. */
  .contacts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .contacts tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .contacts tbody tr:first-child { padding-top: 6px; }
  .contacts tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .contacts td { display: block; padding: 0; border: 0; }
  .contacts td + td { margin-top: 4px; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .nav { gap: 12px; }
  .brand { gap: 9px; font-size: 1.02rem; }
  .brand__bar { width: 16px; }
  .hero__lead, .page__lead, .about__text p, .section__lead { font-size: 1.0625rem; }
  .hero__actions .btn, .form__foot .btn { width: 100%; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .faq summary::after, .field input, .field select, .field textarea { transition: none; }
  .btn:active { transform: none; }
}