/* ================================================================ 공개 첫 화면 — "판독실"
 * CBCT 판독실처럼 어두운 남색 위에서, 겹쳐 세운 CT 단면을 식립 축이 관통하고
 * 그 위에 설계한 임플란트(로고)가 떠 있다. 이 장면 하나만 입체로 두고 나머지는 차분하게.
 */

.land {
  --abyss: #07162e;     /* 판독실 남색 — 로고 'Guide' 글자색에서 */
  --night: #0d2448;     /* 한 단계 올라온 면 */
  --cobalt: #1463e6;    /* 치아 몸체 */
  --glow: #3d9bff;      /* 'me!'의 빛 */
  --enamel: #eaf2fc;    /* 법랑 — 어두운 바탕 위 글자 */
  --titanium: #a7b4c4;  /* 임플란트 금속 — 보조 글자, 치수선 */
  background: var(--abyss); color: var(--enamel);
}
.land ::selection { background: var(--glow); color: var(--abyss); }
.land a:not(.btn) { color: var(--glow); }
.land :focus-visible { outline-color: var(--glow); }

/* ---- 상단 */
.topbar--land { position: sticky; background: rgba(7, 22, 46, .82); border-bottom: 1px solid rgba(61, 155, 255, .14); }
.landnav { display: flex; gap: 2px; flex: 1; justify-content: flex-end; }
.land .landnav a { padding: 8px 12px; border-radius: var(--radius-s); color: var(--titanium); text-decoration: none; font-size: 15px; font-weight: 500; }
.land .landnav a:hover { color: var(--enamel); background: rgba(61, 155, 255, .1); }

