/* feature-v2-web-registry.css
 * Track: web-registry-markup (Phase B) — markup-only, PDF v2 영역 ③
 * FR1·3·4·5·8·11·13 (s2-web-gnb / s2-web-list / s2-web-detail)
 * BAN1: no border-left/right >= 2px color stripes. BAN2: no gradient text + background-clip:text.
 * BEM: .fv2-registry__<element>--<modifier>
 * iOS zoom-avoidance + touch targets aligned with feature-v2-web-mailbox.css
 */

/* tokens + shell */
:root, .fv2-registry {
    /* CSS 변수는 :root 에 — 전역 토큰 선언 */
    --fv2rg-bg:#fff; --fv2rg-surface:#fff; --fv2rg-border:#e4e4e4; --fv2rg-border-strong:#ddd;
    --fv2rg-text:#111; --fv2rg-text-sub:#555; --fv2rg-text-muted:#999;
    --fv2rg-primary:#111; --fv2rg-primary-soft:#f4f4f4;
    --fv2rg-info:#3a5485; --fv2rg-info-soft:#eef1f6;
    --fv2rg-warning:#7a5a1d; --fv2rg-warning-soft:#f5f1e8;
    --fv2rg-success:#3f7553; --fv2rg-success-soft:#eef3ef;
    --fv2rg-radius:10px; --fv2rg-radius-sm:6px;
    --fv2rg-shadow:none;
    --fv2rg-focus:0 0 0 3px rgba(17,17,17,.18);
}
.fv2-registry {
    background:var(--fv2rg-bg); color:var(--fv2rg-text);
    min-height:100vh; padding:120px 0 64px; font-size:14px; line-height:1.55;
}
/* list 페이지 한정: .pro shell 사용 시 hero 가 fixed GNB 뒤로 흘러들어가도록 page padding 제거 */
.fv2-registry.pro {
    padding:0 0 64px;
}
.fv2-registry__container { max-width:1120px; margin:0 auto; padding:0 20px; }

/* page header */
.fv2-registry__header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.fv2-registry__title { font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0; }
.fv2-registry__subtitle { color:var(--fv2rg-text-sub); margin:4px 0 0; font-size:13px; }

