:root {
  --reading: min(760px, calc(100% - 48px));
}

.column-list h1,
.column-list h2,
.column-list p,
.column-card h2,
.column-card p,
.column-detail h1,
.column-detail p,
.column-body h2,
.column-body p,
.column-conclusion p,
.related-columns h2,
.related-columns p,
.column-cta h2,
.column-cta p,
.column-card__media,
.column-cover {
  margin: 0;
}

.column-list {
  padding: 96px 0 120px;
  background: var(--tint);
}

.column-list__head,
.related-columns__head {
  margin-bottom: 42px;
}

.column-list__head > p:last-child {
  max-width: 620px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.column-list__head h1,
.column-list__head h2,
.related-columns__head h2 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.15;
  letter-spacing:-0.018em;
}

.column-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.column-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.column-card:hover,
.column-card:focus-within {
  border-color: var(--blue);
  box-shadow: var(--shadow);
  transform: translateY(-6px);
}

.column-card__link {
  display: block;
  height: 100%;
}

.column-card__media {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--tint-soft);
}

.column-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.column-card:hover .column-card__media img,
.column-card:focus-within .column-card__media img {
  transform: scale(1.025);
}

.column-card__body {
  padding: 27px 27px 30px;
}

.column-card__meta {
  color: var(--blue);
  font-size: 12px;
  font-weight:700;
  letter-spacing: 0.04em;
}

.column-card h2 {
  margin-top: 12px;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.32;
  letter-spacing:-0.018em;
}

.column-card__body > p:not(.column-card__meta) {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
}

.column-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--blue);
  font-size: 14px;
  font-weight:700;
}

.column-card__more span {
  transition: transform 200ms ease;
}

.column-card:hover .column-card__more span,
.column-card:focus-within .column-card__more span {
  transform: translateX(4px);
}

.column-detail {
  padding-top: clamp(72px, 9vw, 124px);
}

.column-detail__header {
  max-width: 980px;
  text-align: center;
}

.column-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 46px;
  color: var(--blue);
  font-size: 14px;
  font-weight:700;
}

.column-back::before {
  content: "←";
}

.column-detail__header h1 {
  max-width: 900px;
  margin-inline: auto;
  font-size: clamp(43px, 6vw, 72px);
  line-height: 1.14;
  letter-spacing:-0.018em;
}

.column-detail__summary {
  max-width: 700px;
  margin: 27px auto 0;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 20px);
}

.column-detail__meta {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 13px;
}

.column-cover {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-top: clamp(52px, 7vw, 86px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--tint-soft);
  box-shadow: var(--shadow);
}

.column-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.column-body {
  width: var(--reading);
  margin-inline: auto;
  padding: clamp(72px, 9vw, 118px) 0;
  color: #3f3838;
  font-size: 18px;
  line-height: 1.95;
}

.column-body__lead {
  padding-bottom: 38px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: clamp(20px, 2.5vw, 25px);
  font-weight:600;
  line-height: 1.75;
  letter-spacing:-0.018em;
}

.column-body section {
  padding-top: 70px;
}

.column-body h2 {
  margin-bottom: 21px;
  color: var(--ink);
  font-size: clamp(28px, 3.5vw, 36px);
  line-height: 1.32;
  letter-spacing:-0.018em;
}

.column-body section p + p {
  margin-top: 20px;
}

.column-body ul {
  display: grid;
  gap: 12px;
  margin: 30px 0 0;
  padding: 24px 28px 24px 48px;
  border: 1px solid rgba(87, 3, 1, 0.12);
  border-radius: var(--radius-md);
  background: var(--tint-soft);
}

.column-body li::marker {
  color: var(--blue);
}

.column-conclusion {
  margin-top: 76px;
  padding: 30px 32px;
  border-left: 5px solid var(--blue);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--tint-soft);
}

.column-conclusion strong {
  color: var(--blue);
}

.column-conclusion p {
  margin-top: 8px;
}

.related-columns {
  padding: 90px 0 110px;
  border-top: 1px solid var(--line);
  background: #faf9f8;
}

.related-columns__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 960px) {
  .column-grid {
    grid-template-columns: 1fr;
  }

  .column-card__link {
    display: grid;
    grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
  }

  .column-card__media {
    height: 100%;
    aspect-ratio: auto;
  }

}

