/* ================================================================ 공개 첫 화면 — "판독실"
 * CBCT 판독실처럼 어두운 남색. 눈에 띄는 것은 첫 화면의 3D 로고 하나(설계 모눈 바닥 위에 선다).
 * 진행 방식은 실제로 주고받는 것(자료 묶음 · 설계안 · 결과물)을 비스듬히 놓인 입체 카드로 보여 준다.
 */

.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; }

/* ================================================================ 첫 화면
 * 로고의 3D 렌더가 주인공. 뒤쪽에서 퍼지는 파란 빛과 바닥 반사로 제품 사진처럼 세우고,
 * 포인터를 따라 몇 도만 기운다 (움직임은 이것 하나) */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px;
  min-height: min(820px, calc(100vh - 64px)); padding: 48px max(32px, calc((100vw - 1200px) / 2)) 64px;
  background: radial-gradient(45% 55% at 74% 46%, rgba(20, 99, 230, .30), transparent 72%);
}
.hero__text { max-width: 35rem; }
.hero__title { margin: 0 0 20px; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.2; 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; }
.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 로고: 세 층을 깊이(translateZ)로 벌려 세우고, 무대 전체를 기울인다.
 *      --rx/--ry 기울기, --mx/--my 빛 위치(%), --sx/--sy 그림자 방향 — 모두 js/login.js 가 준다 */
.hero__art { position: relative; display: grid; place-items: center; perspective: 1100px; perspective-origin: 50% 45%; touch-action: pan-y; }
.hero__art::before { content: ""; position: absolute; left: 50%; top: 45%; width: 80%; aspect-ratio: 1; transform: translate(calc(-50% + var(--sx, 0px) * -1.5), calc(-50% + var(--sy, 0px) * -1.5)); border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 155, 255, .36), rgba(20, 99, 230, .1) 48%, transparent 70%); filter: blur(12px); }
.mark3d { --rx: 0deg; --ry: 0deg; --mx: 35%; --my: 25%; --sx: 0px; --sy: 0px;
  position: relative; width: min(470px, 88%); aspect-ratio: 720 / 655; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.mark3d__layer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.mark3d__shell { transform: translateZ(0); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.mark3d__glow { --z: 70px; transform: translateZ(var(--z)); }
.mark3d__implant { --z: 86px; transform: translateZ(var(--z)); filter: drop-shadow(var(--sx) var(--sy) 10px rgba(2, 10, 30, .55)); }
/* 빛 반사: 파란 윤곽 모양으로만 보이는 하이라이트가 기울기 방향을 따라 흐른다 */
.mark3d__sheen { position: absolute; inset: 0; transform: translateZ(1px); pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(190, 225, 255, .75), rgba(120, 190, 255, .18) 22%, transparent 42%);
  -webkit-mask: url(/img/mark-shell.webp) center / 100% 100% no-repeat; mask: url(/img/mark-shell.webp) center / 100% 100% no-repeat; }
/* 설계 모눈 바닥: 로고 발밑에 눕힌 판. 로고와 같은 3D 공간이라 함께 기울어 깊이가 드러난다 */
.mark3d__grid { position: absolute; left: 50%; top: 95%; width: 180%; aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(78deg); pointer-events: none; }
/* 정확히 90°로 눕히면 Chrome 이 판을 그리지 않는다 → 78°(살짝 내려다보는 각도) */
.mark3d__grid::before { content: ""; position: absolute; inset: 0;
  /* 눕히면 가로선이 1/5 로 눌리므로 가로선만 두껍게 그린다 */
  background-image: linear-gradient(rgba(61, 155, 255, .5) 5px, transparent 5px), linear-gradient(90deg, rgba(61, 155, 255, .45) 1px, transparent 1px),
    linear-gradient(rgba(61, 155, 255, .16) 4px, transparent 4px), linear-gradient(90deg, rgba(61, 155, 255, .14) 1px, transparent 1px);
  background-size: 12.5% 12.5%, 12.5% 12.5%, 2.5% 2.5%, 2.5% 2.5%; background-position: center;
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 75%); mask: radial-gradient(closest-side, #000 20%, transparent 75%); }
/* 바닥 그림자: 기울기와 반대로 움직인다 */
.mark3d__floor { position: absolute; left: 50%; bottom: -4%; width: 46%; height: 26px; border-radius: 50%; transform: translate(calc(-50% + var(--sx, 0px) * 1.6), 0);
  background: radial-gradient(closest-side, rgba(0, 6, 20, .7), transparent); filter: blur(6px); }
/* 한 번의 등장: 벌어져 있던 층이 제자리로 모인다 */
@media (prefers-reduced-motion: no-preference) {
  .mark3d__shell { animation: layer-in 1.2s cubic-bezier(.2, .8, .2, 1) .05s both; }
  .mark3d__glow { animation: layer-in-glow 1.2s cubic-bezier(.2, .8, .2, 1) .2s both; }
  .mark3d__implant { animation: layer-in-implant 1.3s cubic-bezier(.2, .8, .2, 1) .3s both; }
  @keyframes layer-in { from { opacity: 0; transform: translateZ(-120px); } to { opacity: 1; transform: translateZ(0); } }
  @keyframes layer-in-glow { from { opacity: 0; transform: translateZ(120px); } to { opacity: 1; transform: translateZ(var(--z)); } }
  @keyframes layer-in-implant { from { opacity: 0; transform: translateZ(200px) translateY(-30px); } to { opacity: 1; transform: translateZ(var(--z)); } }
}

/* ================================================================ 다른 점 */
.why, .how, .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); }