/* category chips (button + aria-pressed) */
.fv2-registry__chips {
    display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; padding:0; list-style:none;
}
.fv2-registry__chip {
    display:inline-flex; align-items:center; height:36px; padding:0 14px;
    border-radius:999px; border:1px solid var(--fv2rg-border);
    background:var(--fv2rg-surface); color:var(--fv2rg-text-sub);
    font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.fv2-registry__chip[aria-pressed="true"] {
    background:var(--fv2rg-primary); color:#fff; border-color:var(--fv2rg-primary);
}
.fv2-registry__chip:focus-visible { outline:none; box-shadow:var(--fv2rg-focus); }

/* sort bar */
.fv2-registry__toolbar {
    display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap;
}
.fv2-registry__count { font-size:13px; color:var(--fv2rg-text-sub); }
.fv2-registry__count-num { font-weight:800; color:var(--fv2rg-text); }
.fv2-registry__sort {
    height:40px; padding:0 12px; border:1px solid var(--fv2rg-border); border-radius:8px;
    background:#fff; font-size:14px; color:var(--fv2rg-text);
}
.fv2-registry__sort:focus-visible { outline:none; box-shadow:var(--fv2rg-focus); border-color:var(--fv2rg-primary); }

/* card grid: mobile 1 / tablet 2 / desktop 3-4 */
.fv2-registry__grid {
    display:grid; grid-template-columns:1fr; gap:16px; list-style:none; margin:0; padding:0;
}
@media (min-width:600px)  { .fv2-registry__grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px)  { .fv2-registry__grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px) { .fv2-registry__grid { grid-template-columns:repeat(4,1fr); } }

.fv2-registry__card {
    background:var(--fv2rg-surface); border:1px solid var(--fv2rg-border);
    border-radius:var(--fv2rg-radius); overflow:hidden; box-shadow:var(--fv2rg-shadow);
    display:flex; flex-direction:column; transition:border-color .15s ease, transform .15s ease;
}
.fv2-registry__card:hover { border-color:var(--fv2rg-border-strong); transform:translateY(-1px); }
.fv2-registry__card-link { display:flex; flex-direction:column; flex:1; color:inherit; text-decoration:none; }
.fv2-registry__card-link:focus-visible { outline:none; box-shadow:var(--fv2rg-focus); border-radius:var(--fv2rg-radius); }
.fv2-registry__thumb {
    aspect-ratio:4/3; background:#f0f2f6 center/cover no-repeat;
    border-bottom:1px solid var(--fv2rg-border); position:relative;
    display:flex; align-items:center; justify-content:center; color:var(--fv2rg-text-muted); font-size:12px;
}
.fv2-registry__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.fv2-registry__badge {
    position:absolute; top:10px; left:10px;
    background:rgba(15,18,24,.78); color:#fff; font-size:11px; font-weight:600;
    padding:4px 8px; border-radius:6px; letter-spacing:.02em;
}
.fv2-registry__card-body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.fv2-registry__name { font-size:15px; font-weight:700; margin:0; color:var(--fv2rg-text); line-height:1.4; }
.fv2-registry__desc {
    font-size:13px; color:var(--fv2rg-text-sub); margin:0;
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    min-height:36px;
}
.fv2-registry__price-row { display:flex; align-items:baseline; justify-content:space-between; margin-top:auto; padding-top:6px; }
.fv2-registry__price { font-size:17px; font-weight:800; color:var(--fv2rg-primary); }
.fv2-registry__price-unit { font-size:12px; font-weight:600; margin-left:1px; color:var(--fv2rg-primary); }
.fv2-registry__pages { font-size:12px; color:var(--fv2rg-text-muted); }

/* empty + pagination */
.fv2-registry__empty {
    background:var(--fv2rg-surface); border:1px dashed var(--fv2rg-border-strong);
    border-radius:var(--fv2rg-radius); padding:60px 20px; text-align:center; color:var(--fv2rg-text-sub);
}
.fv2-registry__empty-title { font-size:15px; font-weight:700; color:var(--fv2rg-text); margin:0 0 6px; }
/* (페이지네이션은 편지쓰기 동일 `.pro .more` 더보기 버튼으로 대체 — product.css 재사용) */
/* 더보기 점진 노출 — JS 활성 환경에서만 숨김(no-JS 는 전체 노출, FOUC/CLS 회피). 인라인 style 대신 클래스 토글. */
.js-enabled .fv2-registry .list .box.reg-more-hidden { display:none; }

/* ───────────── detail page ───────────── */
.fv2-registry__detail { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:flex-start; }
@media (max-width:960px) { .fv2-registry__detail { grid-template-columns:1fr; } }

/* preview gallery — security 3p hard cap */
.fv2-registry__preview { display:flex; flex-direction:column; gap:12px; }
.fv2-registry__preview-main {
    background:#1f2329; border:1px solid var(--fv2rg-border); border-radius:var(--fv2rg-radius);
    aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.fv2-registry__preview-main img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.fv2-registry__preview-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.fv2-registry__preview-thumb {
    aspect-ratio:3/4; border:1px solid var(--fv2rg-border); border-radius:var(--fv2rg-radius-sm);
    background:#f0f2f6 center/cover no-repeat; cursor:pointer; padding:0; overflow:hidden; position:relative;
}
.fv2-registry__preview-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.fv2-registry__preview-thumb[aria-current="true"] { outline:2px solid var(--fv2rg-primary); outline-offset:1px; }
.fv2-registry__preview-thumb:focus-visible { outline:none; box-shadow:var(--fv2rg-focus); }
.fv2-registry__preview-notice {
    background:var(--fv2rg-warning-soft); color:var(--fv2rg-warning);
    border:1px solid var(--fv2rg-border); border-radius:var(--fv2rg-radius-sm);
    padding:10px 14px; font-size:12px; font-weight:600;
}

/* detail info column */
.fv2-registry__info {
    background:var(--fv2rg-surface); border:1px solid var(--fv2rg-border);
    border-radius:var(--fv2rg-radius); padding:20px 22px; box-shadow:var(--fv2rg-shadow);
    display:flex; flex-direction:column; gap:14px;
}
.fv2-registry__info-name { font-size:20px; font-weight:800; margin:0; line-height:1.35; }
.fv2-registry__info-desc { color:var(--fv2rg-text-sub); font-size:14px; margin:0; line-height:1.6; }
.fv2-registry__info-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--fv2rg-text-muted); }
.fv2-registry__info-meta-item b { color:var(--fv2rg-text-sub); font-weight:700; }
.fv2-registry__info-price-row {
    display:flex; align-items:baseline; justify-content:space-between;
    background:var(--fv2rg-primary-soft); border:1px solid var(--fv2rg-border);
    border-radius:var(--fv2rg-radius-sm); padding:12px 16px;
}
.fv2-registry__info-price-label { font-weight:600; color:var(--fv2rg-text); font-size:13px; }
.fv2-registry__info-price { font-size:22px; font-weight:800; color:var(--fv2rg-primary); }
.fv2-registry__info-price-unit { font-size:13px; font-weight:600; margin-left:2px; }

