/* 일반 페이지 (AX, 소개, 개발, 사례, 공지, 문의) — home.css, solution.css 위에 얹는다 */

.page-plain { padding-top: 60px; }
.section--center { text-align: center; }
.section--center .lead, .section--center .eyebrow { margin-left: auto; margin-right: auto; }

/* ---------- AX 히어로: 도면 ---------- */
.ax-hero { position: relative; padding: 120px 0 132px; text-align: center; overflow: hidden;
  background:
    radial-gradient(ellipse at 72% 18%, rgba(255,255,255,.55), transparent 46%),
    linear-gradient(165deg, #F6EBE6 0%, #E7D2C6 42%, #CDA894 100%);
}
.ax-hero__grid { position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(142, 98, 82, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 98, 82, .16) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 50% 42%, #000 18%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 42%, #000 18%, transparent 72%);
}
.ax-hero .wrap { position: relative; }
.ax-hero__title { font-size: clamp(46px, 7.6vw, 100px); font-weight: 800; line-height: 1.05; letter-spacing: -0.05em; }
.ax-hero__sub { margin: 28px auto 0; max-width: 640px; font-size: clamp(18px, 1.9vw, 23px); color: #5c463c; line-height: 1.55; }
.ax-hero .link-arrow { color: #7a5344; }

/* ---------- 두 갈래 비교 ---------- */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 64px; }
.versus article { padding: 40px 36px; border-radius: 28px; background: var(--paper); }
.versus article.is-on { background: var(--ink); color: #f5f5f7; }
.versus em { display: block; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--rose); margin-bottom: 18px; }
.versus article.is-on em { color: var(--rose-light); }
.versus h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 12px; }
.versus p { color: var(--mid); }
.versus article.is-on p { color: var(--soft); }

/* ---------- 3열 비교 ---------- */
.cmp { display: grid; grid-template-columns: 140px 1fr 1fr 1.15fr; margin-top: 64px; border-top: 1px solid var(--line); }
.cmp div { padding: 26px 22px; border-bottom: 1px solid var(--line); }
.cmp__h { font-size: 14px; font-weight: 700; color: var(--mid); }
.cmp__label { font-size: 14px; font-weight: 700; color: var(--ink); }
.cmp__us { background: #F8F1ED; }
.cmp__us.cmp__h { color: var(--rose); }

/* ---------- 플랜 ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; text-align: left; }
.plan { display: flex; flex-direction: column; padding: 36px 32px 32px; border-radius: 28px; background: var(--paper); }
.plan h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.plan__one { margin-top: 8px; color: var(--mid); min-height: 52px; }
.plan__term { margin-top: 22px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.plan__cost { margin-top: 4px; font-size: 14px; color: var(--rose); font-weight: 600; }
.plan ul { margin: 28px 0 32px; display: grid; gap: 10px; }
.plan li { position: relative; padding-left: 16px; font-size: 15px; }
.plan li::before { content: ""; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: var(--rose); }
.plan .btn { margin-top: auto; }

/* ---------- 소개 ---------- */
.about-hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 28px 80px; background: var(--ink); color: #f5f5f7; }
.about-hero img { width: min(520px, 78vw); height: auto; margin-bottom: 36px; }
.about-hero h1 { font-size: clamp(40px, 6vw, 80px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; }
.about-hero p { margin-top: 22px; max-width: 560px; color: var(--soft); font-size: 20px; }
.prose { max-width: 760px; font-size: 20px; line-height: 1.8; color: var(--ink-2); }
.prose p + p { margin-top: 1.1em; }
.letter { max-width: 640px; margin: 0 auto; font-size: 19px; line-height: 1.95; }
.letter p + p { margin-top: 1.15em; }
.letter__title { font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.35; margin-bottom: 36px; }
.letter__sign { margin-top: 48px; text-align: right; font-weight: 600; }
.timeline { max-width: 820px; margin: 72px auto 0; }
.tl { display: grid; grid-template-columns: 150px 1fr; gap: 28px; padding: 32px 0; border-top: 1px solid var(--line); }
.tl b { font-size: 28px; font-weight: 700; letter-spacing: -0.04em; }
.tl li + li { margin-top: 8px; }
.tl li { color: var(--ink-2); }
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.visit address { font-style: normal; margin-top: 28px; font-size: 18px; line-height: 1.8; }
.visit address a { color: var(--rose); font-weight: 600; }
.map-card { display: flex; align-items: flex-end; min-height: 320px; padding: 28px; border-radius: 28px;
  background:
    linear-gradient(180deg, transparent 40%, rgba(17,17,17,.45)),
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(168,119,100,.18) 28px),
    repeating-linear-gradient(90deg, transparent, transparent 27px, rgba(168,119,100,.18) 28px),
    #E7DDD4;
}
.map-card span { color: #fff; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }

/* ---------- 개발: 만드는 것 ---------- */
.builds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.builds article { padding: 40px 34px; border-radius: 28px; background: var(--white); min-height: 280px; }
.builds em { display: block; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--rose); margin-bottom: 28px; }
.builds h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 12px; }
.builds p { color: var(--mid); }
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
.works article { padding: 32px 28px; border-radius: 22px; background: var(--paper); }
.works h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 8px; }
.works p { color: var(--mid); font-size: 15px; }
.flow--5 { grid-template-columns: repeat(5, 1fr); }
.flow--5 .flow__item { padding: 28px 18px 30px; }
.flow--5 .flow__item h3 { font-size: 22px; }
.flow--5 .flow__item::after { display: none; }