/* ================================================================ 진행 방식 — 세 단계, 실제로 주고받는 것을 입체로
 * 순서가 있는 내용이라 번호를 붙인다. 물건은 비스듬히 놓여 있다가 마우스를 올리면(키보드로 닿으면) 정면으로 돈다 */
.how { background: linear-gradient(var(--night), var(--abyss)); }
.how__list { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.how__step h3 { display: flex; align-items: center; gap: 12px; margin: 26px 0 10px; font-size: 21px; font-weight: 700; color: #fff; }
.how__step p { margin: 0; color: var(--titanium); line-height: 1.75; word-break: keep-all; }
.how__n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--abyss); background: var(--glow); box-shadow: 0 0 18px rgba(61, 155, 255, .5); }
.how__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 52px 0 0; }
/* 무대: 바닥 모눈 위에 물건을 비스듬히 놓는다 */
.obj { position: relative; height: 240px; display: grid; place-items: center; perspective: 900px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(60% 60% at 50% 62%, rgba(20, 99, 230, .28), transparent 72%), rgba(13, 36, 72, .6); border: 1px solid rgba(61, 155, 255, .16); }
.obj::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image: linear-gradient(rgba(61, 155, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 155, 255, .1) 1px, transparent 1px); background-size: 24px 24px;
  -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent); }