/* ---- 버튼 (어두운 바탕용) */
.btn--glow { background: var(--glow); border-color: var(--glow); color: #04122a; box-shadow: 0 0 0 0 rgba(61,155,255,.5), 0 10px 30px -8px rgba(61, 155, 255, .7); }
.btn--glow:hover { background: #69b2ff; border-color: #69b2ff; color: #04122a; }
.btn--ghost { background: rgba(234, 242, 252, .04); border-color: rgba(167, 180, 196, .38); color: var(--enamel); }
.btn--ghost:hover { background: rgba(234, 242, 252, .1); border-color: var(--titanium); color: #fff; }
.land .btn { min-height: 48px; padding: 0 22px; font-size: 16px; }
.land .btn--small { min-height: 36px; padding: 0 14px; font-size: 14px; }

/* ================================================================ 첫 화면 */
.hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 24px;
  min-height: min(860px, calc(100vh - 64px)); padding: 56px max(32px, calc((100vw - 1240px) / 2)) 72px;
  background:
    radial-gradient(60% 70% at 72% 48%, rgba(20, 99, 230, .32), transparent 70%),
    radial-gradient(40% 50% at 10% 100%, rgba(61, 155, 255, .08), transparent 70%);
  overflow: hidden;
}
.hero__text { position: relative; z-index: 2; max-width: 34rem; }
.hero__title { margin: 0 0 20px; font-size: clamp(32px, 4.1vw, 54px); line-height: 1.18; font-weight: 700; letter-spacing: -.028em; word-break: keep-all; color: #fff; }
.hero__lead { margin: 0 0 32px; font-size: 17px; line-height: 1.75; color: var(--titanium); word-break: keep-all; max-width: 32rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__fine { margin: 20px 0 0; font-size: 14px; color: var(--titanium); word-break: keep-all; }
.land .notice { margin-bottom: 24px; }
.land .session { border-top-color: rgba(167, 180, 196, .2); }
.land .session__who span { color: var(--titanium); }

/* ---- 3D 무대 (js/hero-bone.js · js/xsection3d.js) */
.stage { position: relative; height: min(660px, 64vw); min-height: 380px; }
.stage__poster { position: absolute; left: 50%; top: 46%; width: min(340px, 58%); height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45)); transition: opacity .9s ease; }
.stage.is-ready .stage__poster { opacity: 0; }
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.1s ease; touch-action: pan-y; cursor: grab; }
.stage__canvas:active { cursor: grabbing; }
.is-ready > .stage__canvas { opacity: 1; }
/* 3D 점에 붙는 표지: 화면 좌표는 스크립트가 transform 으로 준다 */
.tag3d { position: absolute; left: 0; top: 0; padding-left: 44px; font-size: 13px; font-weight: 600; color: var(--enamel); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .5s ease; text-shadow: 0 1px 8px rgba(7, 22, 46, .9); }
.tag3d::before { content: ""; position: absolute; left: 4px; top: 50%; width: 34px; height: 1px; background: var(--titanium); }
.tag3d::after { content: ""; position: absolute; left: 0; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 8px var(--glow); }
.tag3d.is-left { padding: 0 44px 0 0; text-align: right; }
.tag3d.is-left::before { left: auto; right: 4px; }
.tag3d.is-left::after { left: auto; right: 0; }
.tag3d--canal { color: #ffe2a8; }
.tag3d--canal::before { background: #ffcf6e; }
.tag3d--canal::after { background: #ffb347; box-shadow: 0 0 8px #ffb347; }
.is-placed .tag3d { opacity: 1; }
/* 조작: 뼈 투명도 · 처음 각도 */
.stage__ui { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 16px; border-radius: 999px; background: rgba(13, 36, 72, .72); border: 1px solid rgba(61, 155, 255, .24); backdrop-filter: blur(8px); font-size: 13px; color: var(--titanium); white-space: nowrap; opacity: 0; transition: opacity .6s ease .4s; }
.is-ready > .stage__ui { opacity: 1; }
.xray { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.xray input { width: 120px; accent-color: var(--glow); cursor: pointer; }
.stage__reset { min-height: 34px; border: 1px solid rgba(167, 180, 196, .35); background: transparent; color: var(--enamel); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.stage__reset:hover { border-color: var(--titanium); background: rgba(234, 242, 252, .08); }
.stage__hint { color: rgba(167, 180, 196, .8); }
.is-touched .stage__hint { display: none; }
.is-lean .stage__ui { display: none; }

/* 설계 근거 단면 */
.xsec { grid-column: 2; margin: 40px 0 0; }
.xsec__stage { position: relative; height: 380px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(61, 155, 255, .18);
  background: radial-gradient(70% 80% at 55% 45%, rgba(20, 99, 230, .28), transparent 70%), var(--night); }
.xsec__stage .stage__canvas { cursor: default; }
.xsec figcaption { margin-top: 12px; font-size: 14px; color: var(--titanium); word-break: keep-all; }

/* ================================================================ 다른 점 */
.why, .flow, .faq { padding: 104px max(32px, calc((100vw - 1240px) / 2)); }
.why { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; border-top: 1px solid rgba(61, 155, 255, .12); }
.why__head { position: sticky; top: 112px; align-self: start; }
.land h2 { margin: 0 0 16px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.25; font-weight: 700; letter-spacing: -.02em; color: #fff; word-break: keep-all; }
.why__head p { margin: 0; color: var(--titanium); line-height: 1.75; word-break: keep-all; max-width: 30rem; }
.why__list { margin: 0; }
.why__item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; padding: 28px 0; border-top: 1px solid rgba(167, 180, 196, .16); }
.why__item:last-child { border-bottom: 1px solid rgba(167, 180, 196, .16); }
.why__item dt { font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.why__item dd { margin: 0; color: var(--titanium); line-height: 1.75; word-break: keep-all; }
.why__spec { display: block; margin-top: 10px; font-size: 14px; color: var(--glow); }

/* ================================================================ 진행 순서 — 실제로 순서가 있으므로 번호 */
.flow { background: var(--night); }
.flow__list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; counter-reset: step; }
.flow__list li { position: relative; padding: 52px 20px 0 0; counter-increment: step; }
.flow__list li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: var(--glow); border: 1.5px solid rgba(61, 155, 255, .6); background: var(--night); z-index: 1; }
.flow__list li::after { content: ""; position: absolute; left: 34px; right: 0; top: 17px; height: 1px; background: linear-gradient(90deg, rgba(61, 155, 255, .6), rgba(61, 155, 255, .15)); }
.flow__list li:last-child::after { display: none; }
.flow__list b { display: block; font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.flow__list span { display: block; font-size: 14px; line-height: 1.6; color: var(--titanium); word-break: keep-all; }

/* ================================================================ 자주 묻는 질문 */
.faq { max-width: 880px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.faq details { border-top: 1px solid rgba(167, 180, 196, .16); }
.faq details:last-of-type { border-bottom: 1px solid rgba(167, 180, 196, .16); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; font-size: 18px; font-weight: 600; color: #fff; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--titanium); border-bottom: 2px solid var(--titanium); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details p { margin: 0 0 24px; color: var(--titanium); line-height: 1.75; word-break: keep-all; max-width: 44rem; }

/* ================================================================ 설계 문의 — 법랑색 판 위의 평범한 양식 */
.contact { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; padding: 96px max(32px, calc((100vw - 1240px) / 2)); background: var(--enamel); color: var(--ink); }
.contact h2 { color: var(--ink); }
.contact__intro p { margin: 0 0 12px; color: var(--ink-2); line-height: 1.75; word-break: keep-all; }
.contact__note { font-size: 14px; color: var(--ink-3) !important; }
.contact__form { max-width: none; }
.contact .f input, .contact .f select, .contact .f textarea { background: #fff; }
.contact a { color: var(--blue-text); }
.contact__send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.contact__send .hint { margin: 0; }
.contact__done { padding: 32px; border-radius: var(--radius-m); background: #fff; border: 1px solid #cfe1f6; }
.contact__done h3 { margin: 0 0 6px; font-size: 20px; }
.contact__done p { margin: 0; color: var(--ink-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact .f input[type=email] { min-height: 44px; }

.foot--land { background: var(--abyss); border-top-color: rgba(61, 155, 255, .14); color: var(--titanium); }
.foot--land .foot__links a { color: var(--titanium); }

/* ================================================================ 좁은 화면 */
@media (max-width: 980px) {
  .landnav { display: none; }
  .topbar--land { justify-content: space-between; }
  .hero { grid-template-columns: 1fr; padding-top: 24px; min-height: 0; }
  .stage { order: -1; height: min(480px, 108vw); min-height: 320px; margin: 0 -20px; }
  .xsec { grid-column: auto; }
  .xsec__stage { height: 300px; }
  .stage__ui { gap: 10px; padding-left: 12px; }
  .xray input { width: 90px; }
  .stage__hint { display: none; }
  .topbar--land .brand__word { display: block; width: 96px; }
  .why, .contact { grid-template-columns: 1fr; gap: 32px; }
  .why__head { position: static; }
  .why__item { grid-template-columns: 1fr; gap: 8px; }
  .flow__list { grid-template-columns: 1fr; gap: 28px; }
  .flow__list li { padding: 0 0 0 52px; }
  .flow__list li::after { left: 17px; right: auto; top: 38px; width: 1px; height: calc(100% - 10px); background: rgba(61, 155, 255, .35); }
  .why, .flow, .faq, .contact { padding-top: 72px; padding-bottom: 72px; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 560px) {
  .hero { padding-left: 20px; padding-right: 20px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .tag3d { font-size: 12px; padding-left: 30px; }
  .tag3d.is-left { padding: 0 30px 0 0; }
  .tag3d::before { width: 22px; }
}