/* stepper (qty / 부수 — FR13) */
.fv2-registry__qty {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    border:1px solid var(--fv2rg-border); border-radius:var(--fv2rg-radius-sm); padding:12px 14px;
}
.fv2-registry__qty-label { font-size:13px; font-weight:700; color:var(--fv2rg-text); }
.fv2-registry__qty-stepper { display:inline-flex; align-items:center; gap:4px; }
.fv2-registry__qty-btn {
    width:36px; height:36px; border:1px solid var(--fv2rg-border); background:#fff;
    border-radius:6px; font-size:16px; font-weight:700; color:var(--fv2rg-text-sub); cursor:pointer;
}
.fv2-registry__qty-btn:focus-visible { outline:none; box-shadow:var(--fv2rg-focus); }
.fv2-registry__qty-input {
    width:56px; height:36px; text-align:center; border:1px solid var(--fv2rg-border);
    border-radius:6px; font-size:16px; font-weight:700; color:var(--fv2rg-text);
}
@media (min-width:768px) { .fv2-registry__qty-input { font-size:14px; } }
.fv2-registry__qty-input:focus-visible { outline:none; border-color:var(--fv2rg-primary); box-shadow:var(--fv2rg-focus); }
.fv2-registry__qty-btn:disabled { opacity:.4; cursor:not-allowed; }

/* 총 결제금액 (단가 × 부수, FR13) */
.fv2-registry__total-row {
    display:flex; align-items:baseline; justify-content:space-between;
    background:var(--fv2rg-primary-soft); border:1px solid var(--fv2rg-border);
    border-radius:var(--fv2rg-radius-sm); padding:12px 16px; margin-top:10px;
}
.fv2-registry__total-label { font-weight:700; color:var(--fv2rg-text); font-size:13px; }
.fv2-registry__total-price { font-size:20px; font-weight:800; color:var(--fv2rg-primary); }
.fv2-registry__total-unit { font-size:13px; font-weight:600; margin-left:2px; }

/* notice list (FR4·5·11) */
.fv2-registry__notes {
    background:#f6f6f6; border:1px solid var(--fv2rg-border); border-radius:var(--fv2rg-radius-sm);
    padding:12px 16px; margin:0;
}
.fv2-registry__notes-title { font-size:12px; font-weight:700; color:var(--fv2rg-text-sub); margin:0 0 8px; letter-spacing:.02em; }
.fv2-registry__notes-list {
    margin:0; padding:0; list-style:none;
    display:flex; flex-direction:column; gap:4px;
    color:var(--fv2rg-text-sub);
}
.fv2-registry__notes-list li {
    position:relative;
    padding:1px 0 1px 16px;
    font-size:12px; line-height:1.7;
}
/* 전역 `li::marker { content:none }` 우회 — ::before 로 커스텀 불릿 */
.fv2-registry__notes-list li::before {
    content:"";
    position:absolute;
    left:5px; top:0.75em;
    width:3px; height:3px;
    background:var(--fv2rg-text-sub);
    border-radius:50%;
}
.fv2-registry__notes-list b { color:var(--fv2rg-text); font-weight:700; }