@media (max-width: 700px) {
  :root {
    --reading: calc(100% - 36px);
  }

  .column-detail__header h1 {
    font-size: clamp(36px, 10.2vw, 44px);
  }

  .column-list {
    padding-block: 72px 84px;
  }

  .column-card__link {
    display: block;
  }

  .column-card__media {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .column-card__body {
    padding: 24px;
  }

  .column-detail {
    padding-top: 56px;
  }

  .column-back {
    margin-bottom: 34px;
  }

  .column-cover {
    margin-top: 46px;
  }

  .column-body {
    padding-block: 62px 78px;
    font-size: 16px;
  }

  .column-body__lead {
    font-size: 19px;
  }

  .column-body section {
    padding-top: 56px;
  }

  .column-body ul,
  .column-conclusion {
    padding: 23px;
  }

  .related-columns {
    padding-block: 70px 82px;
  }

  .related-columns__grid {
    grid-template-columns: 1fr;
  }

}

/* --- Column motion (approved plan) --- */
.column-card h2 { transition: color 250ms ease; }
.column-card:hover h2,
.column-card:focus-within h2 { color: var(--blue); }
/* Cover settles from a slight zoom after the header, like a magazine spread opening. */
.reveal-ready .column-cover { transition-delay: 200ms; }
.column-cover img { transition: scale 1.1s ease-out 200ms; }
.reveal-ready .column-cover:not(.is-visible) img { scale: 1.04; }


.column-detail{padding-top:64px}.column-topnav,.column-detail__header.page-shell,.column-cover.page-shell{width:min(760px,calc(100% - 40px));max-width:760px;margin-inline:auto}
.column-back{margin:0 0 32px;color:var(--ink);font-size:14px;gap:10px}.column-back::before{width:30px;height:30px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center}
.column-cover.page-shell{padding:0;margin-top:0;margin-bottom:36px;aspect-ratio:4/3;border-radius:18px;box-shadow:5px 6px 0 #182b48;border:1.5px solid #182b48}.column-cover img{display:block;object-fit:contain}
.column-detail__header{text-align:left}.column-detail__header .eyebrow{display:inline-block;font-size:12px;padding:5px 9px;border-radius:5px;margin-bottom:12px}.column-detail__meta{display:inline-flex;justify-content:flex-start;margin:0 0 12px 14px;gap:12px}
.column-detail__header h1{font-size:clamp(28px,3.2vw,40px);line-height:1.4;margin:0}.column-detail__header .column-detail__summary{margin:18px 0 0;font-size:17px}.column-body{padding-top:40px}.column-card__media{aspect-ratio:4/3}.column-card__media img{object-fit:cover}
@media(max-width:700px){.column-detail{padding-top:32px}.column-cover.page-shell{margin-bottom:28px;border-radius:12px}.column-back{margin-bottom:24px}.column-detail__meta{font-size:11px;gap:8px}.column-detail__summary{line-height:1.8}}

.column-body{font-size:17px;line-height:1.85;color:#424b59}.column-body h2{font-size:26px;line-height:1.5;border-bottom:1px solid #e2e6ed;padding-bottom:12px}.column-body section{padding-top:42px}.column-body__lead{font-size:18px;font-weight:400;border:0;padding:0}.column-body ul{display:block;padding:0 0 0 22px;border:0;background:none;margin:20px 0}.column-body li{margin:9px 0}.column-conclusion{margin-top:40px;background:#f1f5ff;border-color:#2363ed}.column-body strong{color:#182b48}
.column-table-wrap{overflow-x:auto;margin:26px 0}.column-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.7;text-align:left}.column-table caption{text-align:left;font-weight:700;color:#182b48;margin-bottom:10px}.column-table th,.column-table td{padding:12px 14px;border-bottom:1px solid #dfe5ee;vertical-align:top}.column-table thead{background:#edf3ff;color:#182b48}.column-table thead th{border-bottom:2px solid #182b48}.column-table tbody th{font-weight:600;width:22%}
.column-inline-cta{width:min(760px,calc(100% - 40px));margin:0 auto 44px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #dfe5ee;padding-top:28px;margin-top:44px}.column-inline-cta a{background:#2161ed;color:white;padding:13px 24px;border-radius:8px;font-weight:700;font-size:15px;text-decoration:none}.column-inline-cta span{font-size:13px;color:#667085}
.related-columns{width:min(760px,calc(100% - 40px));margin:auto;padding:36px 0 68px;background:none}.related-columns>.page-shell{width:100%;padding:0}.related-columns__head{margin-bottom:24px}.related-columns__head h2{font-size:25px;margin-top:8px}.related-columns__grid{grid-template-columns:1fr;gap:14px}.related-columns .column-card__link{display:grid;grid-template-columns:96px 1fr;align-items:center;padding:16px;gap:18px}.related-columns .column-card__media{width:96px;height:80px;border-radius:8px;aspect-ratio:4/3}.related-columns .column-card__body{padding:0}.related-columns .column-card h2{font-size:17px;margin-top:6px}.related-columns .column-card__body>p:not(.column-card__meta){font-size:13px;line-height:1.6;margin-top:6px}.related-columns .column-card__more{display:none}.related-columns .column-card:hover{transform:translateY(-2px)}
@media(max-width:700px){.column-body{font-size:16px}.column-body h2{font-size:23px}.column-table th,.column-table td{padding:10px 8px;font-size:13px}.related-columns .column-card__link{grid-template-columns:72px 1fr;padding:12px;gap:12px}.related-columns .column-card__media{width:72px;height:72px}.column-inline-cta a{padding:12px 18px}}

.column-body > h2{margin-top:2.5rem;margin-bottom:1rem}.column-body > p{margin-bottom:1.1rem}.column-body > figure{margin:2rem 0}

/* Mobile reading: keep the article unobstructed and actions easy to reach. */
@media (max-width: 700px) {
  .column-detail__header h1 { font-size: clamp(26px, 6.7vw, 30px); line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
  .column-detail__header .column-detail__summary { font-size: 16px; line-height: 1.8; }
  .column-body { width: calc(100% - 40px); padding-top: 32px; padding-bottom: 44px; }
  .column-body h2 { font-size: 22px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
  .column-body__lead { font-size: 16px; }
  .column-inline-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .column-inline-cta a { min-height: 48px; display: flex; justify-content: center; align-items: center; text-align: center; }
  .column-inline-cta span { text-align: center; }
  body:has(.column-detail) .kakao-chat { position: static; width: fit-content; margin: 16px auto max(24px, env(safe-area-inset-bottom)); }
  .related-columns .column-card h2 { font-size: 16px; line-height: 1.5; }
  .related-columns .column-card__body > p:not(.column-card__meta) { display: none; }
  .column-cover img, .reveal-ready .column-cover:not(.is-visible) img { transition: none; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .column-cover img, .column-card, .column-card img, .column-card h2 { transition: none !important; animation: none !important; scale: 1 !important; }
  .column-card:hover, .column-card:focus-within { transform: none; }
}

/* Glass layer (matches pages-glass.css on about/work/service): cool base, translucent cards, blur ≤16px. */
:root{--glass-light:rgba(255,255,255,.66);--glass-light-strong:rgba(255,255,255,.78);--glass-border-light:rgba(15,23,42,.08);--glass-blur:blur(16px) saturate(130%);--glass-shadow:0 24px 64px -36px rgba(16,24,40,.28);--g-motion:200ms}
@media (max-width:700px){:root{--glass-blur:blur(12px) saturate(130%)}}
body{background:#f7f8fa}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40rem 26rem at 10% 12%,rgba(27,98,237,.10),transparent 64%),radial-gradient(34rem 24rem at 90% 40%,rgba(167,139,250,.08),transparent 64%)}
.column-list{background:transparent}
.column-card,.column-cover{border:1px solid var(--glass-border-light);border-radius:20px;background:var(--glass-light);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);transition:border-color var(--g-motion) ease,background-color var(--g-motion) ease}
.column-card{overflow:hidden}
.column-card:hover,.column-card:focus-within{border-color:rgba(27,98,237,.35);background:var(--glass-light-strong);transform:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.column-card,.column-cover{background:#fff}}

/* ---------- Final CTA: same treatment as the homepage (navy gradient, dark glass panel, trimmed padding). Copy stays per page. ---------- */
:root{--g-navy-2:#111827;--g-on-dark:#f9fafb;--glass-dark:rgba(255,255,255,.10);--glass-border-dark:rgba(255,255,255,.18);--radius-btn:12px}
.cta-section{position:relative;isolation:isolate;padding-block:120px;background:linear-gradient(180deg,var(--g-navy-2),#0b1220)}
.cta-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(48rem 28rem at 20% 20%,rgba(27,98,237,.28),transparent 62%),radial-gradient(40rem 26rem at 85% 85%,rgba(167,139,250,.16),transparent 64%)}
.cta-panel{background:var(--glass-dark);border:1px solid var(--glass-border-dark);border-radius:24px;color:var(--g-on-dark);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);padding-top:68px;padding-bottom:85px}
.cta-panel .eyebrow{color:#bcd3ff}
.cta-panel .motion-cta{border-radius:var(--radius-btn)}
.cta-panel .motion-cta:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media (max-width:960px){.cta-panel{padding-top:41px;padding-bottom:41px}}
@media (max-width:700px){.cta-panel{padding-top:34px;padding-bottom:34px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cta-panel{background:rgba(16,24,40,.92)}}