/* onsaede 랜딩 전용 스타일. 폰트는 base.html의 Pretendard 사용.
메인 홈=.lp-home / 주요기능=.lp-feature 로 페이지별 구분(.hero 충돌 방지).
★2026-07-29 팔레트 전환: 세이지 그린 → ★네이비.
이유: tokens.css에 "그린 모방 금지(우리 브랜드)" · CLAUDE.md §2-5 "흰 배경·네이비 포인트 고정"
이라고 명시돼 있는데 공개 랜딩만 그린이라 ★바깥(랜딩)과 안(앱)이 다른 제품처럼 보였다.
변수 이름도 --green → --brand로 바꿨다(네이비를 담은 변수가 --green이면 다음 사람이 속는다).
⚠️ 되돌리려면 ★이 블록의 값만 원래 그린으로 되돌리면 된다(사용처는 전부 변수 참조).
⚠️ --logo-*는 브랜드 마크(onsaede 새) 색이라 ★그대로 둔다 — 마크는 바뀌지 않았다. */
.lp {
/* 네이비 팔레트 — 랜딩 전용 토큰(tokens.css와 같은 축, 랜딩 스코프 격리 유지) */
--brand:#1E3A5F; --brand-d:#16294A; --brand-dd:#0F1E38; --brand-l:#38BDF8;
--mint:#EEF3FB; --ink:#1F2937; --ink-2:#6B7280; --line:#E5E7EB;
--bg:#FFFFFF; --gray-bg:#F7F9FC;
--logo-green:#3C7A26; --logo-lime:#8FC646;
background:var(--bg); color:var(--ink);
font-size:14px; line-height:1.5;
}
.lp *, .lp *::before, .lp *::after { box-sizing:border-box; }
.lp img { max-width:100%; display:block; }
.lp .in { max-width:1120px; margin:0 auto; padding-inline:24px; }
/* ── 유틸바 ── */
.lp-util { border-bottom:1px solid var(--line); background:#fff; }
.lp-util .in { display:flex; justify-content:flex-end; align-items:center; height:36px; }
.lp-util a { font-size:12px; color:var(--ink-2); text-decoration:none; padding:0 14px; position:relative; }
.lp-util a + a::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:1px; height:11px; background:var(--line); }
.lp-util a:hover { color:var(--brand-d); }
/* ── 헤더 ── */
.lp-hdr { border-bottom:2px solid var(--brand); background:#fff; position:relative; z-index:20; }
/* position:relative — GNB를 사이트 기준 정중앙에 절대배치하기 위한 기준 박스 */
.lp-hdr .in { display:flex; align-items:center; justify-content:space-between;
position:relative; height:88px; gap:40px; }
.lp-logo { display:flex; align-items:center; gap:11px; text-decoration:none; }
.lp-logo img { width:auto; height:56px; }
.lp-logo .bird { width:56px; height:56px; flex:none; } /* 38→56: 새 심볼이 너무 작다는 피드백 */
.lp-logo .wm { font-size:27px; font-weight:800; letter-spacing:-.02em; color:var(--logo-green); }
/* 로고·시작하기 버튼 폭이 서로 달라 flex만으로는 가운데가 안 맞음 → 절대 중앙 고정 */
.lp-gnb { display:flex; align-items:center; gap:38px; margin:0;
position:absolute; left:50%; transform:translateX(-50%); }
/* ── GNB 하이라이트 (2026-07-21) ─────────────────────────────────────
커서를 올리면 밑줄이 ★가운데에서 좌우로 뻗어나가고, 글자가 살짝 떠오르며 빛난다.
::after = 움직이는 밑줄(그라데이션+글로우) / ::before = 은은한 배경 하이라이트.
scaleX 변환만 애니메이션해서(레이아웃 재계산 없음) 60fps로 부드럽게 돈다. */
.lp-gnb a {
font-size:16px; font-weight:600; color:var(--ink); text-decoration:none;
padding:8px 4px; position:relative; display:inline-block;
transition:color .22s ease, transform .22s ease;
}
/* 배경 하이라이트 — 아래에서 위로 옅게 차오른다 */
.lp-gnb a::before {
content:""; position:absolute; left:-6px; right:-6px; bottom:0; top:2px;
border-radius:8px; background:linear-gradient(180deg, transparent 30%, rgba(30,58,95,.10) 100%);
opacity:0; transform:scaleY(.6); transform-origin:bottom;
transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
/* 움직이는 밑줄 — 가운데에서 양쪽으로 */
.lp-gnb a::after {
content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; border-radius:2px;
background:linear-gradient(90deg, var(--brand-d), var(--brand) 45%, #7DD3FC 100%);
box-shadow:0 2px 10px rgba(30,58,95,.45);
transform:scaleX(0); transform-origin:center;
transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.lp-gnb a:hover { color:var(--brand-d); transform:translateY(-2px); }
.lp-gnb a:hover::after { transform:scaleX(1); }
.lp-gnb a:hover::before { opacity:1; transform:scaleY(1); }
.lp-gnb a:focus-visible { outline:2px solid var(--brand-d); outline-offset:4px; border-radius:6px; }
/* 현재 메뉴 — 밑줄은 항상 펼쳐진 상태로 고정 */
.lp-gnb a.on { color:var(--brand-d); }
.lp-gnb a.on::after { transform:scaleX(1); }
.lp-burger { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:flex;
align-items:center; justify-content:center; color:var(--ink-2); cursor:pointer; background:#fff; }
.lp-burger svg { width:18px; height:18px; }
.lp-hdr-start { display:inline-flex; align-items:center; height:42px; padding:0 22px; border-radius:22px;
border:1.5px solid var(--brand); color:var(--brand-d); font-size:14px; font-weight:700; text-decoration:none; }
.lp-hdr-start:hover { background:var(--mint); }
/* ── 입체 버튼(로그인/회원가입 공용 톤) ── */
/* width:100% — button은 블록 채움이 기본이 아니라 회원가입(a)보다 좁게 잡히던 것 통일.
★border도 맞춘다: 회원가입(a)은 1.5px 실선 테두리가 있는데 로그인(button)은 border:0이라,
box-sizing이 같아도 안쪽 여백이 3px 차이 나 눈으로는 크기가 달라 보였다.
같은 두께의 '투명' 테두리를 줘서 배경 색만 다르고 박스는 완전히 동일하게 만든다. */
.lp-btn-login { display:flex; width:100%; box-sizing:border-box;
align-items:center; justify-content:center; height:48px; border-radius:12px;
border:1.5px solid transparent;
font-family:inherit; cursor:pointer;
background:linear-gradient(180deg, #4A6A95 0%, var(--brand) 52%, var(--brand-d) 100%);
color:#fff; font-size:15.5px; font-weight:700; text-decoration:none; margin-bottom:9px; letter-spacing:.01em;
box-shadow:0 4px 12px rgba(30,58,95,.30), inset 0 1px 0 rgba(255,255,255,.30);
transition:transform .12s ease, box-shadow .12s ease; }
.lp-btn-login:hover { transform:translateY(-1.5px); box-shadow:0 8px 20px rgba(30,58,95,.40), inset 0 1px 0 rgba(255,255,255,.34); }
.lp-btn-login:active { transform:translateY(0); box-shadow:0 2px 7px rgba(30,58,95,.30); }
.lp-btn-signup { display:flex; width:100%; box-sizing:border-box;
align-items:center; justify-content:center; height:48px; border-radius:12px;
background:linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%); color:var(--brand-d);
font-size:15.5px; font-weight:700; text-decoration:none; border:1.5px solid var(--line);
box-shadow:0 2px 8px rgba(31,41,55,.06); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.lp-btn-signup:hover { transform:translateY(-1.5px); border-color:var(--brand); box-shadow:0 6px 16px rgba(30,58,95,.18); }
.lp-btn-signup:active { transform:translateY(0); box-shadow:0 2px 6px rgba(31,41,55,.08); }
/* ── 푸터 ── */
.lp-foot { background:var(--gray-bg); border-top:1px solid var(--line); padding-block:28px; }
.lp-foot .in { font-size:12px; color:var(--ink-2); line-height:1.8; }
.lp-foot-links { display:flex; gap:14px; margin-bottom:8px; }
.lp-foot-links a { color:var(--ink); text-decoration:none; font-weight:600; font-size:12.5px; }
.lp-foot-links a:hover { color:var(--brand-d); }
.lp-foot-brand { margin:0; font-size:12.5px; color:var(--ink-2); }
/* 고객문의·사업자정보 블록(_biz_info.html)은 style.css의 .biz-* 를 그대로 쓴다.
여기서는 앱 푸터와 같은 리듬이 되도록 위 구분선과 여백만 준다. */
.lp-foot-biz { margin-top:16px; padding-top:18px; border-top:1px solid var(--line); }
.lp-foot-copy { margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line); color:#9AA3B2; }
/* prefers-reduced-motion: 버튼 리프트/전환 최소화 */
@media (prefers-reduced-motion: reduce) {
.lp-btn-login, .lp-btn-signup { transition:none; }
.lp-btn-login:hover, .lp-btn-signup:hover { transform:none; }
/* GNB 하이라이트 — 움직임에 민감한 이용자에겐 애니메이션 없이 결과 상태만 보여준다
(효과를 없애는 게 아니라 '즉시 적용'으로 바꾼다). */
.lp-gnb a, .lp-gnb a::before, .lp-gnb a::after { transition:none; }
.lp-gnb a:hover { transform:none; }
}
/* ═══════════ 메인 홈 전용 (.lp-home) ═══════════ */
/* ── 히어로 슬라이드(배너 통이미지) ── */
.lp-home .lp-hero { position:relative; }
.lp-slides { position:relative; width:100%; aspect-ratio:1920/360; overflow:hidden; background:var(--gray-bg); }
.lp-slide { position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.lp-slide.on { opacity:1; }
.lp-slide img { width:100%; height:100%; object-fit:cover; }
.lp-slide-empty { display:flex; align-items:center; justify-content:center; height:100%;
color:var(--ink-2); font-size:14px; background:var(--mint); }
/* 로그인 박스 오버레이 */
.lp-loginbox { position:absolute; z-index:10; top:50%; right:calc((100% - 1120px)/2 + 24px);
transform:translateY(-50%); width:270px; background:#fff; border-radius:14px;
box-shadow:0 12px 34px rgba(0,0,0,.16); padding:22px; border:1px solid var(--line); }
.lp-loginbox .fld { height:44px; border:1px solid var(--line); border-radius:8px; width:100%;
padding:0 13px; font-size:13px; margin-bottom:9px; background:var(--gray-bg); color:var(--ink); }
.lp-loginbox .fld::placeholder { color:#9aa1ab; }
.lp-loginbox .save { font-size:12px; color:var(--ink-2); margin:2px 0 12px; display:flex; align-items:center; gap:6px; }
.lp-loginbox .find { display:flex; justify-content:center; gap:14px; margin-top:14px; font-size:12px; }
.lp-loginbox .find a { color:var(--ink-2); text-decoration:none; }
.lp-loginbox .find a:hover { color:var(--brand-d); }
/* 로그인 상태로 홈에 왔을 때의 바로가기 카드(2026-07-29) — 로그인 폼 자리를 그대로 쓴다.
버튼(.lp-btn-login/.lp-btn-signup)은 a 태그라 세로 정렬만 보정한다. */
.lp-userbox .lp-userbox-hi { font-size:14px; color:var(--ink); margin:0 0 14px; text-align:center; }
.lp-userbox .lp-userbox-hi strong { color:var(--brand-d); }
.lp-userbox .lp-btn-login { margin-bottom:9px; text-decoration:none; }
.lp-userbox .lp-btn-signup { text-decoration:none; }
/* 슬라이드 컨트롤 */
.lp-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:9; width:46px; height:46px;
border-radius:50%; background:rgba(255,255,255,.55); border:0; cursor:pointer; display:flex;
align-items:center; justify-content:center; color:var(--brand-dd); }
.lp-arrow:hover { background:rgba(255,255,255,.85); }
.lp-arrow:focus-visible { outline:2px solid var(--brand-d); outline-offset:2px; }
.lp-arrow.prev { left:20px; } .lp-arrow.next { right:20px; }
.lp-arrow svg { width:22px; height:22px; }
.lp-dots { position:absolute; z-index:9; bottom:18px; left:50%; transform:translateX(-50%);
display:flex; gap:9px; align-items:center; }
.lp-dot { width:9px; height:9px; border-radius:50%; border:0; background:rgba(0,0,0,.22); cursor:pointer; padding:0; }
.lp-dot[aria-current="true"] { background:var(--brand-d); width:26px; border-radius:5px; }
.lp-dot:focus-visible { outline:2px solid var(--brand-d); outline-offset:2px; }
.lp-pause { margin-left:5px; width:22px; height:22px; border:0; background:transparent; cursor:pointer; color:rgba(0,0,0,.4); }
.lp-pause svg { width:13px; height:13px; }
.lp-pause:focus-visible { outline:2px solid var(--brand-d); outline-offset:2px; }
/* ── 탭 스트립(진입점 3개) ── */
.lp-tabs { display:grid; grid-template-columns:repeat(3,1fr); background:var(--gray-bg); border-bottom:1px solid var(--line); }
.lp-tab { text-align:center; padding:20px 12px; font-size:15px; font-weight:600; color:var(--ink-2);
text-decoration:none; border-right:1px solid var(--line); }
.lp-tab:last-child { border-right:0; }
.lp-tab:hover { color:var(--brand-d); background:#fff; }
.lp-tab.on { background:var(--brand-dd); color:#fff; }
/* ── 하단: 주요메뉴 + 공지 ── */
.lp-below { padding-block:52px; }
.lp-below .in { display:grid; grid-template-columns:1fr 1fr; gap:52px; }
.lp-sec-t { font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 20px; color:var(--ink); }
.lp-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lp-menu-card { background:var(--gray-bg); border-radius:12px; padding:20px; display:flex;
justify-content:space-between; align-items:flex-start; text-decoration:none; border:1px solid transparent; }
.lp-menu-card:hover { border-color:var(--brand); background:#fff; }
.lp-menu-card b { font-size:16px; font-weight:700; color:var(--ink); display:block; }
.lp-menu-card span { font-size:12.5px; color:var(--ink-2); margin-top:4px; display:block; }
/* ★아이콘 v3 — 단색 → 그라디언트 라인(정의는 _lp_header.html의 #lp-grad). */
.lp-menu-card .ico { width:40px; height:40px; flex:none; }
.lp-menu-card .ico svg { width:100%; height:100%; fill:none;
stroke:url(#lp-grad); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lp-notice-head { display:flex; justify-content:space-between; align-items:baseline; }
.lp-notice-head a { font-size:20px; color:var(--ink-2); text-decoration:none; }
.lp-notice-list { list-style:none; margin:6px 0 0; padding:0; }
.lp-notice-list li { padding:14px 0; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:baseline; }
.lp-notice-list li:first-child { border-top:1px solid var(--line); }
.lp-n-badge { font-size:11px; font-weight:700; color:#fff; background:var(--brand); padding:2px 8px; border-radius:4px; flex:none; }
.lp-notice-list a { font-size:14.5px; color:var(--ink); text-decoration:none; }
.lp-notice-list a:hover { color:var(--brand-d); }
.lp-notice-list .em { font-weight:700; }
@media (max-width:900px){
.lp-below .in { grid-template-columns:1fr; gap:36px; }
.lp-loginbox { display:none; }
/* 좁은 폭에선 절대 중앙배치가 로고·시작하기와 겹친다 → 일반 흐름으로 복귀 */
.lp-gnb { position:static; transform:none; gap:20px; margin:0 auto; }
.lp-hdr .in { height:72px; gap:16px; }
.lp-logo .bird { width:42px; height:42px; }
.lp-logo img { height:42px; }
.lp-logo .wm { font-size:21px; }
.lp-slides { aspect-ratio:1120/360; }
}
@media (prefers-reduced-motion: reduce){ .lp-slide { transition:none; } }
/* ═══════════ 주요기능 전용 (.lp-feature) ═══════════ */
.lp-feature .lp-hero { position:relative; overflow:hidden;
background:radial-gradient(90% 120% at 100% -10%, #E8EFFA 0%, transparent 55%), #fff; }
.lp-feature .lp-hero .in { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
min-height:420px; padding-block:60px; }
.lpf-kick { font-size:15px; font-weight:700; color:var(--brand-l); margin:0 0 14px; }
.lpf-h1 { font-size:44px; font-weight:800; line-height:1.18; letter-spacing:-.03em; margin:0 0 20px; color:var(--ink); }
.lpf-h1 .g { color:var(--brand-d); }
.lpf-lead { font-size:16.5px; line-height:1.7; color:var(--ink-2); margin:0 0 26px; max-width:44ch; }
.lpf-chips { display:flex; flex-wrap:wrap; gap:9px; }
.lpf-chip { font-size:13px; font-weight:600; padding:8px 14px; border-radius:20px; background:var(--gray-bg);
color:var(--ink-2); border:1px solid var(--line); }
.lpf-chip.hot { background:var(--brand-d); color:#fff; border-color:var(--brand-d); }
/* 히어로 제품 목업(추후 실제 스크린샷 교체) */
.lpf-art { position:relative; height:100%; min-height:340px; }
.lpf-shot { position:absolute; border-radius:10px; box-shadow:0 20px 44px rgba(44,58,46,.16);
border:1px solid var(--line); background:#fff; overflow:hidden; }
.lpf-shot.a { width:88%; top:20px; left:0; z-index:2; }
.lpf-shot.b { width:62%; top:120px; right:-6%; z-index:3; }
.lpf-paper { padding:16px; }
.lpf-paper.lg { padding:24px; }
.lpf-paper.cols { columns:2; column-gap:20px; }
.lpf-ph { height:8px; background:var(--brand); width:40%; border-radius:3px; margin-bottom:12px; }
.lpf-ph.w55 { width:55%; } .lpf-ph.sage { background:var(--brand-l); }
.lpf-row { height:6px; background:#E5E9F0; border-radius:3px; margin-bottom:7px; }
.lpf-row.s { width:60%; } .lpf-row.m { width:85%; } .lpf-row.q { background:#BFD9F2; width:72%; height:8px; }
.lpf-box { height:34px; background:#EFF3F9; border-radius:4px; margin:8px 0; }
/* 서비스 한눈에 */
.lpf-overview { padding-block:70px; text-align:center; }
.lpf-lbl { font-size:14px; font-weight:700; color:var(--brand-l); margin:0 0 12px; }
.lpf-overview h2 { font-size:34px; font-weight:800; letter-spacing:-.02em; margin:0 0 16px; color:var(--ink); }
.lpf-overview p { font-size:16px; line-height:1.7; color:var(--ink-2); max-width:60ch; margin:0 auto; }
/* 기능 카드 4 */
.lpf-cards { padding-bottom:80px; }
.lpf-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.lpf-card { border:1px solid var(--line); border-radius:14px; padding:24px 20px; background:#fff; transition:.15s; }
.lpf-card:hover { border-color:var(--brand); box-shadow:0 12px 28px rgba(44,58,46,.08); transform:translateY(-2px); }
.lpf-card .tag { font-size:12px; font-weight:700; color:var(--brand-l); margin:0 0 10px; }
/* ★아이콘 v3 — 연한 칩 배경 제거 + 그라디언트 라인. 칩이 있으면 라인 아이콘이 눌려 보인다. */
.lpf-card .ico { width:34px; height:34px;
display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.lpf-card .ico svg { width:32px; height:32px; fill:none;
stroke:url(#lp-grad); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lpf-card h3 { font-size:17px; font-weight:800; margin:0 0 8px; color:var(--ink); }
.lpf-card p { font-size:13px; line-height:1.65; color:var(--ink-2); margin:0; }
/* 기능 상세(좌우 번갈아) */
.lpf-detail { padding-block:64px; border-top:1px solid var(--line); }
.lpf-detail.alt { background:var(--gray-bg); }
.lpf-detail .in { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.lpf-detail.flip .txt { order:2; }
.lpf-detail .lbl { display:inline-block; font-size:13px; font-weight:800; color:#fff; background:var(--brand);
padding:4px 12px; border-radius:16px; margin:0 0 16px; }
.lpf-detail h3 { font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.3; margin:0 0 14px; color:var(--ink); }
.lpf-detail .d-lead { font-size:15.5px; line-height:1.7; color:var(--ink-2); margin:0 0 22px; }
.lpf-detail ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.lpf-detail li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.55; color:var(--ink); }
.lpf-detail li svg { width:20px; height:20px; color:var(--brand); flex:none; margin-top:1px; }
.lpf-detail .shot { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line);
box-shadow:0 18px 40px rgba(44,58,46,.12); background:#fff; min-height:300px; }
/* 추천 대상 */
.lpf-recommend { padding-block:76px; background:var(--brand-dd); color:#fff; text-align:center; }
.lpf-recommend h2 { font-size:30px; font-weight:800; margin:0 0 40px; letter-spacing:-.02em; }
.lpf-quotes { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:820px; margin:0 auto; }
.lpf-quote { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); border-radius:14px;
padding:24px; font-size:15px; line-height:1.6; }
.lpf-quote b { color:#CFE6FA; }
/* CTA */
.lpf-cta { padding-block:88px; text-align:center; background:var(--mint); }
.lpf-cta .z { font-size:52px; font-weight:900; color:var(--brand-d); letter-spacing:-.03em; margin:0 0 8px; }
.lpf-cta h2 { font-size:30px; font-weight:800; margin:0 0 14px; color:var(--ink); letter-spacing:-.02em; }
.lpf-cta p { font-size:16px; line-height:1.7; color:var(--ink-2); margin:0 0 28px; }
.lpf-cta .btn-z { display:inline-flex; align-items:center; gap:9px; height:54px; padding:0 34px; border-radius:28px;
background:var(--brand-d); color:#fff; font-size:17px; font-weight:800; text-decoration:none; }
.lpf-cta .btn-z:hover { background:var(--brand-dd); }
.lpf-cta .note { display:block; margin-top:14px; font-size:13px; color:var(--ink-2); }
@media (max-width:900px){
.lp-feature .lp-hero .in, .lpf-grid, .lpf-detail .in { grid-template-columns:1fr; }
.lpf-grid { grid-template-columns:1fr 1fr; }
.lpf-detail.flip .txt { order:0; }
.lpf-art { display:none; }
.lpf-quotes { grid-template-columns:1fr; }
}
/* ── 문제제작의뢰 소개 (2026-07-21) ─────────────────────────────── */
.ord-steps-lbl { text-align:center; font-size:13px; font-weight:700; letter-spacing:.08em;
color:var(--brand-d); margin:0 0 22px; text-transform:uppercase; }
.ord-step { position:relative; }
.ord-step-no {
position:absolute; top:14px; right:16px;
width:28px; height:28px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--brand); color:#fff; font-size:14px; font-weight:800;
}
.ord-spec-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
gap:12px; margin-top:22px; text-align:left; }
.ord-spec { display:flex; gap:12px; align-items:flex-start;
padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.ord-spec-k { flex:0 0 62px; font-weight:800; color:var(--brand-d); font-size:14px; }
.ord-spec-v { font-size:14px; color:var(--ink-2); line-height:1.6; }
.ord-spec-v em { font-style:normal; color:var(--ink); font-weight:600; }
.ord-preview { display:flex; gap:26px; justify-content:center; flex-wrap:wrap; }
.ord-shot { margin:0; text-align:center; }
.ord-shot figcaption { margin-top:10px; font-size:13.5px; font-weight:600; color:var(--ink-2); }
.ord-link-sub { margin-left:14px; font-size:14px; color:var(--ink-2); text-decoration:underline; }