/* CTA — primary(주문하고 발송하기) + secondary(등기자료만 보내기) 2버튼 그룹 */
.fv2-registry__cta-row {
    display:flex; flex-direction:column; gap:8px; margin-top:16px;
}
.fv2-registry__cta {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    height:52px; padding:0 20px; border-radius:10px;
    background:var(--fv2rg-primary); color:#fff; border:1px solid var(--fv2rg-primary);
    font-size:15px; font-weight:700; text-decoration:none; cursor:pointer; width:100%;
}
.fv2-registry__cta:hover { background:#000; }
.fv2-registry__cta:focus-visible { outline:none; box-shadow:var(--fv2rg-focus); }
.fv2-registry__cta--primary { /* default 색상 그대로 */ }
.fv2-registry__cta--secondary,
.fv2-registry__cta--ghost {
    background:#fff; color:var(--fv2rg-text); border-color:var(--fv2rg-border-strong);
}
.fv2-registry__cta--secondary:hover,
.fv2-registry__cta--ghost:hover { background:#f4f6fa; }

/* ───────────── product-list 호환 카드 (편지지 패턴 재사용) ─────────────
 * registry/list.html 은 product.css `.pro .list .box` 를 그대로 차용한다.
 * 이 블록은 product.css가 제공하지 않는 등기자료 고유 요소만 담당.
 */
.fv2-registry .fv2-registry__thumb-fallback {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:var(--fv2rg-text-muted); font-size:13px; background:var(--fv2rg-border);
}
.fv2-registry .pro .banner_icon,
.fv2-registry .banner_icon {
    bottom:8px; right:8px; display:flex; gap:6px; align-items:center;
}
.fv2-registry .fv2-registry__badge {
    background:rgba(20,24,32,.78); color:#fff; font-size:11px; font-weight:600;
    padding:3px 8px; border-radius:6px; line-height:1.4;
}
.fv2-registry .fv2-registry__badge--page { background:var(--fv2rg-info); }
.fv2-registry .fv2-registry__card-price {
    margin-top:8px; font-size:14px; color:var(--fv2rg-text);
}
.fv2-registry .fv2-registry__card-price b {
    font-size:18px; font-weight:700; margin-right:2px;
}

/* 홈 등기자료 섹션 — Swiper 미사용. 정적 4-column flex grid.
 * 카드 폭/높이는 .sec2 .swiper2 .swiper-slide(편지지)와 동일 토큰(width:300px, .img 정사각형) 채택.
 */
.sec2--registry .sec2-registry-grid {
    display:flex; flex-wrap:wrap; gap:25px;
}
.sec2--registry .sec2-registry-card {
    width:300px; flex:0 0 300px;
}
.sec2--registry .sec2-registry-card a { display:block; cursor:pointer; }
.sec2--registry .sec2-registry-card .img {
    width:100%; padding-top:100%; position:relative;
    box-shadow:0 0 7px rgba(0,0,0,.1);
}
.sec2--registry .sec2-registry-card .img .front {
    position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;
}
.sec2--registry .sec2-registry-card .img .banner_icon {
    position:absolute; right:8px; bottom:8px; z-index:2;
    display:flex; gap:6px;
}
.sec2--registry .sec2-registry-card .fv2-registry__badge {
    background:rgba(20,24,32,.78); color:#fff; font-size:11px; font-weight:600;
    padding:3px 8px; border-radius:6px; line-height:1.4;
}
.sec2--registry .sec2-registry-card .fv2-registry__badge--page { background:#2566d4; }
.sec2--registry .sec2-registry-card .fv2-registry__thumb-fallback {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#8a909a; background:#e5e8ee; font-size:13px;
}
.sec2--registry .sec2-registry-card p {
    font-size:17px; margin:21px 0 0; color:#000; font-weight:600;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:25px;
}
.sec2--registry .sec2-registry-card span {
    display:inline-block; width:100%; margin-top:6px; font-size:14px; color:#777;
    font-weight:300; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sec2--registry .sec2-registry-card .fv2-registry__card-price {
    margin:8px 0 0; font-size:14px; color:#1a1d22;
}
.sec2--registry .sec2-registry-card .fv2-registry__card-price b {
    font-size:18px; font-weight:700; margin-right:2px;
}
.sec2--registry .sec2-registry-card .go_bt {
    margin-top:20px; display:flex; gap:5px;
}
.sec2--registry .sec2-registry-card .go_bt .write {
    flex:1; font-size:15px; color:#fff; background:#111; border:none; height:40px;
    font-weight:500; cursor:pointer;
}
.sec2--registry .sec2-registry-card .go_bt .preview_open {
    width:40px; height:40px; border:1px solid #111; background:none; cursor:pointer;
}
.sec2--registry .sec2-registry-card .go_bt .preview_open img {
    width:20px; vertical-align:middle;
}
.sec2--registry .sec2-registry-card .go_bt button[disabled] { opacity:.5; cursor:default; }
@media (max-width:1440px) {
    .sec2--registry .sec2-registry-card { width:calc((100% - 75px) / 4); flex:0 0 calc((100% - 75px) / 4); }
}
@media (max-width:1024px) {
    .sec2--registry .sec2-registry-card { width:calc((100% - 25px) / 2); flex:0 0 calc((100% - 25px) / 2); }
}
@media (max-width:600px) {
    .sec2--registry .sec2-registry-card { width:100%; flex:0 0 100%; }
}

/* ───────────── home section (index.html) — PDF v2 영역 ③ FR2·FR3 ─────────────
 * 홈에 인라인으로 내장될 때 .fv2-registry 의 min-height:100vh / page padding 을 무력화하고,
 * sec2/sec3 사이 자연스러운 spacing 적용. 카드 그리드는 동일 컴포넌트 재사용.
 */
.fv2-registry__home {
    min-height:0; padding:48px 0; background:transparent;
}
.fv2-registry__home-inner { max-width:1120px; margin:0 auto; padding:0 20px; }
.fv2-registry__home-header {
    display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
    margin-bottom:18px; flex-wrap:wrap;
}
.fv2-registry__home-title { font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0; color:var(--fv2rg-text); }
.fv2-registry__home-subtitle { color:var(--fv2rg-text-sub); margin:4px 0 0; font-size:13px; }
.fv2-registry__home-more {
    display:inline-flex; align-items:center; gap:4px;
    color:var(--fv2rg-text-sub); font-size:13px; font-weight:600; text-decoration:none;
    padding:8px 4px; border-radius:6px;
}
.fv2-registry__home-more:hover { color:var(--fv2rg-primary); }
.fv2-registry__home-more:focus-visible { outline:none; box-shadow:var(--fv2rg-focus); }

/* placeholder fallback — 데이터 없을 때 4매 */
.fv2-registry__home-grid--placeholder .fv2-registry__card { opacity:.65; }
.fv2-registry__home-grid--placeholder .fv2-registry__card-link {
    cursor: default;
    pointer-events: none;
}

/* SR-only status message for placeholder fallback */
.fv2-registry__home-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width:600px) {
    .fv2-registry__home { padding:32px 0; }
    .fv2-registry__home-title { font-size:20px; }
}

/* (.badge-new 은 header.css 로 이동 — GNB와 함께 모든 페이지에서 노출되어야 함) */

/* hero 배너 임시 이미지 표시 caption — 우상단 위치, 검정 반투명 칩 */
.fv2-registry__hero { position:relative; }
.fv2-registry__hero-caption {
    position:absolute; top:12px; right:16px; z-index:1;
    display:inline-block; padding:6px 10px; border-radius:6px;
    background:rgba(17,17,17,.72); color:#fff; font-size:11px; font-weight:600;
    letter-spacing:.02em; pointer-events:none;
}