.obj__rig { position: relative; transform-style: preserve-3d; transform: rotateX(24deg) rotateY(-20deg) rotateZ(4deg); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.how__step:hover .obj__rig, .how__step:focus-within .obj__rig { transform: rotateX(8deg) rotateY(-6deg) rotateZ(0); }
.sheet, .report, .chip { color: var(--abyss); background: linear-gradient(160deg, #fff, #dde8f5); border: 1px solid rgba(255, 255, 255, .8); }
/* 1. 자료 묶음: 의뢰서 · 구강 스캔 · CT 세 장 */
.obj__rig--files { width: 230px; height: 108px; margin-top: 76px; }
.sheet { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; padding: 10px 18px; border-radius: 12px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, .38); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sheet b { font-size: 16px; } .sheet span { font-size: 12.5px; color: #4f5d70; }
.sheet--3 { transform: translate3d(24px, -84px, -40px); filter: brightness(.82); }
.sheet--2 { transform: translate3d(12px, -42px, -20px); filter: brightness(.92); }
.how__step:hover .sheet--3, .how__step:focus-within .sheet--3 { transform: translate3d(30px, -92px, -60px); }
.how__step:hover .sheet--2, .how__step:focus-within .sheet--2 { transform: translate3d(15px, -46px, -30px); }
.sheet__bar { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: rgba(20, 99, 230, .15); overflow: hidden; }
.sheet__bar i { display: block; width: 72%; height: 100%; background: linear-gradient(90deg, var(--cobalt), var(--glow)); }
/* 2. 설계안: 숫자로 보는 근거 + 승인 / 수정 요청 */
.obj__rig--report { width: 244px; }
.report { padding: 15px 18px; border-radius: 14px; box-shadow: 0 24px 40px rgba(0, 0, 0, .42); }
.report__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #c9d6e6; }
.report__head b { font-size: 15px; } .report__head span { font-size: 13px; font-weight: 700; color: var(--cobalt); }
.report__rows { display: grid; grid-template-columns: auto auto; gap: 4px 12px; margin: 0; font-size: 13px; }
.report__rows dt { color: #5a6574; } .report__rows dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.report__rows .is-key { color: #b4560b; }
.report__acts { display: flex; gap: 6px; margin-top: 12px; transform-style: preserve-3d; }
.report__acts span { flex: 1; text-align: center; padding: 6px 0; border-radius: 8px; font-size: 12.5px; font-weight: 700; }
.report__ok { background: var(--cobalt); color: #fff; box-shadow: 0 8px 16px rgba(20, 99, 230, .45); transform: translateZ(16px); }
.report__rev { background: #fff; border: 1px solid #c9d6e6; }
/* 3. 결과물: STL 파일 · 출력 가이드 배송 */
.obj__rig--deliver { width: 236px; display: grid; gap: 14px; }
.chip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; box-shadow: 0 16px 28px rgba(0, 0, 0, .38); }
.chip span { display: flex; flex-direction: column; font-size: 12.5px; color: #4f5d70; } .chip b { font-size: 15px; color: var(--abyss); }
.chip__icon { flex: none; width: 38px; height: 44px; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, var(--glow), var(--cobalt)); clip-path: polygon(0 0, 70% 0, 100% 24%, 100% 100%, 0 100%); }
.chip__icon--box { position: relative; height: 34px; background: linear-gradient(160deg, #cfa96c, #9a7440); clip-path: none; }
.chip__icon--box::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: 5px; background: rgba(255, 255, 255, .45); }
.chip--file { transform: translateZ(28px); }
.chip--box { transform: translateX(18px); }

/* ================================================================ 자주 묻는 질문 */
.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; }
  .topbar--land .brand__word { display: block; width: 96px; }
  .hero { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding: 20px 20px 56px; background: radial-gradient(70% 40% at 50% 20%, rgba(20, 99, 230, .3), transparent 72%); }
  .hero__art { order: -1; }
  .mark3d { width: min(290px, 70vw); }
  .mark3d__glow { --z: 36px; }
  .mark3d__implant { --z: 46px; }
  .why, .contact { grid-template-columns: 1fr; gap: 32px; }
  .why__head { position: static; }
  .why__item { grid-template-columns: 1fr; gap: 8px; }
  .how__list { grid-template-columns: 1fr; gap: 44px; }
  .obj { height: 210px; }
  .why, .how, .faq, .contact { padding-top: 72px; padding-bottom: 72px; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 560px) {
  .hero__cta .btn, .how__cta .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) { .obj__rig, .sheet { transition: none; } }

/* 언어 전환 (영어 ↔ 한국어) */
.landlang { margin-left: auto; margin-right: 14px; color: var(--titanium); font-size: 14px; text-decoration: none; }
.landlang:hover { color: #fff; text-decoration: underline; }
@media (max-width: 980px) { .landlang { margin-right: 8px; } }