/* ===================================================================== ARVO 쇼핑몰 — 공통 레이아웃(Phase 1, 2026-10-10) 근거: 5.work/디자인개선안_20261009/design.html §3(공통 요소), §6-1(메인) mockup_main.html · mockup-sub.css 의 모양을 그대로 이식(값 동일하게 유지). 적용 범위: partials/header.php · partials/footer.php 가 그리는 마크업 전용 (shop.php 히어로/카테고리 원형, reviews.php·mypage.php 헤더/푸터). 주의: 토큰(--la-*)은 assets/shop.css 의 전역 토큰(--pt,--ink,--sub,--line,--wrap 등)과 값이 다르므로 접두어로 분리했다 — 같은 이름을 재선언하면 카드·모달 등 기존 공용 요소 색상이 전부 바뀌어 버린다(전역 토큰 충돌 방지, CLAUDE.md 공용코드 수정 원칙). ===================================================================== */ :root { --la-navy:#1a2a5e; --la-navy-d:#111c40; --la-beige:#d8b98a; --la-beige-s:#f4ece0; --la-soft:#f7f5f1; --la-ink:#141414; --la-sub:#767676; --la-line:#ececec; --la-sale:#e5484d; --la-star:#f5a524; --la-wrap:1240px; --la-r:14px; } .rel { position:relative; } .wrap { max-width:var(--la-wrap); margin:0 auto; padding:0 24px; } /* ============ 1. 띠배너(topbar) — design.html §3 ============ */ .topbar { background:var(--la-navy-d); color:#fff; font-size:12.5px; text-align:center; height:34px; overflow:hidden; position:relative; } .topbar div { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .5s, opacity .5s; } .topbar b { color:var(--la-beige); } .topbar .ico { margin-right:2px; } /* ============ 2. 헤더 — 상시 검색창 + 카테고리 메뉴 막대 ============ */ .hdr { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--la-line); } .hdr-row { display:flex; align-items:center; gap:28px; height:76px; } .logo { display:flex; align-items:center; } .logo img { height:44px; width:auto; object-fit:contain; } /* 2026-10-12 결함 수정: 바로 아래 5개 규칙을 전역 `.search`(클래스명만 비교)로 선언해 두면 list.php 의 검색결과 카드(
, type=search 일 때 클래스가 "search"가 됨)에도 그대로 걸려 max-width:520px 가 먹어 카드 폭이 520px 로 쪼그라드는 결함이 났다(실측으로 발견, 다른 type 의 .lh 는 1192px 정상이라 search 만 깨짐). 헤더 검색창은 항상 `.hdr` 안의
라서(partials/header.php:117, list.php 폴백헤더:324) `.hdr .search` 로 스코프해도 헤더 검색창 모양은 그대로다 — grep 으로 .search 사용처 전수 확인 후 적용. */ .hdr .search { flex:1; max-width:520px; position:relative; } .hdr .search input { width:100%; height:44px; border:1.5px solid var(--la-ink); border-radius:999px; padding:0 48px 0 20px; font-size:14px; font-family:inherit; outline:none; } .hdr .search input::placeholder { color:#9a9a9a; } .hdr .search button { position:absolute; right:6px; top:6px; width:32px; height:32px; border:0; border-radius:50%; background:var(--la-ink); color:#fff; font-size:14px; display:flex; align-items:center; justify-content:center; } .hdr .search .hot { position:absolute; left:20px; top:50px; display:flex; gap:8px; font-size:12px; color:var(--la-sub); white-space:nowrap; } .hdr .search .hot a:hover { color:var(--la-navy); } /* 상품 상세(search=false) — 인기 검색어 생략(항상), 검색창 자체는 모바일에서만 숨김(PC는 그대로) */ @media (max-width:720px) { .hdr.pdp .search { display:none; } } .icons { margin-left:auto; display:flex; gap:22px; font-size:12px; color:#444; } .icons .ic-link, .icons .ic-link-wrap a { display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; border:0; background:transparent; font:inherit; color:inherit; cursor:pointer; padding:0; } /* 중요: shop.js 의 전역 클릭 라우터(document.addEventListener('click', ...))가 e.target.id 를 직접 비교한다(t.closest 가 아님). 아이콘/글자를 으로 감싸면 클릭이 자식에서 잡혀 e.target 이 #cart-btn 자신이 아니게 되어 장바구니가 영영 안 열리는 버그가 났다(실측으로 발견). 자식 전체를 pointer-events:none 으로 꺼서 클릭이 항상 버튼/링크 자신에게 떨어지게 한다. */ .icons .ic-link > * { pointer-events: none; } .icons .ic { font-size:22px; line-height:1; } .icons .cnt { position:absolute; top:-4px; right:-6px; background:var(--la-sale); color:#fff; font-size:10px; font-weight:800; border-radius:99px; padding:1px 5px; } /* 로그인 상태(shop.js initAuth 가 #auth-area 내부를 old 스타일(.txt-btn/.hdr-me/.hdr-logout)로 바꿔치기한다 — 기존 로직 재사용 범위라 모양을 맞추기보다 레이아웃만 흐트러지지 않게 처리 */ .icons #auth-area.ic-link-wrap { display:flex; align-items:center; } .gnb { display:flex; gap:30px; height:50px; align-items:center; font-size:15px; font-weight:600; overflow-x:auto; overflow-y:hidden; /* 10-16 탭류 세로 스크롤 제거 */ scrollbar-width:none; } .gnb::-webkit-scrollbar { display:none; } .gnb a { white-space:nowrap; position:relative; padding:14px 0; color:var(--la-ink); } .gnb a:hover, .gnb a.on { color:var(--la-navy); } .gnb a.on::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--la-navy); } .gnb a.gnb-sale { color:var(--la-sale); } .gnb .sep { width:1px; height:14px; background:var(--la-line); flex:none; } /* ============ 3. 히어로 — 메인 슬라이드 + 보조 배너 2 ============ */ .hero { display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-top:24px; } .hero-main { position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/9; background:var(--la-soft); } .slide { position:absolute; inset:0; opacity:0; transition:opacity .7s; } .slide.on { opacity:1; } .slide .bg { position:absolute; inset:0; background-size:cover; background-position:center; } .slide .shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,16,40,.62) 0%,rgba(10,16,40,.15) 60%,transparent); } .slide .copy { position:absolute; left:48px; bottom:48px; color:#fff; max-width:440px; } .slide .eyebrow { font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--la-beige); } /* 한글 단어 중간 줄바꿈 방지(2026-10-12 대표님 지시) — keep-all 로 어절 단위까지만 끊고, 혹시라도 한 어절이 박스보다 길면 overflow-wrap:anywhere 가 안전망으로 강제 줄바꿈한다(가로 넘침 방지). */ .slide h2 { font-size:40px; line-height:1.18; margin:10px 0 12px; font-weight:800; letter-spacing:-.02em; word-break:keep-all; overflow-wrap:anywhere; } .slide p { margin:0 0 22px; font-size:15px; opacity:.9; word-break:keep-all; overflow-wrap:anywhere; } .slide .btn-w { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--la-ink); border:0; border-radius:999px; padding:13px 24px; font-weight:700; font-size:14px; } .slide.products { background:var(--la-beige-s); } .slide.products .shade { display:none; } .slide.products .copy { color:var(--la-ink); left:48px; top:50%; bottom:auto; transform:translateY(-50%); max-width:250px; } .slide.products .eyebrow { color:var(--la-navy); } .slide .stack { position:absolute; right:32px; top:50%; transform:translateY(-50%); display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:56%; } .slide .stack div { aspect-ratio:1; border-radius:14px; background:#fff center/cover; box-shadow:0 10px 30px rgba(0,0,0,.08); } .dots { position:absolute; right:24px; bottom:22px; display:flex; gap:6px; z-index:3; } .dots button { width:8px; height:8px; border-radius:99px; border:0; background:rgba(255,255,255,.5); padding:0; transition:width .3s; } .dots button.on { width:22px; background:#fff; } .hero-side { display:grid; grid-template-rows:1fr 1fr; gap:14px; } /* 서브 배너 0개: 슬라이드 전체 폭 / 1개: 남은 칸을 그 배너가 다 쓰게(빈 공백 방지, 2026-10-10 통합) */ .hero.no-side { grid-template-columns:1fr; } .hero.no-side .hero-side { display:none; } .hero-side:has(> .side-b:only-child) { grid-template-rows:1fr; } .side-b { border-radius:20px; padding:26px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; } .side-b h3 { margin:0; font-size:21px; line-height:1.3; font-weight:800; letter-spacing:-.01em; } .side-b small { font-size:13px; opacity:.8; } .side-b .thumbs { display:flex; gap:8px; } .side-b .thumbs div { width:62px; height:62px; border-radius:12px; background:#fff center/cover; } .side-b.beige { background:var(--la-beige-s); color:var(--la-ink); } .side-b.navy { background:var(--la-navy); color:#fff; } .side-b .go { position:absolute; right:22px; top:24px; font-size:20px; } /* 공통 섹션 머리(히어로 아래 캐릭터·종류별 탐색에서 사용) */ .sec { margin-top:72px; } .sec-h { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; gap:16px; } .sec-h h2 { margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; } .sec-h h2 em { font-style:normal; color:var(--la-navy); } .sec-h p { margin:4px 0 0; color:var(--la-sub); font-size:14px; } .more { font-size:13px; color:var(--la-sub); white-space:nowrap; } .more:hover { color:var(--la-navy); } /* ============ 4. 캐릭터·종류별 원형 탐색 ============ */ .ips { display:grid; grid-template-columns:repeat(8,1fr); gap:16px; } .ip { text-align:center; display:block; } .ip .c { aspect-ratio:1; border-radius:50%; background:var(--la-soft) center/cover; border:1px solid var(--la-line); transition:transform .2s; } .ip:hover .c { transform:translateY(-4px); } .ip b { display:block; margin-top:10px; font-size:14px; font-weight:700; } .ip span { font-size:12px; color:var(--la-sub); } /* ============ 상품 카드 — list.php·shop.php?p= 등 신규 화면 공용(design.html §3) ============ 흰 배경 사진도 카드가 구분되게: ① 썸네일 바탕을 옅은 베이지(#f4f1ec)로 두고 사진을 multiply 합성 ② 안쪽 1px 테두리를 사진 위에 얹어 경계를 한 번 더 표시(Phase 0 에서 assets/shop.css 에 먼저 적용된 값과 동일) */ .grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px 18px; } .rail { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 4*18px)/5); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:thin; } .card { position:relative; display:block; scroll-snap-align:start; } .card .th { position:relative; aspect-ratio:1; border-radius:var(--la-r); overflow:hidden; background:#f4f1ec; } .card .th img { width:100%; height:100%; object-fit:cover; transition:transform .45s; mix-blend-mode:multiply; } .card .th::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(20,20,20,.06); pointer-events:none; z-index:1; } .card:hover .th img { transform:scale(1.05); } .badges { position:absolute; left:10px; top:10px; display:flex; gap:4px; z-index:2; } .bd { font-size:10.5px; font-weight:800; letter-spacing:.04em; padding:3px 7px; border-radius:5px; color:#fff; } .bd.new { background:var(--la-navy); } .bd.best { background:var(--la-ink); } .bd.sale { background:var(--la-sale); } .heart { position:absolute; right:10px; top:10px; z-index:2; width:32px; height:32px; border:0; border-radius:50%; background:rgba(255,255,255,.88); font-size:16px; display:flex; align-items:center; justify-content:center; color:#333; } .heart.on { color:var(--la-sale); } .quick { position:absolute; left:10px; right:10px; bottom:10px; z-index:2; height:38px; border:0; border-radius:10px; background:rgba(20,20,20,.86); color:#fff; font-size:13px; font-weight:700; opacity:0; transform:translateY(8px); transition:.25s; } .card:hover .quick { opacity:1; transform:none; } .so { position:absolute; inset:0; background:rgba(255,255,255,.65); display:flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:.12em; z-index:1; } .rank-no { position:absolute; left:0; bottom:0; z-index:2; background:var(--la-ink); color:#fff; font-weight:800; font-size:16px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-top-right-radius:12px; } .card .nm { margin:12px 0 6px; font-size:14px; line-height:1.4; height:39px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .card .pr { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; } .card .pr .d { color:var(--la-sale); font-weight:800; font-size:16px; } .card .pr .p { font-weight:800; font-size:16px; } .card .pr .l { color:#b3b3b3; text-decoration:line-through; font-size:12.5px; } .card .meta { margin-top:5px; display:flex; gap:8px; font-size:12px; color:var(--la-sub); align-items:center; flex-wrap:wrap; } .card .meta .st { color:var(--la-star); } .card .tag { font-size:11px; padding:1px 6px; border-radius:4px; background:var(--la-soft); color:#555; } /* ============ 푸터 ============ */ .ftr { background:var(--la-navy-d); color:#c9cfe0; margin-top:80px; padding:52px 0 110px; font-size:13px; } .ftr-g { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:28px; } .ftr h4 { color:#fff; margin:0 0 12px; font-size:14px; } .ftr a, .ftr span, .ftr .ftr-link-btn { display:block; margin:6px 0; } .ftr a { color:rgba(255,255,255,.72); transition:color .12s; } .ftr a:hover { color:#fff; } /* 주문조회 — 가 아니라 JS 모달을 여는