/* ---------- 사례 ---------- */
.cases { margin-top: 56px; border-top: 1px solid var(--line); }
.cases li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 4px; border-bottom: 1px solid var(--line); }
.cases em { flex-shrink: 0; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--soft); letter-spacing: .01em; transition: color .2s; }
.cases li:hover em { color: var(--rose); }

/* ---------- 공지 ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 36px; }
.filters button, .filters a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--white); color: var(--mid); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.filters button.is-on, .filters a.is-on { background: var(--ink); color: #fff; }
.board { margin-top: 28px; border-top: 1px solid var(--line); }
.board a, .board .row { display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; align-items: center; padding: 22px 4px; border-bottom: 1px solid var(--line); }
.board a:hover strong { color: var(--rose); }
.board time { color: var(--soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.board .is-pin { background: #F8F1ED; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-radius: 12px; }
.tag--info { color: var(--rose); }
.article { max-width: 760px; margin: 0 auto; min-width: 0; }
.article__meta { display: flex; gap: 14px; align-items: center; color: var(--mid); font-size: 14px; margin-bottom: 18px; }
.article h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.25; overflow-wrap: anywhere; }
.article__body { margin-top: 40px; font-size: 18px; line-height: 1.9; overflow-wrap: anywhere; }
.article__body pre, .article__body code { white-space: pre-wrap; }
.article__body table { display: block; max-width: 100%; overflow-x: auto; }
.article__body p + p, .article__body ul { margin-top: 1.1em; }
.article__body h2 { font-size: 20px; margin: 1.6em 0 .6em; }
.article__body li { position: relative; padding-left: 16px; }
.article__body li::before { content: ""; position: absolute; left: 0; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--rose); }
.article__nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); font-weight: 600; }
.article__nav a { color: var(--rose); }
.article__body img { max-width: 100%; height: auto; border-radius: 12px; }
.article__body iframe { width: 100%; max-width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; }
.article__files { margin-top: 28px; }
.article__files a { color: var(--rose); font-weight: 700; }
.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 28px; }
.pager a, .pager span { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 10px; background: var(--white); text-decoration: none; }
.pager .is-on { background: var(--ink); color: #fff; }

/* ---------- 문의 ---------- */
.contact { display: grid; grid-template-columns: 1.4fr .8fr; gap: 64px; align-items: start; }
.types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.type { display: block; padding: 22px 20px; border-radius: 20px; background: var(--white); border: 1.5px solid transparent; cursor: pointer; }
.type input { position: absolute; opacity: 0; pointer-events: none; }
.type b { display: block; font-size: 17px; margin-bottom: 4px; }
.type span { color: var(--mid); font-size: 14px; }
.type:has(input:checked) { border-color: var(--ink); background: #fff; box-shadow: 0 10px 30px rgba(17,17,17,.06); }
.form { display: grid; gap: 18px; margin-top: 28px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span, .checks > span, .extra > span { font-size: 13px; font-weight: 700; }
.field input, .field textarea, .field select { width: 100%; border: 0; border-radius: 14px; background: var(--white); font: inherit; font-size: 16px; color: var(--ink); }
.field input, .field select { height: 52px; padding: 0 16px; }
.field textarea { min-height: 140px; padding: 14px 16px; resize: vertical; }
.field .hint { color: #9a3b32; font-size: 13px; font-weight: 600; min-height: 1.2em; }
.extra { display: none; gap: 18px; }
body[data-type="ax"] .extra--ax,
body[data-type="solution"] .extra--solution,
body[data-type="dev"] .extra--dev { display: grid; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 99px; background: var(--white); font-size: 14px; cursor: pointer; }
.checks label:has(input:checked) { background: var(--ink); color: #fff; }
.consent { font-size: 15px; }
.consent label { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.consent details { margin: 10px 0 0 28px; color: var(--mid); font-size: 14px; }
.side-card { position: sticky; top: 132px; padding: 32px 28px; border-radius: 24px; background: var(--white); }
.side-card b { display: block; font-size: 13px; color: var(--mid); font-weight: 600; margin-bottom: 4px; }
.side-card p { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 22px; }
.side-card a { color: inherit; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form-error { color: #9a3b32; font-size: 14px; font-weight: 600; min-height: 1.2em; margin: 0 0 12px; }
.done { display: none; text-align: center; padding: 80px 0; }
body.is-sent .contact { display: none; }
body.is-sent .done { display: block; }

@media (max-width: 900px) {
  .versus, .plans, .builds, .works, .visit, .contact, .types { grid-template-columns: 1fr; }
  .cmp { grid-template-columns: 1fr 1fr; }
  .cmp__label { display: none; }
  .tl { grid-template-columns: 1fr; gap: 8px; }
  .flow--5 { grid-template-columns: 1fr; }
  .board a, .board .row { grid-template-columns: 72px 1fr; }
  .board time { grid-column: 2; }
  .side-card { position: static; }
  .cases li { flex-direction: column; gap: 4px; }
}