/* 2026-10-29 피그마 시안(R0oLdjZLRsyT7CG0NApwh1) — 앱 셸·대지·설계·디자인 화면. app.css 다음에 읽어 옛 규칙을 덮는다.
   토큰은 시안 값 그대로: 바탕 #f2efe7 · 글자 #1f1d1a/#403b39/#5f5a52 · 흐린 글자 #737373 · 선 rgba(64,59,57,.2) */
@font-face {
  font-family: 'Pretendard';
  src: url('../vendor/fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
:root {
  --fg-ink: #1f1d1a;
  --fg-ink2: #403b39;
  --fg-sub: #5f5a52;
  --fg-mute: #737373;
  --fg-paper: #f2efe7;
  --fg-line: rgba(64, 59, 57, 0.2);
  --fg-pill: #f5f4ee;
  --fg-tool-line: #d6d6d6;
  --fg-shadow: 0 2.1px 8.4px rgba(0, 0, 0, 0.1);
  --fg-pre: 'Pretendard', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --fg-noto: 'Noto Sans KR', 'Pretendard', system-ui, -apple-system, sans-serif;
  --fg-geist: 'Geist', 'Pretendard', 'Noto Sans KR', system-ui, -apple-system, sans-serif; /* 랜딩·로그인(피그마 01 랜딩) — 라틴=Geist, 한글=Pretendard */
}

/* ── 셸 ─────────────────────────────────────────── */
.app { position: relative; font-family: var(--fg-pre); background: #fff; color: var(--fg-ink); }
.app-main { background: #fff; position: relative; z-index: 0; } /* 쌓임 맥락 — 지도(Cesium) 안의 높은 z-index 가 호버 사이드바·어둡게 막을 뚫지 않게 */
.app-rail {
  width: 60px; flex: none; background: #fff; border-right: 1px solid var(--fg-pill);
  display: flex; flex-direction: column; align-items: center; padding: 20px 0 16px; gap: 20px; z-index: 40; position: relative;
}
.app-rail button { background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; }
.app-rail-logo img { width: 35px; height: 17px; display: block; }
.app-rail-acts { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.app-rail-btn { width: 20px; height: 20px; }
.app-rail-btn img { display: block; }
.app-rail-btn.plus { width: 16px; height: 16px; border-radius: 50%; background: var(--fg-pill); }
.app-rail-btn.plus img { width: 7px; height: 7px; }
.app-rail-btn.globe img { width: 20px; height: 20px; }
.app-rail-spacer { flex: 1; }
.app-rail-avatar { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--fg-tool-line); display: grid; place-items: center; font-size: 11px; color: var(--fg-sub); }

/* 호버 사이드바 — 아이콘 줄 위로 240px, 뒤는 살짝 어둡게 */
.app-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.37); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; z-index: 50; }
.app-dim.on { opacity: 1; pointer-events: auto; }
.app-side {
  position: absolute !important; left: 0; top: 0; bottom: 0; width: 240px !important; z-index: 60;
  background: #fff; border-right: 1px solid var(--fg-pill); padding: 20px !important;
  display: flex; flex-direction: column; gap: 0 !important;
  transform: translateX(-100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; box-shadow: none !important;
}
.app-side.open { transform: none; visibility: visible; transition: transform 0.2s ease, visibility 0s; }
.app-side-head { height: 24px; display: flex; align-items: center; margin-bottom: 20px; }
.app-side-logo { background: none; border: 0; padding: 0; cursor: pointer; }
.app-side-logo img { width: 85px; height: 20px; display: block; }
.app-side-acts { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.app-side-act { display: flex; align-items: center; gap: 8px; padding-left: 6px; background: none; border: 0; cursor: pointer; font-family: var(--fg-noto); font-size: 12px; color: var(--fg-ink); text-align: left; }
.app-side-plus { width: 16px; height: 16px; border-radius: 50%; background: #d9d9d9; display: grid; place-items: center; flex: none; }
.app-side-plus img { width: 7px; height: 7px; }
.app-side-act.search img { width: 16px; height: 16px; flex: none; }
.app-side .app-search { flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 0; font-family: var(--fg-noto); font-size: 12px; color: var(--fg-ink); }
.app-side .app-search::placeholder { color: var(--fg-ink); }
.app-side .app-search:focus::placeholder { color: #b4ada2; }
.app-side .app-recents-label { margin: 0 0 8px; padding-left: 6px; font-family: var(--fg-noto); font-size: 10px; letter-spacing: 0; color: #8c867c; }
.app-side .app-recents { flex: 1; min-height: 0; overflow-y: auto; gap: 3px; }
.app-side .app-recent { flex: none; height: 28px; line-height: 28px; padding: 0 6px; border-radius: 6px; font-family: var(--fg-noto); font-size: 13px; color: var(--fg-ink); }
.app-side .app-recent:hover { background: #faf9f5; }
.app-side .app-recent.active { background: var(--fg-pill); }
.app-side-lang { display: flex; align-items: center; gap: 12px; margin: 16px 0; position: relative; }
.app-side-lang > img { width: 20px; height: 20px; }
.app-side-lang .lang-select-btn { background: none; border: 0; padding: 0; font-family: var(--fg-noto); font-weight: 500; font-size: 14px; color: var(--fg-ink); cursor: pointer; }
.app-side-lang .lang-globe { display: none; }
.app-side-lang .lang-menu { bottom: calc(100% + 6px); top: auto; left: 0; right: auto; }
.app-side .app-logout { height: 40px; border: 1px solid var(--fg-pill); border-radius: 8px; background: #fff; font-family: var(--fg-pre); font-weight: 500; font-size: 13px; color: var(--fg-ink2); }
.app-side .app-admin-link { margin: 10px 0 0; }

/* ── 상단 단계 탭 (대지 단계 외) ─────────────────── */
.app-top { padding: 30px 30px !important; justify-content: flex-start !important; z-index: 20; } /* 기획·설계·디자인 — 탭이 대지 카드 탭(레일+30px)과 같은 자리에 오게(주인님 2026-10-29) */
.app-body[data-step=narrative] .nar-main { padding: 0 30px 24px; } /* 탭 줄 아래 글 상자 여백 줄임(주인님) */
.app-top[hidden] { display: none !important; }
.step-tabs { display: flex; align-items: center; gap: 0; width: 340px; justify-content: space-between; }
.step-tab { background: none; border: 0; padding: 8px 0; min-width: 40px; text-align: left; cursor: pointer; font-family: var(--fg-noto); font-size: 14px; font-weight: 400; color: rgba(31, 29, 26, 0.5); }
.step-tab.on { font-weight: 600; color: var(--fg-ink2); }
.step-tab:disabled { opacity: 0.45; cursor: default; }
.step-tab:not(.on):not(:disabled):hover { color: var(--fg-ink2); }

/* ── 대지 ───────────────────────────────────────── */
.site .site-search { position: relative; inset: auto; z-index: auto; display: flex; align-items: center; justify-content: space-between; height: 48px; width: 100%; padding: 0 12px; background: #fff; border: 0.5px solid var(--fg-line); border-radius: 4px; }
.site .site-search input { flex: 1; width: auto; min-width: 0; font-family: var(--fg-noto); font-size: 14px; color: var(--fg-ink); }
.site .site-search input::placeholder { color: var(--fg-sub); }
.site-search-go { background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; }
.site-search-go img { width: 15px; height: 15px; }
.site-card { position: absolute; z-index: 12; top: 20px; left: 20px; width: 360px; background: #fff; border-radius: 10px; box-shadow: var(--fg-shadow); padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.site-card .step-tabs { width: 100%; padding: 0 0 0 0; }
.site .site-search-hits { top: 128px; left: 20px; width: 360px; background: #fff; border: 0.5px solid var(--fg-line); z-index: 13; }
.site.has-panel .site-search-hits { top: 150px; left: 30px; width: 340px; }
.site .site-panel {
  position: absolute; z-index: 12; left: 0; top: 0; bottom: 0; right: auto; width: 400px;
  background: #fff; border: 0; border-radius: 0; padding: 30px; display: flex; flex-direction: column; gap: 30px; overflow-y: auto;
  box-shadow: 4px 0 18px rgba(0, 0, 0, 0.06);
}
.sp-top { display: flex; flex-direction: column; gap: 12px; }
.sp-body { display: flex; flex-direction: column; gap: 30px; }
.sp-headblock { display: flex; flex-direction: column; gap: 12px; }
.site .sp-eyebrow { font-family: var(--fg-pre); font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--fg-ink2); }
.sp-titles { display: flex; flex-direction: column; gap: 4px; }
.site .sp-title { font-family: var(--fg-pre); font-weight: 600; font-size: 24px; margin: 0; color: var(--fg-ink); }
.site .sp-addr { font-family: var(--fg-pre); font-size: 16px; margin: 0; color: var(--fg-sub); }
.site .sp-rows { margin: 0; border-top: 1px solid var(--fg-paper); display: flex; flex-direction: column; }
.site .sp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 0; border-bottom: 1px solid var(--fg-paper); }
.site .sp-label { font-family: var(--fg-pre); font-size: 12px; color: var(--fg-sub); flex: none; min-width: 80px; }
.site .sp-value { font-family: var(--fg-pre); font-weight: 500; font-size: 14px; color: var(--fg-ink); text-align: right; margin: 0; }
.site .sp-reading { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 20px; }
.site .sp-reading-label { font-family: var(--fg-pre); font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--fg-ink2); margin: 0; }
.sp-finds { display: flex; flex-direction: column; gap: 20px; }
.site .sp-find { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site .sp-find-title { font-family: var(--fg-pre); font-weight: 500; font-size: 14px; color: var(--fg-ink); }
.site .sp-find-text { font-family: var(--fg-pre); font-size: 13px; line-height: 1.6; color: var(--fg-sub); }
.site .sp-cta { flex: none; width: 100%; height: 40px; margin: 0; padding: 0 20px; border: 0; border-radius: 8px; background: var(--fg-ink2); color: #fff; font-family: var(--fg-pre); font-weight: 500; font-size: 13px; cursor: pointer; }
.site .sp-cta:hover { background: var(--fg-ink); }
.site.has-panel .site-country, .site.has-panel .site-prec-btn, .site.has-panel .site-prec { left: 420px; }
.site.has-panel .site-region { left: 420px; }

/* 오른쪽 세로 도구막대 — 맨 위 2D/3D·영역 그리기(우리 것), 그 아래 VWorld 기본 도구 */
.site-tools { position: absolute; z-index: 12; top: 20px; right: 20px; width: 44px; display: flex; flex-direction: column; gap: 8px; }
.site-tool-box { width: 44px; background: #fff; border: 0; border-radius: 10px; box-shadow: var(--fg-shadow); }
.site-tool-box.seg { display: flex; flex-direction: column; align-items: center; padding: 4px; }
.site-tool-box.seg button { width: 36px; height: 33px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-family: var(--fg-noto); font-weight: 500; font-size: 11.5px; color: var(--fg-ink); }
.site-tool-box.seg button.on { background: var(--fg-ink2); color: #fff; }
.site-tool-box.draw { height: 67px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding: 0; }
.site-check { width: 12.6px; height: 12.6px; border: 1.05px solid var(--fg-sub); border-radius: 2.1px; display: grid; place-items: center; }
.site-tool-box.draw.on .site-check { background: var(--fg-ink2); border-color: var(--fg-ink2); }
.site-tool-box.draw.on .site-check::after { content: ''; width: 5px; height: 3px; border: solid #fff; border-width: 0 0 1.4px 1.4px; transform: translateY(-1px) rotate(-45deg); }
.site-tool-label { white-space: pre-line; text-align: center; font-family: var(--fg-pre); font-weight: 600; font-size: 10px; line-height: 1.2; color: var(--fg-mute); }
.site-tool-box.draw.on .site-tool-label { color: var(--fg-ink2); }
.site .site-toast { background: rgba(31, 29, 26, 0.9); border: 0; color: #fff; font-family: var(--fg-pre); }

/* VWorld 도구 — 아래 가운데 가로 줄(07-31) → 오른쪽 세로 막대(10-29 시안). API 가 만드는 DOM 이라 !important 로 덮는다 */
#naviTopPannel3d.dt-api-map--tool {
  top: 176px !important; right: 20px !important; left: auto !important; bottom: auto !important; transform: none !important;
  width: 44px !important; height: auto !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important;
  padding: 0 !important; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12)); z-index: 6 !important; flex-wrap: nowrap !important; max-width: none !important;
}
#naviTopPannel3d .dt-api-map--tool-btns,
#naviTopPannel3d .dt-api-map--tool-btns-measure {
  flex-direction: column !important; width: 44px !important; height: auto !important; margin: 0 !important;
  background: #fff; border: 1px solid var(--fg-tool-line); border-radius: 10px; box-shadow: none !important; overflow: hidden;
}
/* 앞 두 묶음(나침반·위치 / 확대·축소·초기화면·이동)은 시안에서 한 상자 — 이어 붙인다 */
#naviTopPannel3d .dt-api-map--tool-btns:first-child { border-bottom: 0; border-radius: 10px 10px 0 0; }
#naviTopPannel3d .dt-api-map--tool-btns + .dt-api-map--tool-btns { margin-top: -8px !important; border-top: 0; border-radius: 0 0 10px 10px; }
#naviTopPannel3d .dt-api-map--tool-bt {
  width: 42px !important; height: 41px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: #fff !important; box-shadow: none !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; position: relative;
}
#naviTopPannel3d .dt-api-map--tool-btns .dt-api-map--tool-bt + .dt-api-map--tool-bt,
#naviTopPannel3d .dt-api-map--tool-btns + .dt-api-map--tool-btns .dt-api-map--tool-bt:first-child { border-top: 1px solid #ececec !important; }
#naviTopPannel3d .dt-api-map--tool-bt:hover { background: #faf9f5 !important; }
#naviTopPannel3d .dt-api-map--tool-bt::before { width: 18px !important; height: 18px !important; margin: 0 !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; }
#naviTopPannel3d .dt-api-map--tool-bt-compass #ws3dCompas { position: absolute; inset: 0; font-size: 0; background: url('../assets/ui/map-compass.svg') center / 18px no-repeat; }
#naviTopPannel3d .dt-api-map--tool-bt-compass::before { display: none !important; }
#naviTopPannel3d .dt-api-map--tool-bt-current::before { background-image: url('../assets/ui/map-locate.svg') !important; }
#naviTopPannel3d .dt-api-map--tool-bt-plus::before { background-image: url('../assets/ui/map-zoomin.svg') !important; width: 16px !important; height: 16px !important; }
#naviTopPannel3d .dt-api-map--tool-bt-minus::before { background-image: url('../assets/ui/map-zoomout.svg') !important; }
#naviTopPannel3d .dt-api-map--tool-bt-max::before { background-image: url('../assets/ui/map-fullscreen.svg') !important; }
#naviTopPannel3d .dt-api-map--tool-bt-mouse::before { background-image: url('../assets/ui/map-mouse.svg') !important; width: 14px !important; }
/* 측정 묶음 — 아이콘 20px + 글자 10px */
#naviTopPannel3d .dt-api-map--tool-btns-measure .dt-api-map--tool-bt { height: 46px !important; gap: 2px; font-family: var(--fg-pre) !important; font-weight: 600 !important; font-size: 10px !important; line-height: 1 !important; color: var(--fg-mute) !important; text-indent: 0 !important; }
#naviTopPannel3d .dt-api-map--tool-btns-measure .dt-api-map--tool-bt + .dt-api-map--tool-bt { border-top: 1px solid #ececec !important; }
#naviTopPannel3d .dt-api-map--tool-btns-measure .dt-api-map--tool-bt::before { width: 20px !important; height: 20px !important; }
#naviTopPannel3d .dt-api-map--tool-bt-length::before { background-image: url('../assets/ui/map-ruler.svg') !important; }
#naviTopPannel3d .dt-api-map--tool-bt-area::before { background-image: url('../assets/ui/map-area.svg') !important; transform: scaleY(-1); }
#naviTopPannel3d .dt-api-map--tool-bt-height::before { background-image: url('../assets/ui/map-height.svg') !important; }
#naviTopPannel3d .dt-api-map--tool-bt-reset::before { background-image: url('../assets/ui/map-reset.svg') !important; }
/* 이동 조작기(마우스 버튼으로 여는 방향 원) — 도구막대 왼쪽 옆, 시안의 100px 흰 원 */
#naviBottomPannel3d.dt-api-map--move { top: 357px !important; right: 83px !important; left: auto !important; bottom: auto !important; width: 100px !important; height: 100px !important; transform: none !important; z-index: 6 !important; }
#naviBottomPannel3d .dt-api-map--move-btns { position: relative; width: 100px !important; height: 100px !important; border-radius: 50%; background: url('../assets/ui/map-joystick.svg') center / 100px no-repeat !important; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12)); }
#naviBottomPannel3d .dt-api-map--move-bt { width: 34px !important; height: 34px !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 50% !important; }
#naviBottomPannel3d .dt-api-map--move-bt::before { display: none !important; }
#naviBottomPannel3d .dt-api-map--move-bt:hover { background: rgba(64, 59, 57, 0.07) !important; }
#naviBottomPannel3d .dt-api-map--move-bt-up { top: 2px !important; left: 33px !important; right: auto !important; bottom: auto !important; }
#naviBottomPannel3d .dt-api-map--move-bt-dw { bottom: 2px !important; left: 33px !important; top: auto !important; right: auto !important; }
#naviBottomPannel3d .dt-api-map--move-bt-lt { left: 2px !important; top: 33px !important; right: auto !important; bottom: auto !important; }
#naviBottomPannel3d .dt-api-map--move-bt-rt { right: 2px !important; top: 33px !important; left: auto !important; bottom: auto !important; }
#naviBottomPannel3d .dt-api-map--move-close { position: absolute !important; top: -3px !important; right: -3px !important; left: auto !important; bottom: auto !important; width: 18px !important; height: 18px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: url('../assets/ui/map-joystick-close.svg') center / 25px no-repeat !important; font-size: 0 !important; }
#naviBottomPannel3d .dt-api-map--move-close::before { display: none !important; }

/* ── 설계(매스·평면) · 디자인 공용 틀 — 시안 02 매스 / 03 평면 / 04 디자인 ── */
.bld {
  position: absolute; inset: 0; display: grid; grid-template-columns: 350px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  column-gap: 36px; padding: 0 30px 30px 30px; font-family: var(--fg-pre); color: var(--fg-ink); background: #fff;
}
.bld-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; min-width: 0; }
.bld-title { margin: 0; font-family: var(--fg-pre); font-weight: 600; font-size: 32px; letter-spacing: -0.3px; color: var(--fg-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bld-save { display: flex; align-items: center; gap: 20px; flex: none; }
.bld-hint { font-size: 11px; line-height: 1.55; color: var(--fg-sub); white-space: pre-line; }
.bld-save-wrap { position: relative; }
.bld-save-btn { height: 40px; min-width: 80px; padding: 0 18px; border: 1px solid var(--fg-line); border-radius: 10px; background: #fff; font-family: var(--fg-pre); font-weight: 500; font-size: 13px; color: var(--fg-ink2); cursor: pointer; }
.bld-save-btn:hover:not(:disabled) { border-color: var(--fg-ink2); }
.bld-save-btn:disabled { opacity: 0.5; cursor: default; }
/* 버전 — 저장 버튼에 마우스를 올리면 아래로 펼쳐진다(시안 03 평면 접힘 프레임) */
.bld-vpop { display: none; position: absolute; right: 0; top: 100%; padding-top: 8px; width: 300px; z-index: 30; }
.bld-save-wrap:hover .bld-vpop, .bld-save-wrap:focus-within .bld-vpop { display: block; }
.bld-vpop > * { background: #fff; }
.bld-vpop-label { padding: 16px 16px 10px; border-radius: 10px 10px 0 0; font-size: 10px; color: var(--fg-sub); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.bld-vlist { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; max-height: 360px; overflow-y: auto; border-radius: 0 0 10px 10px; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08); }
.bld-vitem { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--fg-pill); border-radius: 6px; background: #fff; text-align: left; cursor: pointer; font-family: var(--fg-pre); }
.bld-vitem:hover:not(:disabled) { border-color: var(--fg-line); }
.bld-vitem.on { border-color: var(--fg-ink2); }
.bld-vthumb { width: 40px; height: 40px; flex: none; border-radius: 2px; background: #d9d9d9; object-fit: cover; overflow: hidden; display: grid; place-items: center; }
.bld-vthumb svg { width: 100%; height: 100%; }
.bld-vmeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bld-vmeta b { font-weight: 500; font-size: 12px; color: var(--fg-ink); }
.bld-vmeta span { font-size: 11px; color: var(--fg-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 통합 채팅 열 */
.bld-chat { grid-row: 2; grid-column: 1; display: flex; flex-direction: column; gap: 16px; min-height: 0; margin-top: 46px; }
.bld-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; padding: 0 10px 8px 0; }
.bld-msg { display: flex; flex-direction: column; gap: 4px; }
.bld-msg.you { align-items: flex-end; }
.bld-bubble { max-width: 86%; background: var(--fg-pill); border-radius: 10px; padding: 12px 16px; font-size: 13px; line-height: 1.6; color: var(--fg-ink2); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.bld-text { font-size: 13px; line-height: 1.75; color: var(--fg-ink2); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.bld-tag { align-self: flex-start; font-size: 10px; color: #8c867c; border: 1px solid var(--fg-pill); border-radius: 4px; padding: 1px 5px; }
.bld-empty { font-size: 12.5px; line-height: 1.7; color: #8c867c; }
.bld-input { position: relative; flex: none; border: 1px solid var(--fg-pill); border-radius: 8px; padding: 12px 52px 12px 14px; background: #fff; }
.bld-input:focus-within { border-color: rgba(64, 59, 57, 0.2); }
.bld-input textarea { display: block; width: 100%; border: 0; outline: none; resize: none; background: none; font-family: var(--fg-pre); font-size: 13px; line-height: 1.6; color: var(--fg-ink2); }
.bld-input textarea::placeholder { color: #a39d93; }
.bld-send { position: absolute; right: 12px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--fg-ink2); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.bld-send:disabled { opacity: 0.4; cursor: default; }

/* 작업 영역 — 안쪽 탭 줄 + 캔버스 */
.bld-work { grid-row: 2; grid-column: 2; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.bld-tabs { flex: none; height: 40px; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bld-tabs-l { display: flex; align-items: flex-end; gap: 28px; height: 100%; padding-left: 14px; }
.bld-tabs-r { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.bld-tab { height: 100%; background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 2px; font-family: var(--fg-pre); font-size: 13px; color: var(--fg-mute); cursor: pointer; }
.bld-tab.on { font-weight: 600; color: var(--fg-ink); border-bottom-color: var(--fg-ink); }
.bld-tab:disabled { opacity: 0.4; cursor: default; }
.bld-seg { display: inline-flex; align-items: center; gap: 2px; }
.bld-seg button { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: none; font-family: var(--fg-pre); font-weight: 500; font-size: 11.5px; color: var(--fg-ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.bld-seg button.on { background: var(--fg-ink2); color: #fff; }
.bld-seg button:disabled { opacity: 0.4; cursor: default; }
.bld-seg button:not(.on):not(:disabled):hover { background: var(--fg-pill); }
.bld-tabs-r .mas5-seg, .bld-tabs-r .mas5-floortabs { background: none; border: 0; box-shadow: none; padding: 0; gap: 2px; }
.bld-tabs-r .mas5-seg button, .bld-tabs-r .mas5-floortabs button { height: 28px; min-width: 0; padding: 0 10px; border-radius: 6px; font-family: var(--fg-pre); font-weight: 500; font-size: 11.5px; color: var(--fg-ink); }
.bld-tabs-r .mas5-seg button.on, .bld-tabs-r .mas5-floortabs button.on { background: var(--fg-ink2); color: #fff; }
.bld-canvas { flex: 1; min-height: 0; position: relative; border-radius: 10px; overflow: hidden; background: #F5F4F1; }
.bld-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.bld-ghost { height: 28px; padding: 0 10px; border: 1px solid var(--fg-pill); border-radius: 6px; background: #fff; font-family: var(--fg-pre); font-size: 11.5px; color: var(--fg-ink2); cursor: pointer; }
.bld-ghost:hover:not(:disabled) { border-color: var(--fg-ink2); }
.bld-ghost:disabled { opacity: 0.45; cursor: default; }
.bld-cta { height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--fg-ink2); color: #fff; font-family: var(--fg-pre); font-weight: 500; font-size: 13px; cursor: pointer; }
.bld-cta:hover { background: var(--fg-ink); }

/* 매스 — 캔버스 = 3D 무대, 왼쪽 위 옵션 카드 */
.bld-canvas .mas5-stage { position: absolute; inset: 0; border-radius: 0; flex: none; } /* 3D 바탕(톤 매핑된 색)과 캔버스 바탕이 이음매 없이 — 무대는 캔버스 전체 */
.bld-canvas .mas5-stage-ui { justify-content: flex-end; left: auto; right: 14px; top: 14px; }
.mas-card { position: absolute; z-index: 3; top: 10px; left: 10px; width: 310px; max-height: calc(100% - 20px); overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; font-family: var(--fg-pre); }
.mas-card-row { display: flex; align-items: center; justify-content: space-between; }
.bld-card-label { font-size: 11px; color: var(--fg-sub); }
.mas-abc { display: flex; gap: 22px; }
.mas-abc button { background: none; border: 0; padding: 0; font-family: var(--fg-pre); font-size: 16px; font-weight: 500; color: #b3ada4; cursor: pointer; }
.mas-abc button.on { color: var(--fg-ink); font-weight: 600; }
.mas-abc button:disabled { opacity: 0.4; cursor: default; }
.mas-card .mas5-kv { gap: 12px; margin: 0; }
.mas-card .mas5-kv-row { font-size: 12px; align-items: baseline; gap: 10px; }
.mas-card .mas5-kv-row dt { color: var(--fg-sub); }
.mas-card .mas5-kv-row dd { color: var(--fg-ink); font-weight: 500; font-size: 14px; }
.mas-card .mas5-gfa { font-size: 11px; color: var(--fg-sub); }
.mas-card .mas5-dims, .mas-card .mas5-ctx { margin: 0; padding-top: 14px; border-top: 1px solid var(--fg-paper); }
.mas-card .mas5-label { font-size: 10.5px; letter-spacing: 0; color: var(--fg-sub); text-transform: none; }
.mas-card .mas5-dims .mas5-kv-row dd, .mas-card .mas5-ctx .mas5-kv-row dd { font-size: 13px; color: var(--fg-ink); }
.mas-card-sec { padding-top: 14px; border-top: 1px solid var(--fg-paper); font-size: 10.5px; color: var(--fg-sub); }
.mas-card .mas5-angle input { accent-color: var(--fg-ink2); }
.mas-card .mas5-select { background: #fff; border-color: var(--fg-line); }
.mas-card .mas5-parti { font-size: 12px; line-height: 1.6; color: var(--fg-sub); }
.mas-card-acts { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--fg-paper); }
.mas-card-btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* 평면 — 캔버스 = 도면, 왼쪽 위 아코디언 카드 */
.pln-canvas .pln-stage { position: absolute; inset: 0 0 0 320px; border: 0; border-radius: 0; background: transparent; } /* 도면은 카드 오른쪽 자리 가운데(시안) */
.pln-cards { position: absolute; z-index: 3; top: 10px; left: 10px; width: 300px; max-height: calc(100% - 20px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 2px; }
.pln-card { flex: none; font-family: var(--fg-pre); }
.pln-card-head { width: 100%; height: 44px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: none; border: 0; cursor: pointer; font-family: var(--fg-pre); font-size: 11px; color: var(--fg-sub); }
.pln-card-chev { width: 7px; height: 7px; border: solid #8c867c; border-width: 0 1.2px 1.2px 0; transform: rotate(45deg) translateY(-2px); transition: transform 0.15s ease; }
.pln-card.open .pln-card-chev { transform: rotate(-135deg) translate(-2px, 0); }
.pln-card-body { padding: 0 16px 16px; font-size: 12px; }
.pln-card-body .pln-params, .pln-card-body .pln-metrics, .pln-card-body .pln-mtop { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; overflow: visible; max-height: none; width: auto; position: static; }
.pln-card-body .pln-params > .pln-label:first-child { display: none; }
.pln-card-body .pln-kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; }
.pln-card-body .pln-kv dt { color: var(--fg-sub); }
.pln-card-body .pln-kv dd { margin: 0; color: var(--fg-ink); font-weight: 500; }
.pln-next { position: absolute; z-index: 3; right: 16px; bottom: 16px; }

/* 디자인 — 채팅 없이 캔버스만 */
.bld.dsn2 { grid-template-columns: minmax(0, 1fr); }
.dsn2-work { grid-column: 1 / -1; }
.dsn2 .dsn-canvas { flex: 1; min-height: 0; margin: 0; position: relative; border-radius: 10px; overflow: hidden; background: #F5F4F1; }
.dsn-canvas #naviTopPannel3d.dt-api-map--tool { top: 14px !important; right: 14px !important; }
.dsn-canvas #naviTopPannel3d .dt-api-map--tool-btns:first-child,
.dsn-canvas #naviTopPannel3d .dt-api-map--tool-btns-measure,
.dsn-canvas #naviTopPannel3d .dt-api-map--tool-bt-mouse { display: none !important; }
.dsn-canvas #naviTopPannel3d .dt-api-map--tool-btns + .dt-api-map--tool-btns { margin-top: 0 !important; border-top: 1px solid var(--fg-tool-line); border-radius: 10px; }
.dsn-canvas #naviTopPannel3d .dt-api-map--tool-btns + .dt-api-map--tool-btns .dt-api-map--tool-bt:first-child { border-top: 0 !important; }
.dsn-canvas #naviBottomPannel3d { display: none !important; }

/* 대지 — 나라 선택 카드·나라 칩·선례 버튼도 흰 카드 톤으로(시안 팔레트) */
.site .site-region { background: #fff; border: 0; border-radius: 10px; box-shadow: var(--fg-shadow); font-family: var(--fg-pre); }
.site .site-country, .site .site-prec-btn { background: #fff; border: 0; box-shadow: var(--fg-shadow); font-family: var(--fg-pre); color: var(--fg-ink); }
.site .site-prec { background: #fff; border: 0; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); font-family: var(--fg-pre); }

/* 지도·모델 불러오는 중 덮개(2026-10-30) — 새로고침 때 검은 화면 대신 */
.vwmap-loading { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(242, 239, 231, 0.92); font-family: var(--fg-pre); font-size: 13px; color: var(--fg-ink2); pointer-events: none; transition: opacity 0.25s ease; }
.vwmap-loading.out { opacity: 0; }
.dsn-canvas .vwmap-loading { background: rgba(242, 239, 231, 0.55); }
.vwmap-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(64, 59, 57, 0.18); border-top-color: var(--fg-ink2); animation: vwmap-spin 0.8s linear infinite; }
@keyframes vwmap-spin { to { transform: rotate(360deg); } }
.vwmap-wrap { background: var(--fg-paper); } /* 지도가 오기 전 검은 바탕 → 종이색 */
.app-boot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--fg-pre); font-size: 13px; color: var(--fg-ink2); background: #fff; z-index: 1; }

/* ── 기획(내레티브) — 시안 02 기획(2026-10-30): 채팅 700px(생성 후 350px) · 캔버스 = 프로그램 카드 + 대화 템플릿 / A·B·C 스터디 ── */
.bld.nar2 { grid-template-columns: 700px minmax(0, 1fr); column-gap: 50px; }
.bld.nar2.has-studies { grid-template-columns: 350px minmax(0, 1fr); }
.nar2 .bld-head { margin-bottom: 30px; }
.nar2-meta { flex: none; text-align: right; font-size: 11px; line-height: 1.5; color: var(--fg-sub); }
.nar2-chat { margin-top: 0; }
.nar2-log { gap: 30px; }
.nar2 .bld-bubble { max-width: 600px; border-radius: 12px; padding: 12px; }
.nar2 .bld-text { max-width: 600px; line-height: 1.6; }
.nar2-ghost { margin-top: 10px; height: 32px; padding: 0 14px; border: 1px solid var(--fg-line); border-radius: 10px; background: #fff; font-family: var(--fg-pre); font-size: 12px; color: var(--fg-ink2); cursor: pointer; }
.nar2-ghost:disabled { opacity: 0.5; cursor: default; }
.nar2-input { border-color: var(--fg-pill); border-radius: 12px; padding: 12px 90px 12px 12px; }
.nar2-input.drop { border-color: var(--fg-ink2); background: var(--fg-pill); }
.nar2-input textarea { font-size: 14px; }
.nar2-input .bld-send { width: 36px; height: 36px; font-size: 18px; }
.nar2-attach { position: absolute; right: 56px; bottom: 15px; width: 30px; height: 30px; border: 0; background: none; font-size: 16px; cursor: pointer; opacity: 0.6; }
.nar2-attach:hover { opacity: 1; }
.nar2-canvas { background: var(--fg-pill); border-radius: 12px; }
.nar2-card { position: absolute; z-index: 2; top: 13px; left: 12px; width: 300px; max-height: calc(100% - 26px); display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; }
.nar2-card-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 22px; }
.nar2-card-head { font-size: 10px; color: #8c867c; }
.nar2-card-head.refs { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--fg-pill); }
.nar2-kvs { display: flex; flex-direction: column; gap: 22px; }
.nar2-kv { display: flex; flex-direction: column; gap: 8px; }
.nar2-kv-l { font-size: 11px; color: var(--fg-sub); }
.nar2-kv-v { font-size: 13px; line-height: 1.6; color: var(--fg-ink); word-break: keep-all; overflow-wrap: anywhere; }
.nar2-empty { font-size: 12px; line-height: 1.6; color: #8c867c; }
.nar2-refs { display: flex; flex-direction: column; gap: 10px; }
.nar2-card-foot { flex: none; padding: 12px 20px 20px; border-top: 1px solid var(--fg-pill); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.nar2-hint { font-size: 11px; line-height: 1.6; color: var(--fg-ink2); }
.nar2-cta { height: 40px; padding: 0 14px; border: 1px solid var(--fg-ink2); border-radius: 14px; background: var(--fg-ink2); color: #fff; font-family: var(--fg-pre); font-size: 12px; cursor: pointer; }
.nar2-cta:hover:not(:disabled) { background: var(--fg-ink); }
.nar2-cta:disabled { opacity: 0.45; cursor: default; }
.nar2-guide { position: absolute; top: 33px; left: 372px; right: 30px; bottom: 20px; max-width: 600px; overflow-y: auto; display: flex; flex-direction: column; gap: 50px; font-family: var(--fg-pre); }
.nar2-guide-title { font-size: 13px; line-height: 1.6; color: var(--fg-sub); }
.nar2-guide-title span { color: var(--fg-sub); }
.nar2-guide-secs { display: flex; flex-direction: column; gap: 20px; }
.nar2-guide-sec { display: flex; flex-direction: column; gap: 8px; }
.nar2-guide-step { font-size: 13px; line-height: 1.6; color: var(--fg-sub); }
.nar2-ex { text-align: left; border: 0; border-radius: 12px; padding: 12px; background: rgba(255, 255, 255, 0.5); font-family: var(--fg-pre); font-size: 12px; line-height: 1.6; color: var(--fg-ink2); cursor: pointer; }
.nar2-ex:hover { background: #fff; }
.nar2-tips { margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 2; color: var(--fg-sub); }
/* A·B·C 스터디 카드 */
.nst { position: absolute; top: 13px; left: 342px; right: 20px; bottom: 13px; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-content: start; font-family: var(--fg-pre); }
.nst-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nst-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border: 0; border-radius: 10px; background: transparent; padding: 0; cursor: pointer; overflow: hidden; }
.nst-thumb img { width: 100%; height: 100%; object-fit: contain; transition: filter 0.12s ease; }
.nst-thumb:active img { filter: brightness(0.88); } /* 누를 때만 살짝 어둡게(10-30 주인님) */
.nst-thumb .std-box-law { position: absolute; left: 8px; bottom: 8px; }
.nst-col.is-empty .nst-thumb { background: rgba(255, 255, 255, 0.5); cursor: default; }
.nst-wait { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; text-align: center; font-size: 12px; color: var(--fg-sub); }
.nst-wait b { font-weight: 600; color: var(--fg-ink2); }
.nst-col.is-running .nst-thumb { animation: nst-pulse 1.6s ease-in-out infinite; }
@keyframes nst-pulse { 50% { background: rgba(255, 255, 255, 0.8); } }
.nst-label { font-size: 11px; color: var(--fg-sub); margin-top: 6px; }
.nst-name { font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--fg-ink); }
.nst-parti { font-size: 11px; line-height: 1.6; color: var(--fg-sub); }
.nst-stats, .nst-basis { font-size: 11px; line-height: 1.6; color: var(--fg-sub); padding-top: 8px; border-top: 1px solid rgba(64, 59, 57, 0.08); }
.nst-pick { margin-top: 12px; height: 36px; border: 1px solid var(--fg-line); border-radius: 14px; background: #fff; font-family: var(--fg-pre); font-size: 12px; color: var(--fg-ink2); cursor: pointer; }
.nst-pick:hover { border-color: var(--fg-ink2); }
.nst-pick.on { background: var(--fg-ink2); border-color: var(--fg-ink2); color: #fff; }
.mas-pick { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; font-family: var(--fg-pre); font-size: 14px; color: var(--fg-sub); }
.nst-thumb:focus { outline: none; } /* 누른 뒤 남던 검정 포커스 테두리 제거 */

/* ── 2026-10-30 주인님 정리 ── */
/* 흰 배경 위 선은 모두 #f5f4ee — 앱 안의 옛 선 변수(app.css --md-line)·시안 선 변수를 한 색으로 */
.app { --md-line: #f5f4ee; --fg-line: #f5f4ee; }
/* 기획: 프로그램 카드는 캔버스 아래까지, A·B·C 선택 버튼 바닥을 카드 바닥선에 맞춘다 */
.nar2-card { height: calc(100% - 26px); }
.nst { grid-auto-rows: minmax(100%, auto); align-content: stretch; }
.nst-pick { margin-top: auto; flex: none; }
/* 진행 패널(브리프를 읽는 중 …) — 테두리 없이 */
.app .pp { border: 0; }
/* 평면 — 외벽 구성 칸을 파라미터 카드와 같은 모양으로(배경·테두리 없이) */
.pln-card-body .pln-asm, .pln-card-body .pln-roomedit { margin: 6px 0 0; padding: 0; border: 0; background: none; gap: 8px; }
.pln-card-body .pln-asm .pln-label, .pln-card-body .pln-roomedit > .pln-label { font-size: 11px; letter-spacing: 0; color: var(--fg-sub); margin-top: 8px; }
.pln-card-body .pln-layer { border-bottom: 1px solid var(--fg-pill); padding-bottom: 6px; }
.pln-card-body .pln-layer select, .pln-card-body .pln-layer input, .pln-card-body .pln-field input, .pln-card-body .pln-field select { background: #fff; color: var(--fg-ink); }
.pln-card-body .pln-layer-btn, .pln-card-body .pln-btn { background: #fff; color: var(--fg-ink2); }
/* A·B·C 카드 — 그림·선택 버튼은 제자리, 글(라벨·이름·설명·수치·근거)만 카드 안에서 스크롤(2026-11-02 주인님) */
.nst { grid-auto-rows: 100%; overflow: hidden; }
.nst-col { min-height: 0; }
.nst-thumb { flex: none; }
.nst-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.nst-body > * { flex: none; }

/* ── 랜딩·로그인 공통(2026-11-02 피그마 '01 랜딩' 411:27 → 랜딩은 '02 매스'로 갱신, 아래) — 흰 바탕 · Geist(한글은 Pretendard) · 먹색 #38373a ── */
.lg-page, .ld, .hd { --ld-ink: #38373a; --ld-small: clamp(15px, 1.0417vw, 20px); font-family: var(--fg-geist); color: var(--ld-ink); }
.hd { border-bottom: 1px solid var(--fg-pill); background: #fff; }
.hd-menu a, .hd .lang-select-btn { font-family: var(--fg-geist); font-weight: 300; color: var(--fg-ink2); }
.lg-logo-link, .hd-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.lg-logo-link img, .hd-logo-link img, .adm-top .hd-logo-link img { height: 20px; width: auto; display: block; }

/* 랜딩 — 피그마 '01 랜딩'(452:22500, 2026-11-04 갱신)·'02 매스'(414:7742). 시안 1920×966 기준 px 를 --u(=100vw/1920, 0.6~1.4px)로 늘리고 줄인다.
   본문 폭 1440 가운데(좌우 240) · 180px 간격 세로 격자 9줄 · 제목 60 Medium · 작은 글 15 Light · 단계 이름 60 · 버튼 = 글자 + 밑줄 화살표 */
.ld { --u: clamp(0.6px, calc(100vw / 1920), 1.4px); --ld-x: max(var(--md-gutter), calc((100vw - 1440 * var(--u)) / 2)); --ld-line: rgba(26, 25, 83, 0.05); /* 시안 격자선: 1A1953 5% · 굵기 1 */
  --ld-grid: repeating-linear-gradient(to right, var(--ld-line) 0 1px, transparent 1px calc(180 * var(--u))) calc(var(--ld-x) + 1 * var(--u)) 0 / calc(1440 * var(--u) + 1px) 100% no-repeat;
  position: relative; display: block; height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; background: var(--ld-grid), #fff; } /* 첫 화면 ↔ 작동 방식 넘기기는 landing.js glide 가 한다 — CSS 스냅은 프레임마다 놓는 위치를 되끌어 화면이 튀어서 뺐다(2026-11-04) */ /* body 가 overflow:hidden 이라 랜딩이 자기 안에서 스크롤. 격자는 세로줄이라 스크롤과 무관하게 바탕에 고정 */
.ld .ld-hd { position: sticky; top: 0; z-index: 30; padding: max(20px, calc(76.8 * var(--u))) var(--ld-x) max(16px, calc(23.2 * var(--u))); border-bottom: 0; background: none; } /* 맨 위에서는 투명 — 시안처럼 그림 꼭대기가 헤더 뒤로 비친다 */
.ld .ld-hd.is-stuck { background: var(--ld-grid), #fff; } /* 내리면 같은 격자를 깐 흰 바탕 — 줄이 끊기지 않고 지나가는 글자가 메뉴와 겹치지 않는다 */
.ld-hd .hd-logo-link img { height: max(20px, calc(26.45 * var(--u))); margin-left: calc(1.36 * var(--u)); } /* 시안 로고 자리 241.36·76.79 */
.ld-hd .hd-menu { gap: max(20px, calc(60 * var(--u))); position: relative; top: calc(-2 * var(--u)); } /* 시안 메뉴 세로 중심 88, 로고 90 */
.ld-hd .hd-menu a, .ld-hd .hd-navlink, .ld-hd .lang-select-btn { font-size: max(13px, calc(16 * var(--u))); font-weight: 300; letter-spacing: -0.03em; color: var(--ld-ink); }
.ld-hero { position: relative; box-sizing: border-box; min-height: calc(100% - var(--ld-hd, 131px)); display: flex; flex-direction: column; padding: 0 var(--ld-x) calc(193 * var(--u)); overflow: hidden; }
.ld-art { position: absolute; right: 0; top: max(calc(50% - 500 * var(--u)), calc(-17 * var(--u))); width: calc(1000 * var(--u)); height: calc(1000 * var(--u)); pointer-events: none; user-select: none; z-index: 0; } /* 시안: 1000×1000 을 화면 세로 가운데에 — 화면이 낮으면 꼭대기가 많이 잘리지 않게 위쪽을 막는다 */
.ld-art img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; } /* 사라짐 0.8초 */
.ld-art img.on { opacity: 1; transition: opacity 0.8s ease 0.4s; } /* 나타남 0.8초 — 사라짐이 반쯤 지난 뒤 시작해 선이 뒤엉켜 보이지 않게 */
.ld-main { position: relative; z-index: 1; margin-left: calc(1 * var(--u)); padding-top: calc(166 * var(--u)); }
.ld-title { font-family: var(--fg-geist); font-weight: 500; font-size: max(40px, calc(60 * var(--u))); line-height: 0.98; letter-spacing: -0.03em; color: var(--ld-ink); margin: 0 0 0 calc(-4 * var(--u)); } /* 시안: 글상자가 선보다 4 왼쪽(237·선 241) — 글자 앞 여백을 빼서 획이 격자선에 붙는다 */
html[lang='ko'] .ld-title { line-height: 1.15; letter-spacing: -0.04em; } /* 한글은 줄끼리 붙어 보여서 */
.ld-lead { font-size: max(14px, calc(15 * var(--u))); font-weight: 300; line-height: 1.2; letter-spacing: -0.03em; color: var(--ld-ink); max-width: 24.67em; margin: calc(28 * var(--u)) 0 0; }
.ld-cta { position: relative; z-index: 1; margin-top: auto; padding-top: calc(60 * var(--u)); }
.ld-hero .ld-cta { margin-left: calc(2 * var(--u)); } /* 시안 x=242 */
.ld-go { position: relative; display: inline-block; min-width: 14.933em; height: 2.2em; padding: 0 3em 0 0; border: 0; background: none; text-align: left; font-family: var(--fg-geist); font-size: max(14px, calc(15 * var(--u))); font-weight: 400; line-height: 2.333; color: #1f1e1e; cursor: pointer; } /* 시안 224×33 · 글자 15/35 Regular · 자간 없음 */
.ld-go::after { content: ''; position: absolute; left: -0.033em; right: -0.084em; top: 0.91em; height: 1.198em; background: url('../assets/ui/landing-arrow.svg') no-repeat 0 0 / 100% 100%; } /* 시안 화살표 225.76×17.97 */
.ld-go:focus-visible { outline: 1px solid #1f1e1e; outline-offset: 4px; }
/* 작동 방식(#work) — 번호 18 · 단계 이름 60 · 요약 18 · 설명 14. 세 칸은 격자 3칸(540) 간격 */
.ld-eyebrow { font-size: max(13px, calc(15 * var(--u))); font-weight: 300; line-height: 1.2; letter-spacing: -0.03em; color: var(--ld-ink); margin: 0; }
.ld-how { position: relative; box-sizing: border-box; min-height: calc(100% - var(--ld-hd, 131px)); scroll-margin-top: var(--ld-hd, 131px); display: flex; flex-direction: column; padding: calc(130 * var(--u)) var(--ld-x) calc(152 * var(--u)) calc(var(--ld-x) + 1 * var(--u)); }
.ld-how-list { list-style: none; margin: calc(62 * var(--u)) 0 0; padding: 0; display: grid; grid-template-columns: calc(540 * var(--u)) calc(540 * var(--u)) calc(364 * var(--u)); }
.ld-how-step { min-width: 0; }
.ld-how-step:not(:last-child) { padding-right: 16px; } /* 좁은 화면에서 옆 칸과 붙지 않게 — 1920 에서는 글 폭 364 라 영향 없음 */
@media (min-width: 901px) { .ld-how-step { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; } } /* 번호·이름·요약·설명 줄을 세 칸이 같이 — 요약이 두 줄로 넘어가는 언어(de)에서도 설명 시작선이 맞게 */
.ld-how-n, .ld-how-sub { display: block; font-size: max(15px, calc(18 * var(--u))); font-weight: 400; line-height: 1.2; letter-spacing: -0.03em; color: var(--ld-ink); margin: 0; }
.ld-how-label { font-family: var(--fg-geist); font-size: max(36px, calc(60 * var(--u))); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--ld-ink); margin: calc(34 * var(--u)) 0 0; }
.ld-how-sub { margin-top: calc(17 * var(--u)); }
.ld-how-body { font-size: max(13px, calc(14 * var(--u))); font-weight: 300; line-height: 1.2; letter-spacing: -0.03em; color: var(--ld-ink); max-width: 26em; margin: calc(52 * var(--u)) 0 0; }
@media (max-width: 900px) {
  .ld { --ld-x: var(--md-gutter); background: #fff; }
  .ld .ld-hd, .ld .ld-hd.is-stuck { background: #fff; }
  .ld-art { top: auto; bottom: 6vh; right: 0; width: 100vw; height: 100vw; opacity: 0.35; } /* 화면 밖으로 내밀면 가로 스크롤 폭이 생긴다 */
  .ld-main { padding-top: 12vh; }
  .ld-how-list { grid-template-columns: 1fr; gap: 48px; }
  .ld-how-step:not(:last-child) { padding-right: 0; }
  .ld-how-label { margin-top: 16px; }
  .ld-how-body { margin-top: 20px; }
}

/* 로그인 — 랜딩과 같은 글꼴·굵기·크기·바탕. 왼쪽 그림도 랜딩의 아이소 선화 */
.lg-page { background: #fff; }
.lg-visual { background: #fff; border-right: 0; }
.lg-logo { top: var(--md-header-y); left: var(--md-gutter); }
.lg-scene { padding: 72px 40px; }
.lg-art { width: 100%; max-width: 720px; height: auto; max-height: 78vh; object-fit: contain; pointer-events: none; user-select: none; }
.lg-visual-caption { font-family: var(--fg-geist); font-size: var(--ld-small); font-weight: 300; line-height: 1.2; letter-spacing: -0.03em; color: var(--ld-ink); left: var(--md-gutter); bottom: clamp(32px, 10.5vh, 114px); }
.lg-form-wrap { background: #fff; border-left: 0; }
.lg-eyebrow { font-family: var(--fg-geist); font-size: var(--ld-small); font-weight: 300; line-height: 1.2; letter-spacing: -0.03em; text-transform: none; color: var(--ld-ink); }
.lg-title { font-family: var(--fg-geist); font-weight: 500; font-size: clamp(32px, 2.5vw, 48px); line-height: 1; letter-spacing: -0.03em; color: var(--ld-ink); }
.lg-field > span, .lg-field-head { font-family: var(--fg-geist); font-size: 13px; font-weight: 300; letter-spacing: -0.02em; text-transform: none; color: var(--ld-ink); }
.lg-field input { font-family: var(--fg-geist); font-size: 14px; font-weight: 300; color: var(--ld-ink); background: #fff; border: 1px solid var(--fg-pill); border-radius: 8px; padding: 12px 14px; }
.lg-field input:focus { border-color: rgba(64, 59, 57, 0.35); outline: none; }
.lg-forgot, .lg-remember, .lg-remember em, .lg-swap { font-family: var(--fg-geist); font-weight: 300; color: var(--fg-sub); }
.lg-submit { font-family: var(--fg-geist); width: 100%; height: 44px; justify-content: center; border: 0; border-radius: 8px; background: #403b39; color: #fff; font-size: 14px; font-weight: 300; letter-spacing: -0.03em; text-decoration: none; }
.lg-submit:hover:not(:disabled) { background: var(--fg-ink); }
.lg-submit span { color: #fff; }
.lg-or { font-family: var(--fg-geist); font-weight: 300; color: var(--fg-mute); }
.lg-or::before, .lg-or::after { background: var(--fg-pill); }
.lg-google { font-family: var(--fg-geist); font-weight: 300; height: 44px; border: 1px solid var(--fg-pill); border-radius: 8px; background: #fff; color: var(--fg-ink2); }
.lg-swap button { font-family: var(--fg-geist); color: var(--ld-ink); font-weight: 500; text-decoration: none; }
.lg-msg { font-family: var(--fg-geist); }

/* 업로드(2026-11-02 주인님 '다른 페이지도 같은 컨셉') — 랜딩 토큰 그대로: 흰 바탕 · Geist · 먹색 · 선 #f5f4ee · 버튼 #403b39 모서리 8 */
.up { --ld-ink: #38373a; --ld-small: clamp(15px, 1.0417vw, 20px); --md-line: var(--fg-pill); --md-text: #38373a; --md-muted: #5f5a52; --md-accent: #403b39; --text: #38373a; --muted: #5f5a52; --panel: #fff; --accent: #403b39; height: 100%; min-height: 0; overflow-y: auto; background: #fff; color: var(--ld-ink); font-family: var(--fg-geist); } /* body 가 overflow:hidden — 업로드도 자기 안에서 스크롤 */
.up-tabs { gap: 32px; border-bottom: 1px solid var(--fg-pill); margin-top: clamp(24px, 3vw, 56px); }
.up-tab { font-family: var(--fg-geist); font-size: 14px; font-weight: 300; letter-spacing: -0.02em; color: var(--fg-mute); padding-bottom: 14px; }
.up-tab:hover { color: var(--ld-ink); }
.up-tab.is-active { color: var(--ld-ink); font-weight: 500; border-bottom-color: var(--ld-ink); }
.up-head { max-width: 960px; margin: clamp(40px, 5vw, 96px) 0 clamp(28px, 3vw, 48px); }
.up-head h1 { font-family: var(--fg-geist); font-size: clamp(40px, 4.17vw, 80px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--ld-ink); margin: 0 0 clamp(20px, 2vw, 32px); }
html[lang='ko'] .up-head h1 { line-height: 1.12; letter-spacing: -0.04em; }
.up-head p { font-size: var(--ld-small); font-weight: 300; line-height: 1.35; letter-spacing: -0.03em; color: var(--ld-ink); max-width: 36em; margin: 0; }
.up-drop { border: 1px dashed var(--fg-tool-line); border-radius: 8px; color: var(--fg-sub); font-weight: 300; background: #fff; }
.up-drop:hover, .up-drop.is-over { border-color: var(--ld-ink); background: var(--fg-pill); color: var(--ld-ink); }
.up-plus { font-weight: 300; opacity: 0.6; }
.up-hint { letter-spacing: 0.04em; }
.up-status-row { color: var(--fg-sub); font-weight: 300; }
.up-learn-btn { font-family: var(--fg-geist); height: 38px; padding: 0 16px; border-radius: 8px; background: #403b39; color: #fff; font-size: 12px; font-weight: 300; letter-spacing: -0.03em; }
.up-learn-btn:hover:not(:disabled) { background: var(--fg-ink); }
.up-error-hint, .up-note, .up-badge.is-error { color: #b4452f; }
.up-card { background: #fff; border: 1px solid var(--fg-pill); border-radius: 8px; }
.up-card.is-error { border-color: rgba(180, 69, 47, 0.4); }
.up-card img, .up-noimg { background: var(--fg-pill); }
.up-card-remove { background: rgba(31, 29, 26, 0.6); }
.up-card-remove:hover { background: var(--fg-ink); }
.up-name, .up-lib-meta, .up-lib-count, .up-lib-mat, .up-mat-usage { color: var(--fg-sub); font-weight: 300; }
.up-badge { font-weight: 400; }
.up-badge.is-learned { color: #3f7a52; }
.up-badge.is-learning { color: var(--fg-sub); }
.up-lib-head { border-top: 1px solid var(--fg-pill); }
.up-lib-head h2 { font-family: var(--fg-geist); font-size: clamp(24px, 1.67vw, 32px); font-weight: 500; letter-spacing: -0.03em; color: var(--ld-ink); }
.up-lib-title { color: var(--ld-ink); font-weight: 500; }
.up-lib-tension { color: var(--fg-sub); }
.up-lib-read-label { color: var(--fg-mute); letter-spacing: 0.04em; text-transform: none; font-size: 11px; }
.up-lib-parti { color: var(--ld-ink); font-weight: 300; }
.up-lib-mat { border-color: var(--fg-pill); }
.up-mat-swatch { border-color: var(--fg-pill); }

/* 어드민 — 같은 흰 바탕·글꼴. 카드·차트는 테두리 #f5f4ee 모서리 8, 강조색 대신 먹색 */
.adm { --ld-ink: #38373a; --md-accent: #403b39; --md-bg: #fff; --md-bg-raised: #fff; --md-line: var(--fg-pill); --md-text: #38373a; --md-muted: #5f5a52; background: #fff; color: var(--ld-ink); font-family: var(--fg-geist); }
.adm-top { background: #fff; border-bottom: 1px solid var(--fg-pill); }
.adm-title { font-weight: 500; letter-spacing: -0.02em; color: var(--ld-ink); }
.adm-tabs button { font-family: var(--fg-geist); font-weight: 300; border-radius: 8px; color: var(--fg-sub); }
.adm-tabs button.active { background: var(--fg-pill); border-color: transparent; color: var(--ld-ink); font-weight: 500; }
.adm-ghost { font-family: var(--fg-geist); font-weight: 300; border-color: var(--fg-pill); border-radius: 8px; color: var(--ld-ink); }
.adm-card, .adm-chart { background: #fff; border-color: var(--fg-pill); border-radius: 8px; }
.adm-card-label, .adm-card-sub, .adm-legend, .adm-h3 { font-weight: 300; letter-spacing: 0; color: var(--fg-sub); }
.adm-card-value { font-weight: 500; letter-spacing: -0.03em; }
.adm-h2 { font-weight: 500; letter-spacing: -0.02em; }

/* MyPage 팝업(2026-11-02) — 랜딩 컨셉: 흰 판 · Geist · 먹색 · 선 #f5f4ee · 모서리 8 · 버튼 #403b39 */
.mp { --ld-ink: #38373a; position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(31, 29, 26, 0.28); font-family: var(--fg-geist); color: var(--ld-ink); animation: mp-in 0.14s ease-out; }
@keyframes mp-in { from { opacity: 0; } to { opacity: 1; } }
.mp-panel { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; padding: 32px; background: #fff; border-radius: 8px; box-shadow: 0 24px 64px rgba(31, 29, 26, 0.18); }
.mp-x { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--fg-sub); font-size: 14px; cursor: pointer; }
.mp-x:hover { background: var(--fg-pill); color: var(--ld-ink); }
.mp-top { display: flex; align-items: center; gap: 12px; margin: 0 40px 24px 0; }
.mp-eyebrow { font-size: 14px; font-weight: 300; letter-spacing: -0.02em; color: var(--fg-sub); flex: 1; }
.mp-lang .lang-select-btn { font-family: var(--fg-geist); font-weight: 300; }
.mp-loading, .mp-empty { font-size: 14px; font-weight: 300; color: var(--fg-sub); padding: 8px 0; }
.mp-err { font-size: 14px; color: #b4452f; background: #fbe9e4; border-radius: 8px; padding: 10px 14px; }
.mp-profile { display: flex; align-items: center; gap: 16px; }
.mp-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #403b39; color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 500; }
.mp-who { min-width: 0; }
.mp-name { font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-email { margin-top: 4px; font-size: 14px; font-weight: 300; color: var(--fg-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mp-badge { font-size: 12px; font-weight: 400; padding: 3px 9px; border-radius: 8px; background: var(--fg-pill); color: var(--ld-ink); }
.mp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 0; padding: 16px 0; border-top: 1px solid var(--fg-pill); border-bottom: 1px solid var(--fg-pill); }
.mp-meta dt { font-size: 12px; font-weight: 300; color: var(--fg-sub); }
.mp-meta dd { margin: 4px 0 0; font-size: 15px; font-weight: 400; }
.mp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.mp-stat { padding: 14px 12px; border: 1px solid var(--fg-pill); border-radius: 8px; }
.mp-stat-n { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.mp-stat-label { margin-top: 8px; font-size: 12px; font-weight: 300; color: var(--fg-sub); }
.mp-sec { margin: 28px 0 8px; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; }
.mp-list { list-style: none; margin: 0; padding: 0; }
.mp-list li + li { border-top: 1px solid var(--fg-pill); }
.mp-row { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 8px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; font-family: inherit; color: inherit; }
.mp-row:hover { background: var(--fg-pill); }
.mp-row-title { font-size: 14px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-row-sub { grid-row: 2; font-size: 12px; font-weight: 300; color: var(--fg-sub); margin-top: 3px; }
.mp-row-go { grid-row: 1 / 3; grid-column: 2; color: var(--fg-mute); font-size: 13px; }
.mp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.mp-primary { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 0; border-radius: 8px; background: #403b39; color: #fff; font-family: inherit; font-size: 13px; font-weight: 300; letter-spacing: -0.02em; cursor: pointer; }
.mp-primary:hover { background: var(--fg-ink); }
.mp-ghost { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--fg-pill); border-radius: 8px; background: #fff; color: var(--ld-ink); font-family: inherit; font-size: 13px; font-weight: 300; text-decoration: none; cursor: pointer; }
.mp-ghost:hover { background: var(--fg-pill); }
.hd-mypage { font-family: var(--fg-geist); font-weight: 300; color: var(--fg-ink2); }
@media (max-width: 560px) {
  .mp-panel { padding: 24px 20px; }
  .mp-stats { grid-template-columns: repeat(2, 1fr); }
  .mp-name { font-size: 22px; }
}