/* * 우커머스(Shop/상품상세/장바구니/체크아웃) 전용 스타일. * 배경: 우커머스가 테마에 연동되지 않은 채 기본 마크업만 출력되면 사이트 디자인 토큰 * (--ll-bg, --ll-ink, --ll-card, --ll-lime, --ll-radius)과 전혀 안 맞는 화면이 나옴. * 결정: 기존 main.css의 :root 변수를 그대로 재사용해 상품 카드·버튼·체크아웃 폼을 * 사이트 전체 톤(화이트 배경 + 라임 포인트 + 필 버튼)에 맞춤. */ div.woocommerce { color: var(--ll-ink); font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ── 공통 컨테이너 폭 — 사이트 전체와 동일한 최대 너비 사용 ───────────── */ /* ⚠️ 중요: 우커머스는 에도 class="woocommerce woocommerce-page"를 자동으로 붙입니다. 태그 없이 .woocommerce, .woocommerce-page 만 쓰면 이 규칙이 실제 콘텐츠 div가 아니라 자체에 적용되어(max-width로 body 전체가 좁아짐) 헤더 간격·푸터 큰 로고 크기 등 페이지 전체 레이아웃이 연쇄적으로 깨졌습니다. div.woocommerce로 콘텐츠 래퍼 div만 정확히 지정해 body는 건드리지 않도록 수정합니다(2026-08-19, 근본 원인 확정). 상단 패딩 180px: 공지바가 떠서 헤더가 밀려 내려오는 상태까지 감안한 여유값. */ div.woocommerce { max-width: var(--ll-container); margin: 0 auto; padding: 180px 24px 96px; min-height: 70vh; } /* ── 브레드크럼 / 페이지 제목 — Shop 상단 ─────────────────────────────── */ .woocommerce-breadcrumb { color: var(--ll-muted); font-size: 13px; margin-bottom: 24px; } .woocommerce-breadcrumb a { color: var(--ll-muted); text-decoration: underline; } .woocommerce-products-header__title.page-title, .woocommerce h1.page-title { font-size: 32px; font-weight: 700; margin: 0 0 32px; } /* ── 안내 문구(상품 없음/장바구니 비어있음/성공·에러 메시지) ──────────── */ /* Luna 지적(2026-08-22) — 상품 상세에서 장바구니 담기 후 뜨는 알림이 "UI가 이상해" 보였음. 실측(Playwright getComputedStyle) 결과 두 가지 원인이 겹쳐 있었습니다: 1) 우커머스 코어 CSS가 체크마크 아이콘(::before, 아이콘 폰트)을 강제. 2) 진짜 원인은 CSS가 아니라 접근성 스크립트 — 우커머스가 알림에 role="alert" tabindex="-1"을 주고 스크린리더 안내를 위해 자동으로 .focus()를 호출하는데, 별도 :focus 스타일이 없어 브라우저 기본 파란 포커스 아웃라인(outline)이 그대로 노출되고 있었습니다(border/box-shadow 문제가 아니라 outline 문제 — 처음엔 border로 오인해 늦게 찾음). 알림 박스 자체는 사용자가 탭으로 이동할 대상이 아니라 스크린리더 안내용이라 outline을 꺼도 접근성에 지장 없습니다(왼쪽 강조선으로 시각적 구분은 유지). */ .woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-noreviews, p.cart-empty { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--ll-card) !important; border: 1px solid var(--ll-line) !important; border-top: none !important; border-left: 3px solid var(--ll-dark) !important; border-radius: 10px !important; box-shadow: none !important; outline: none !important; padding: 16px 20px; color: var(--ll-ink); font-size: 14.5px; line-height: 1.6; list-style: none; margin: 0 0 24px; } .woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { display: none !important; } .woocommerce-error { border-left-color: #b3261e !important; background: #fdecec !important; color: #b3261e; } .woocommerce-message .button, .woocommerce-info .button { flex-shrink: 0; margin-left: 0; white-space: nowrap; } /* ── Shop 상단 툴바 — 결과 개수(왼쪽) + 정렬 드롭다운(오른쪽) ─────────── */ /* 우커머스 기본 마크업이 이 둘을 형제 요소로 출력해서 자체 CSS가 float로 좌우 배치함 — 같은 방식 유지 */ .woocommerce .woocommerce-result-count { float: left; margin: 0 0 24px; color: var(--ll-muted); font-size: 13px; line-height: 40px; } .woocommerce .woocommerce-ordering { float: right; margin: 0 0 24px; } /* Luna 피드백(2026-08-20): 정렬 드롭다운 화살표가 알약(pill) 테두리를 벗어나 보임 — 브라우저 기본 화살표(appearance 미해제) + padding 부족이 원인. appearance:none으로 끄고 SVG 셰브런을 배경 이미지로 직접 그려 크기·위치를 고정합니다. */ .woocommerce .woocommerce-ordering select { -webkit-appearance: none; appearance: none; border: 1px solid var(--ll-line); border-radius: 999px; padding: 8px 34px 8px 18px; min-height: 38px; font-size: 13px; font-family: inherit; color: var(--ll-ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center; background-size: 10px 6px; cursor: pointer; } /* ── 페이지네이션 ─────────────────────────────────────────────────── */ .woocommerce nav.woocommerce-pagination { margin-top: 40px; } .woocommerce nav.woocommerce-pagination ul { display: flex; gap: 6px; list-style: none; border: none; margin: 0; padding: 0; } .woocommerce nav.woocommerce-pagination ul li { border: none; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: 999px; color: var(--ll-ink); font-size: 14px; } .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ll-dark); color: #fff; } /* ── 수량 입력 — −/+ 스텝퍼 (Luna 요청 2026-08-20 — 수량 선택 UX 개선) ────────── 배경: 네이티브 스핀 화살표뿐이던 숫자 입력만으로는 모바일에서 조작이 불편함. JS(woocommerce-product.js)가 주입하는 .minus/.plus 버튼을 감싸는 알약 컨테이너로 .quantity 자체를 바꾸고, 안쪽 입력은 테두리를 없애 하나로 이어진 스텝퍼처럼 보이게. */ .woocommerce div.product .quantity { display: inline-flex; align-items: center; border: 1px solid var(--ll-line); border-radius: 999px; overflow: hidden; background: #fff; } .woocommerce div.product .quantity .qty { width: 40px; height: 42px; border: none; border-radius: 0; text-align: center; font-family: inherit; font-size: 14px; font-weight: 600; background: transparent; -moz-appearance: textfield; } .woocommerce div.product .quantity .qty::-webkit-inner-spin-button, .woocommerce div.product .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .woocommerce div.product .quantity .plus, .woocommerce div.product .quantity .minus { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 42px; border: none; background: transparent; color: var(--ll-ink); font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } .woocommerce div.product .quantity .plus:hover, .woocommerce div.product .quantity .minus:hover { background: var(--ll-card); } .woocommerce div.product .quantity .plus:active, .woocommerce div.product .quantity .minus:active { background: var(--ll-line); } /* ── Shop 목록 — 카드형 그리드 ─────────────────────────────────────── */ /* nookitokki.co.kr/class 실측 벤치마킹(2026-08-20): 카드폭 약 370px, 갭 약 32px, 3열 고정 그리드. 예전엔 repeat(3,1fr)에서 상품이 1개면 카드가 어색하게 커 보이는 문제가 있었는데, 그건 사실 우커머스 clearfix 의사요소가 그리드 칸을 하나 먹어서 상품이 2번째 칸으로 밀리던 별개의 버그였고(그 버그는 이미 수정됨) — 이제 3열 고정으로 되돌려도 상품 1개일 때 정확히 1번째 칸에, 나머지 칸은 정상적으로 비어 보입니다. */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; list-style: none; margin: 0; padding: 0; clear: both; } /* 카드 디자인은 사이트에 이미 있는 블로그 갤러리 카드(.ll-blog-gcard)와 톤을 맞춥니다 — 회색 채움 카드 대신 화이트 배경 + 얇은 라인 테두리, 이미지 호버 줌, 대문자 스몰캡 라벨. "우커머스 기본 느낌" 대신 이 사이트의 에디토리얼한 톤에 맞춘 재설계입니다(2026-08-19). 우커머스 자체 기본 CSS가 li.product에 width:30.75%(구버전 float 그리드 잔재)를 강제해서 grid 안에서도 카드가 좁고 길게 찌그러지는 문제가 있어 width:100%로 되돌립니다. */ .woocommerce ul.products li.product { width: 100% !important; float: none !important; margin: 0 !important; background: #fff; border: 1px solid var(--ll-line); border-radius: 14px; overflow: hidden; transition: transform 260ms var(--ll-ease, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 260ms ease; } .woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(32, 37, 39, 0.09); } .woocommerce ul.products li.product a { display: block; color: inherit; text-decoration: none; } /* nookitokki.co.kr 카드 이미지 실측 비율(370px 폭 : 296px 높이 ≈ 5:4)로 맞춤(2026-08-20). */ .woocommerce ul.products li.product .ll-product-media { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; background: var(--ll-card); } .woocommerce ul.products li.product img { width: 100%; height: 100%; object-fit: cover; transition: scale 400ms var(--ll-ease, cubic-bezier(0.16, 1, 0.3, 1)); } .woocommerce ul.products li.product:hover img { scale: 1.05; } .woocommerce ul.products li.product .ll-product-body { display: block; padding: 16px 18px 20px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; } .woocommerce ul.products li.product .price { font-size: 15px; font-weight: 700; color: var(--ll-ink); } .woocommerce ul.products li.product .price del { color: var(--ll-muted); font-weight: 400; margin-right: 6px; } .woocommerce ul.products li.product .price ins { text-decoration: none; } /* 할인 배지 — 밋밋한 "할인!" 문구 대신 실제 할인율(%)을 큼직하게 보여주는 원형 배지로 교체(Luna 요청 2026-08-20 — UX·마케팅 개선, 2차 피드백으로 기울인 사각 스티커 대신 원형 + 그림자 제거로 재조정). 몇 % 할인인지 목록에서 바로 보이면 클릭 유인이 커집니다. 다크 배경 + 라임 텍스트로 흰 상품 이미지 위에서도 확실히 눈에 띄게. position 값(top/left/right)에 !important를 안 줬더니 우커머스 자체 기본 CSS(top:-1px;right:-1px 등)가 더 구체적인 선택자로 이겨서 배지가 카드 우상단 모서리에 걸쳐 잘려 보였습니다(2026-08-20). Luna 피드백(2026-08-21): 12px 오프셋이 카드 자체의 border-radius:14px보다 작아서 카드 모서리의 둥근 곡선이 배지 원의 테두리를 살짝 깎아먹어(overflow:hidden) 부자연스럽게 잘려 보였습니다 — 카드 radius(14px)보다 확실히 큰 18px로 띄워서 해결. */ .woocommerce span.onsale { top: 18px !important; left: 18px !important; right: auto !important; min-height: 0 !important; min-width: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 52px; height: 52px; padding: 0 !important; background: var(--ll-dark, #171c1d) !important; color: var(--ll-lime) !important; line-height: 1; border-radius: 50% !important; } .woocommerce span.onsale strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; } .woocommerce span.onsale small { margin-top: 1px; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: rgba(207, 255, 36, 0.85); } /* 장바구니 버튼은 바깥의 li 직속 자식이라 .ll-product-body 패딩을 안 받습니다 — 카드 좌우 여백(18px)에 맞춰 별도로 마진을 줍니다. */ .woocommerce ul.products li.product a.button, .woocommerce ul.products li.product .added_to_cart { margin: 0 18px 18px; } /* ── Shop 목록 카드 — "구매요청하기" 버튼(Luna 지적 2026-08-21 — "스토어페이지에는 장바구니 버튼만 있다"). 상세페이지 .ll-buy-actions와 같은 개념으로, 장바구니 옆에 나란히 절반씩 배치합니다. 카드 안에 있으므로 위 18px 마진 규칙은 여기서 0으로 덮고, 마진은 .ll-card-actions 래퍼 자체가 가져갑니다. */ .woocommerce ul.products li.product .ll-card-actions { display: flex; gap: 8px; margin: 0 18px 18px; } .woocommerce ul.products li.product .ll-card-actions a.button, .woocommerce ul.products li.product .ll-card-actions .added_to_cart { margin: 0; flex: 1; padding: 0 12px; font-size: 13px; } /* Luna 피드백(2026-08-21) — 상세페이지와 동일하게 장바구니는 보조(아웃라인), 구매요청하기는 주요(다크 채움)로 색을 교체합니다. 위 .woocommerce a.button 기본 규칙(다크 채움 !important)을 이 카드 컨텍스트에서만 더 높은 특이성 + !important로 덮습니다. */ .woocommerce ul.products li.product .ll-card-actions a.button, .woocommerce ul.products li.product .ll-card-actions .added_to_cart { background: #fff !important; color: var(--ll-dark, #171c1d) !important; border: 1px solid var(--ll-dark, #171c1d) !important; } .woocommerce ul.products li.product .ll-card-actions a.button:hover, .woocommerce ul.products li.product .ll-card-actions .added_to_cart:hover { background: var(--ll-dark, #171c1d) !important; color: #fff !important; } .woocommerce ul.products li.product .ll-purchase-request-btn--card { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--ll-dark, #171c1d); border-radius: 999px; background: var(--ll-dark, #171c1d); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 180ms ease, color 180ms ease; } .woocommerce ul.products li.product .ll-purchase-request-btn--card:hover { background: var(--ll-lime, #cfff24); color: var(--ll-dark, #171c1d); border-color: var(--ll-lime, #cfff24); } /* ── 버튼 — 사이트 CTA(.ll-nav__cta)와 동일한 필 스타일 ───────────────── */ /* 우커머스 자체 기본 CSS(.woocommerce div.product form.cart .button 등)가 이 규칙보다 더 구체적인 선택자로 브랜드색(#7f54b2 보라)을 강제해서, !important로 확실히 덮습니다. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-page a.button, .woocommerce div.product form.cart .button, .woocommerce .single_add_to_cart_button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; border-radius: 999px !important; background: var(--ll-dark) !important; color: #fff !important; font-size: 14px; font-weight: 600; border: none !important; cursor: pointer; transition: background 220ms ease, transform 220ms ease; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce div.product form.cart .button:hover, .woocommerce .single_add_to_cart_button:hover { background: var(--ll-lime) !important; color: var(--ll-dark) !important; } /* ── 상품 상세 페이지 ──────────────────────────────────────────────── */ /* Luna 요청(2026-08-20): 스크롤 시 오른쪽(구매 정보)은 고정, 왼쪽(이미지+설명)만 스크롤. 그러려면 설명 탭을 전체폭 하단이 아니라 왼쪽 칸 안에 이미지 밑으로 쌓아야 해서, 갤러리=1열/1행, summary=2열/1~2행(두 행 전체를 차지), 설명탭=1열/2행으로 명시 배치합니다. summary가 차지하는 셀이 왼쪽(갤러리+설명) 전체 높이만큼 커지므로, 그 안에서 position:sticky가 "왼쪽 콘텐츠를 다 스크롤할 때까지" 자연스럽게 붙어있게 됩니다. */ /* 5:3 비율(nookitokki.co.kr 실측 730px:438px ≈ 1.667:1) — 이미지 비중을 키우고 정보 영역은 좁혀서 벤치마킹 사이트와 같은 균형으로 맞춥니다(2026-08-20). */ .woocommerce div.product { display: grid; grid-template-columns: 5fr 3fr; grid-template-rows: auto auto; gap: 40px; align-items: start; } .woocommerce div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 1; } /* 왼쪽(이미지+설명)은 스크롤, 오른쪽(구매 정보)은 고정 — Luna 요청(2026-08-20). */ .woocommerce div.product .summary { grid-column: 2; grid-row: 1 / 3; /* CSS Grid 기본값(min-width:auto)은 내용물이 트랙 폭보다 넓으면 트랙 자체를 늘려버립니다 — 이게 가로 스크롤과 "우겨넣어진" 느낌의 진짜 원인이었습니다. min-width:0으로 그리드 트랙 폭(3fr)을 실제 상한선으로 강제합니다(2026-08-20). */ min-width: 0; /* 우커머스 플러그인 자체 CSS 선택자가 `.woocommerce div.product div.summary`로 div 태그를 하나 더 명시해서 우리 선택자(`.woocommerce div.product .summary`)보다 specificity가 미세하게 높습니다 — 로드 순서는 우리 CSS가 나중인데도 그 특이성 차이로 결국 우커머스 쪽 width:48%가 이겨서 실측 214px로 쪼그라들어 있었습니다 (1차 수정에서 !important 없이 덮어썼다가 재확인 후 발견, 2026-08-20). !important로 확실히 이기게 합니다. */ width: 100% !important; float: none !important; position: sticky; top: 104px; align-self: start; } .woocommerce div.product .woocommerce-tabs { grid-column: 1; grid-row: 2; } /* 우커머스 자체 기본 CSS가 갤러리 컨테이너에 float:left + 좁은 % 폭을 주고 있어서, img에만 width:100%를 줘도 "좁은 부모의 100%"라 여전히 작게 보였습니다. 컨테이너 자체를 그리드 칸 전체 폭으로 강제합니다(2026-08-20). */ .woocommerce div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; border: 1px solid var(--ll-line); border-radius: var(--ll-radius); overflow: hidden; background: var(--ll-card); } /* 썸네일이 실제 이미지 크기와 무관하게 항상 갤러리 폭을 꽉 채우도록 정사각 비율로 고정합니다. 이전엔 width 지정이 없어서 원본(300x300) 크기 그대로 작게 표시됐습니다(2026-08-20). */ .woocommerce div.product .woocommerce-product-gallery img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* 제목은 짧은 상품명이 불필요하게 줄바꿈되지 않도록 40px→30px로 낮춥니다. 그래도 긴 상품명은 자연스럽게 줄바꿈됩니다(2026-08-20). */ .woocommerce div.product .summary h1.product_title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 14px; line-height: 1.25; } /* 장바구니 버튼 아래 "카테고리: Uncategorized" 메타 정보는 노출하지 않습니다(Luna 요청 2026-08-20). */ .woocommerce div.product .product_meta { display: none; } /* ── 구매 버튼 하단 — 타임어택 카운트다운 + 배송/교환 신뢰 배지 ─────────── */ /* form.cart가 우커머스 기본 CSS로 flex 컨테이너라서 flex-wrap:wrap !important를 줘도 줄바꿈이 안 됐습니다(원인 미상 — 우커머스 쪽에서 height/align 관련 값을 같이 강제하는 것으로 추정). 아예 flex 자체를 꺼서 수량+버튼은 인라인 요소 특성으로 나란히, 그 아래는 항상 블록으로 새 줄에 앉게 만듭니다(2026-08-20). */ .woocommerce div.product form.cart { display: block !important; } .woocommerce div.product form.cart .quantity { display: inline-flex; vertical-align: middle; margin-right: 8px; } .woocommerce div.product form.cart .single_add_to_cart_button { vertical-align: middle; } /* Luna 피드백(2026-08-20, 3차): 장바구니 버튼과 타임어택 카드가 여백 없이 딱 붙어 보임. margin-top:28px를 줬는데도 실측 결과 버튼-promo 간 간격이 정확히 0px였던 진짜 원인: .single_add_to_cart_button이 우커머스 기본값으로 float:left인 채로 남아있었음(우리가 display만 flex로 덮어씀) — clear:both가 이 float를 정리하려고 있던 건데, float를 낀 clearance 계산 과정에서 margin-top이 무시되고 0으로 렌더링된 것으로 실측 확인. clear:both는 유지하되 (제거했더니 promo가 버튼과 겹쳐버림 — 재확인 완료), margin 대신 clearance 계산에 영향받지 않는 padding-top으로 간격을 확보합니다. */ .woocommerce div.product .ll-product-promo { display: block; clear: both; width: 100%; padding-top: 28px; } /* 타임어택 재설계(2026-08-20, 4차): Luna 피드백 — ① "할인 종료까지" 라벨을 박스 안이 아니라 위쪽 테두리에 절반 걸치게(태그/리본처럼), ② 박스 자체는 더 작게, ③ 숫자 표시는 박스를 채우도록 훨씬 크게, ④ 숫자마다 있던 개별 배경 박스(칩)는 제거하고 큰 텍스트로 통일. 라벨은 위아래로 살짝 떠다니는 애니메이션 유지 (prefers-reduced-motion에서는 비활성). */ .woocommerce div.product .ll-product-timer { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: rgba(207, 255, 36, 0.1); border: 1px solid rgba(207, 255, 36, 0.3); border-radius: 10px; padding: 10px 16px 12px; margin-top: 12px; margin-bottom: 12px; } /* 라벨 — 박스 위쪽 테두리에 절반 걸치는 말풍선 태그. left/top 50% + translate(-50%,-50%)로 중앙 위 테두리에 고정하고, 애니메이션은 그 기준 위치에서 세로로만 살짝 흔듭니다. Luna 피드백(2026-08-20, 3차): "말풍선처럼 잘 안 보인다" — 옅은 박스 배경 위에서 꼬리가 흐릿하게 묻혀 보였음. 테두리로 윤곽을 또렷하게 하고, box-shadow 대신 filter:drop-shadow를 써서(의사요소 꼬리까지 포함해 하나의 실루엣으로 그림자가 덮임) 배지+꼬리가 한 덩어리의 말풍선처럼 뚜렷하게 떠 보이게 합니다. */ .woocommerce div.product .ll-product-timer__label { position: absolute; top: 0; left: 50%; display: inline-flex; align-items: center; padding: 5px 14px; background: #cfff24; color: #0c0c0c; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; border-radius: 999px; border: 1.5px solid rgba(12, 12, 12, 0.18); white-space: nowrap; filter: drop-shadow(0 3px 5px rgba(12, 12, 12, 0.22)); animation: ll-timer-float 2.4s ease-in-out infinite; } /* Luna 피드백(2026-08-20, 4차): 꼬리 모양이 이상함 — 원인은 회전 사각형 기법에서 width(14)≠height(9)로 "정사각형"이 아니라 직사각형을 45도 돌려서 마름모가 비대칭으로 찌그러져 보였던 것. width=height로 정사각형을 만들어야 대칭 삼각형 포인터가 나옵니다. */ .woocommerce div.product .ll-product-timer__label::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #cfff24; border-right: 1.5px solid rgba(12, 12, 12, 0.18); border-bottom: 1.5px solid rgba(12, 12, 12, 0.18); transform: translateX(-50%) rotate(45deg); border-radius: 0 0 2px 0; } @keyframes ll-timer-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 5px)); } } @media (prefers-reduced-motion: reduce) { .woocommerce div.product .ll-product-timer__label { animation: none; transform: translate(-50%, -50%); } } .woocommerce div.product .ll-product-timer__nums { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 10px; margin-top: 10px; } .woocommerce div.product .ll-product-timer__nums span { display: inline-flex; align-items: baseline; gap: 2px; } .woocommerce div.product .ll-product-timer__nums strong { font-size: 26px; font-weight: 800; color: #0a5a30; font-variant-numeric: tabular-nums; line-height: 1; } .woocommerce div.product .ll-product-timer__nums small { font-size: 12px; font-weight: 600; color: rgba(10, 90, 48, 0.6); } .woocommerce div.product .ll-product-trust { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .woocommerce div.product .ll-product-trust li { background: var(--ll-card); border-radius: 999px; padding: 8px 14px; font-size: 12px; color: var(--ll-muted); font-weight: 500; } .woocommerce div.product .summary p.price { font-size: 22px; font-weight: 700; margin-bottom: 16px; color: var(--ll-ink); } .woocommerce div.product .summary p.price del { color: var(--ll-muted); font-weight: 400; text-decoration: line-through; opacity: 0.7; margin-right: 8px; } .woocommerce div.product .summary p.price ins { color: var(--ll-ink); text-decoration: none; } /* 할인율 배지 — 가격 표시 UX 개선(Luna 요청 2026-08-20). 몇 % 할인인지 정가/판매가 실측값으로 계산해 표시(꾸며낸 수치 아님, setup.php woocommerce_single_product_summary:11). */ .woocommerce div.product .ll-discount-badge { display: inline-flex; align-items: center; margin: -8px 0 16px; padding: 3px 10px; background: #FEEFF2; color: #DF1C41; font-size: 12px; font-weight: 700; border-radius: 999px; } .woocommerce div.product .summary .woocommerce-product-details__short-description { color: var(--ll-muted); line-height: 1.7; margin-bottom: 16px; } /* ── 배송비 안내 행 (가격 바로 아래, nookitokki.co.kr 벤치마킹) ──────────── */ /* Luna 피드백(2026-08-20): 28px 여백이 과해서 콘텐츠 전체 높이가 뷰포트를 넘어 하단 배너에 가려지는 원인 중 하나였습니다. 16px로 통일해 조밀하고 정돈된 느낌으로. */ .woocommerce div.product .ll-shipping-row { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--ll-line); border-bottom: 1px solid var(--ll-line); margin-bottom: 16px; font-size: 14px; } .woocommerce div.product .ll-shipping-row__label { color: var(--ll-muted); } .woocommerce div.product .ll-shipping-row__value { font-weight: 600; } /* ── 주문 요약 박스 — 상품명+수량+단가 한 줄, 총 상품 금액 실시간 계산 ──────── */ .woocommerce div.product .ll-order-summary { background: var(--ll-card); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; } /* 상품명+수량+단가를 억지로 한 줄에 밀어넣으면(3fr 좁은 칼럼) 폭이 모자라 grid 트랙 자체가 늘어나 가로 스크롤이 생겼습니다. 상품명은 항상 자기 줄, 수량+단가만 그 아래 한 줄로 — 화면 크기와 무관하게 절대 넘치지 않는 구조로 바꿉니다(2026-08-20). */ .woocommerce div.product .ll-order-summary__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 14px; } .woocommerce div.product .ll-order-summary__name { flex-basis: 100%; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.4; } .woocommerce div.product .ll-order-summary__row .quantity { flex: 0 0 auto !important; margin: 0 !important; } /* 수량 옆 단가 표시 — "개당" 라벨을 작게 위/앞에, 가격은 명확하게 굵게(2026-08-20 UX 개선). */ .woocommerce div.product .ll-order-summary__unit-price { display: inline-flex; align-items: baseline; gap: 4px; flex: 0 0 auto; margin-left: auto; font-size: 15px; font-weight: 700; color: var(--ll-ink); white-space: nowrap; } .woocommerce div.product .ll-order-summary__unit-label { font-size: 12px; font-weight: 500; color: var(--ll-muted); } .woocommerce div.product .ll-order-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--ll-line); font-size: 13px; color: var(--ll-muted); } .woocommerce div.product .ll-order-summary__total strong { font-size: 18px; font-weight: 800; color: var(--ll-ink); } /* 구매 버튼 — 전체 폭 (nookitokki.co.kr 벤치마킹, 기존 인라인 pill 대신). 우커머스 기본 CSS가 이 버튼에 float:left를 걸어둔 채였음(2026-08-20 실측 확인 — display만 덮어써서 float는 그대로 살아있었고, 그 아래 .ll-product-promo의 clear:both가 float 정리 과정에서 margin-top을 무력화시키는 원인이 됨). float:none으로 명시적으로 지워서 근본적으로 정리합니다. */ .woocommerce div.product .single_add_to_cart_button { display: flex !important; float: none !important; width: 100%; min-height: 52px !important; } /* ── 구매요청하기 (Luna 요청 2026-08-21 — PG 연동 전 수동 결제링크 안내 흐름) ── 장바구니 버튼과 나란히 절반씩 나눠 갖도록, 위 100% 폭 규칙을 이 안에서만 덮어씁니다(선택자 자체가 더 구체적이라 !important 없이도 이깁니다). */ .woocommerce div.product .ll-buy-actions { display: flex; gap: 10px; } /* Luna 피드백(2026-08-21) — "구매요청하기가 전환을 더 유도해야 하니 색을 서로 바꾸자": 장바구니는 보조(아웃라인)로, 구매요청하기는 주요(다크 채움) 버튼으로 교체합니다. 장바구니 버튼은 이 컨텍스트(.ll-buy-actions 안)에서만 아웃라인으로 바뀌고, 다른 화면(장바구니 페이지 등)의 기본 다크 채움 스타일은 그대로 유지됩니다. */ .woocommerce div.product .ll-buy-actions .single_add_to_cart_button { width: auto; flex: 1; background: #fff !important; color: var(--ll-dark, #171c1d) !important; border: 1px solid var(--ll-dark, #171c1d) !important; } .woocommerce div.product .ll-buy-actions .single_add_to_cart_button:hover { background: var(--ll-dark, #171c1d) !important; color: #fff !important; } .woocommerce div.product .ll-purchase-request-btn { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border: 1px solid var(--ll-dark, #171c1d); border-radius: 999px; background: var(--ll-dark, #171c1d); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 180ms ease, color 180ms ease; } .woocommerce div.product .ll-purchase-request-btn:hover { background: var(--ll-lime, #cfff24); color: var(--ll-dark, #171c1d); border-color: var(--ll-lime, #cfff24); } .woocommerce div.product .ll-purchase-request-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ll-muted); text-align: center; } /* ── 구매요청 모달 — 독립된 전체 화면 오버레이(기존 문의 모달과 별개, 위 주석 참고) ── */ .ll-purchase-request-modal { position: fixed; inset: 0; z-index: 9995; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 12, 12, 0.48); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms ease, visibility 0s linear 260ms; } .ll-purchase-request-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 260ms ease, visibility 0s; } .ll-purchase-request-panel { position: relative; max-width: 420px; width: min(92vw, 420px); max-height: 90vh; overflow-y: auto; padding: 32px; background: #fff; border-radius: 20px; transform: translateY(16px) scale(0.98); opacity: 0; transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease; box-sizing: border-box; } .ll-purchase-request-modal.is-open .ll-purchase-request-panel { transform: translateY(0) scale(1); opacity: 1; } .ll-purchase-request-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 34px; height: 34px; border: none; border-radius: 999px; background: var(--ll-card); color: var(--ll-ink); font-size: 20px; line-height: 1; cursor: pointer; } .ll-purchase-request-panel__title { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: var(--ll-ink); } .ll-purchase-request-panel__desc { margin: 0 0 24px; font-size: 13.5px; line-height: 1.6; color: var(--ll-muted); } .ll-purchase-request-field { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--ll-ink); } .ll-purchase-request-field span { display: block; margin-bottom: 6px; } .ll-purchase-request-field input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--ll-line); border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 400; color: var(--ll-ink); box-sizing: border-box; } .ll-purchase-request-field input:focus { outline: none; border-color: var(--ll-dark, #171c1d); } .ll-purchase-request-form__error { margin: 0 0 14px; padding: 10px 14px; background: #FEEFF2; color: #DF1C41; font-size: 13px; border-radius: 10px; } .ll-purchase-request-submit { width: 100%; min-height: 50px; border: none; border-radius: 999px; background: var(--ll-dark, #171c1d); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 6px; } .ll-purchase-request-submit:disabled { opacity: 0.6; cursor: not-allowed; } .ll-purchase-request-success p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: var(--ll-ink); } @media (max-width: 560px) { .woocommerce div.product .ll-buy-actions { flex-direction: column; } } /* ── 상품 설명 탭 — grid-column/row는 위쪽 .woocommerce div.product 블록에서 이미 지정 ── */ .woocommerce div.product .woocommerce-tabs { margin-top: 24px; } .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 4px; list-style: none; margin: 0 0 -1px; padding: 0; border-bottom: 1px solid var(--ll-line); } .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: inline-block; padding: 12px 20px; color: var(--ll-muted); font-weight: 600; font-size: 14px; text-decoration: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ll-ink); border-bottom: 2px solid var(--ll-dark); } .woocommerce div.product .woocommerce-tabs .panel { padding: 28px 0; line-height: 1.7; } .woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 18px; margin: 0 0 12px; } /* ── 장바구니 / 체크아웃 ───────────────────────────────────────────── */ .woocommerce table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--ll-line); border-radius: var(--ll-radius); overflow: hidden; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 16px; border-bottom: 1px solid var(--ll-line); text-align: left; } .woocommerce #payment { background: var(--ll-card); border-radius: var(--ll-radius); padding: 24px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: 1px solid var(--ll-line); border-radius: 10px; padding: 12px 14px; width: 100%; font-family: inherit; } /* 결제요청(결제선생) 안내문 — 계좌이체 게이트웨이를 재활용하는 결제수단 설명 */ .woocommerce ul.payment_methods li label { font-weight: 600; } .woocommerce ul.payment_methods .payment_box { background: var(--ll-card); border-radius: 12px; color: var(--ll-muted); line-height: 1.7; } /* ── 장바구니 요약(합계) 박스 ─────────────────────────────────────── */ .woocommerce .cart-collaterals .cart_totals { background: var(--ll-card); border-radius: var(--ll-radius); padding: 24px; max-width: 420px; margin-left: auto; } .woocommerce .cart-collaterals .cart_totals table { width: 100%; border: none; } .woocommerce .cart-collaterals .cart_totals table th, .woocommerce .cart-collaterals .cart_totals table td { border-bottom: 1px solid var(--ll-line); padding: 12px 0; } .woocommerce .cart-collaterals .cart_totals .order-total td { font-weight: 700; font-size: 17px; border-bottom: none; } .woocommerce .cart-collaterals .wc-proceed-to-checkout .button { width: 100%; } /* ── 체크아웃 — 좌측 입력폼 / 우측 주문요약 2열 ──────────────────────── */ .woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 32px; } .woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; } .woocommerce-checkout #order_review { background: var(--ll-card); border-radius: var(--ll-radius); padding: 24px; } .woocommerce-checkout #order_review table.shop_table { border: none; } /* ── 마이페이지(My account) ──────────────────────────────────────── */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 12px 16px; border-radius: 12px; color: var(--ll-muted); font-weight: 500; } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--ll-card); color: var(--ll-ink); font-weight: 700; } .woocommerce-account .woocommerce-MyAccount-content { margin-top: 32px; } @media (min-width: 900px) { .woocommerce-account .woocommerce { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; } .woocommerce-account .woocommerce-MyAccount-content { margin-top: 0; } } .woocommerce-form-login, .woocommerce-form-register { max-width: 420px; } /* ── 모바일 ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; } /* 모바일은 1열 스택이라 sticky/grid-row 지정이 의미가 없고 오히려 순서를 꼬이게 만듭니다 — 갤러리 → 정보 → 설명 순서의 기본 문서 흐름으로 되돌립니다. */ .woocommerce div.product { grid-template-columns: 1fr; } .woocommerce div.product .woocommerce-product-gallery, .woocommerce div.product .summary, .woocommerce div.product .woocommerce-tabs { grid-column: 1; grid-row: auto; position: static; } .woocommerce-checkout form.checkout { grid-template-columns: 1fr; } .woocommerce .cart-collaterals .cart_totals { max-width: none; } } @media (max-width: 560px) { .woocommerce ul.products { grid-template-columns: 1fr; } } /* ── 장바구니 상품 행 — 좁은 화면에서 가격/할인배지 열이 옆으로 삐져나가 잘려 보이는 문제 (2026-08-22, Luna 재지적 — "가격부분 여전히 잘려보여"). 우커머스 Cart 블록이 .wc-block-cart-items__row에 grid-template-columns를 콘텐츠 실제 폭(예: "₩20,000 저장하기" 배지 너비) 기준으로 픽셀 고정값을 계산해 적용하는데, 그 합이 부모 폭보다 살짝 커서(390px 뷰포트 실측: 367.68px vs 부모 366px) 4열이 부모를 뚫고 나가고, body의 overflow-x:clip(가로 스크롤 방지용, mobile.css 참고)에 의해 오른쪽 끝이 그대로 잘려 보였습니다. Playwright로 실측 확인 후 확정 — 마지막 열을 auto로, 가운데 상품명 열을 minmax(0,1fr)로 바꿔 부모 폭(100%)을 넘지 않게 강제합니다. */ @media (max-width: 560px) { .wc-block-cart-items__row { grid-template-columns: 64px minmax(0, 1fr) auto !important; width: 100% !important; } .wc-block-cart-item__image, .wc-block-cart-item__product, .wc-block-cart-item__total { min-width: 0 !important; } } /* ── 장바구니/체크아웃/주문조회 — 모바일 하단 여백 부족으로 반투명 고정 헤더에 콘텐츠가 가려지는 문제 (2026-08-22, Luna 지적 — "장바구니페이지나 결제 페이지등 모바일에서 잘려보이는 문제"). 우커머스 Cart/Checkout 블록은 div.woocommerce 래퍼로 감싸지지 않아(실측 확인) 위 720px 규칙(1245번 줄)이 적용되지 않고, 콘텐츠가 짧은 페이지(상품 1개)에서는 최대 스크롤까지 내려도 "쿠폰 추가"/"예상 합계" 행이 상단 고정 헤더(반투명 블러, 60px + 공지바 36px)의 커버 범위 안에 걸려 텍스트가 뭉개져 보였습니다. 최대 스크롤 지점에서 실제 콘텐츠가 헤더 범위를 완전히 벗어나도록 하단에 여유 공간을 추가합니다. */ @media (max-width: 900px) { .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { margin-bottom: 220px; } .ll-order-lookup { padding-bottom: 220px; } } /* 모바일 전용 플로팅 배너(.ll-renewal-pill, bottom:14px + min-height:72px)가 화면 하단에 항상 고정으로 떠 있어서, 콘텐츠가 짧은 페이지(상품 1~2개)에서는 장바구니 버튼이 스크롤로도 피할 수 없이 배너 밑에 완전히 가려지는 문제가 있었습니다. 우커머스 콘텐츠 하단에 배너 높이(14+72=86px)보다 넉넉한 여백을 줘서 항상 버튼까지 스크롤해 볼 수 있게 만듭니다. 상단 패딩도 데스크톱 기준 180px가 모바일에선 과해서 첫 화면(스크롤 0)에서부터 버튼이 배너 영역까지 밀려 내려가 있었습니다 — 모바일 헤더가 더 낮은 만큼 줄여서 카드가 첫 화면 안에 최대한 들어오게 합니다(2026-08-20). */ @media (max-width: 720px) { div.woocommerce { padding-top: 120px; padding-bottom: 140px; } .woocommerce-breadcrumb { margin-bottom: 12px; } .woocommerce h1.page-title { margin-bottom: 16px; } /* 상품 상세: 이미지+큰 제목(40px)이 세로로 쌓이면서 장바구니 버튼이 배너 영역까지 밀리는 문제 보완 — 제목을 줄이고 여백을 압축해 첫 화면에 버튼이 들어오게 합니다. */ .woocommerce div.product .summary h1.product_title { font-size: 26px; margin-bottom: 8px; } .woocommerce div.product .summary p.price { font-size: 18px; margin-bottom: 12px; } .woocommerce div.product .summary .woocommerce-product-details__short-description { margin-bottom: 14px; } /* 모바일도 데스크톱과 동일하게 1:1 정사각 비율로 통일합니다. 예전엔 max-height(뷰포트 비율)로 높이를 눌러서 비율이 이미지마다 들쭉날쭉했습니다(2026-08-20). */ .woocommerce div.product .woocommerce-product-gallery img { aspect-ratio: 1 / 1; object-fit: cover; max-height: none; margin: 0; } /* ll-order-summary__row/__name의 wrap 처리는 이제 기본 규칙에서 화면 크기와 무관하게 항상 적용됩니다 — 모바일 전용 중복 규칙 제거(2026-08-20). */ .woocommerce div.product .ll-order-summary__total { flex-wrap: wrap; gap: 4px; } } /* 우커머스 기본 CSS가 예전 float 그리드용으로 ul.products에 clearfix 의사요소(::before/::after)를 붙이는데, CSS Grid 스펙상 content가 있는 ::before/::after는 실제 그리드 아이템으로 취급되어 빈 칸을 하나씩 차지합니다. 그 결과 진짜 상품이 2번째 칸으로 밀려나는 문제가 있었습니다. grid로 바꾼 이상 float clearing이 필요 없으므로 완전히 꺼줍니다(2026-08-20).*/ .woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; } /* ── Shop 히어로 — 메인페이지 "Valuable Pricing" 섹션과 같은 톤앤매너 (Luna 요청 2026-08-20: front-page.php .ll-section-title / .ll-pricing 참고). eyebrow(소문자 라벨) + 이탤릭 세리프(em)·볼드 산세리프 혼합 제목 + 회색 부제. 세로 폭 재조정(2026-08-20, 2차): 실측 결과 포트폴리오 히어로(213px)보다 훨씬 컸음(345px) — 패딩 하단 56→28px, 제목 크기·줄간격을 축소해 포트폴리오/블로그 히어로와 비슷한 세로 폭으로 맞춥니다. */ .ll-shop-hero { /* Luna 요청(2026-08-20): 히어로 위아래 여백 50px씩 추가 — 기존 clamp 반응형 패딩 값에 50px를 그대로 더해 화면 크기별 비율은 유지합니다. */ background: var(--ll-card, #F4F4F5); border-bottom: 1px solid var(--ll-line, #E8E8E8); padding: calc(clamp(120px, 10vw, 154px) + 50px) 0 calc(28px + 50px); } .ll-shop-hero__inner { max-width: 680px; margin: 0 auto; text-align: center; } /* main.css:997-1004 .ll-section-title p와 동일한 톤 */ .ll-shop-hero__eyebrow { margin: 0 0 10px; color: var(--ll-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } /* main.css:865-874 h2(볼드 산세리프) 비율을 히어로 크기에 맞게 축소 적용 */ .ll-shop-hero__title { margin: 0; font-size: clamp(30px, 4.2vw, 48px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; } /* main.css:394-400 .ll-section-title h2 em과 동일한 이탤릭 세리프 악센트 */ .ll-shop-hero__title em { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; } /* main.css:876-884 .ll-section-title span과 동일한 부제 톤 */ .ll-shop-hero__desc { display: block; max-width: 480px; margin: 12px auto 0; color: var(--ll-muted); font-size: 15px; } /* 히어로가 이미 헤더 여유 공간을 확보하므로, 뒤이어 오는 콘텐츠 래퍼의 상단 패딩을 줄입니다. */ body.woocommerce-shop div.woocommerce { padding-top: 44px; } @media (max-width: 720px) { /* Luna 피드백(2026-08-20, 2차): PC용 +50px를 모바일에도 그대로 더했더니 화면이 작아 상대적으로 여백이 과했음 — 모바일은 원래 값으로 되돌립니다. */ .ll-shop-hero { padding: clamp(110px, 26vw, 134px) 0 28px; } .ll-shop-hero__title { font-size: 26px; } body.woocommerce-shop div.woocommerce { padding-top: 28px; } } /* ── 상품 상세 — 스크롤 시 나타나는 하단 고정 구매바 (nookitokki.co.kr 벤치마킹) ── Luna 피드백(2026-08-20) "조악하다" 반영 — 갑자기 나타나는 display:none 전환 대신 슬라이드업+페이드 애니메이션, 헤더와 같은 글라스 블러 배경, 큰 썸네일, 명확한 타이포 위계(라벨/가격 분리)로 다시 다듬습니다. JS도 hidden 속성 대신 is-visible 클래스로 전환. */ .ll-sticky-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 960; display: flex; align-items: center; gap: 16px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-top: 1px solid var(--ll-line); box-shadow: 0 -16px 40px rgba(32, 37, 39, 0.12); padding: 14px max(20px, calc((100vw - var(--ll-container)) / 2 + 20px)); transform: translateY(100%); opacity: 0; visibility: hidden; transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease, visibility 0s linear 360ms; } .ll-sticky-buybar.is-visible { transform: translateY(0); opacity: 1; visibility: visible; transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease, visibility 0s; } .ll-sticky-buybar__media { flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--ll-card); border: 1px solid var(--ll-line); } .ll-sticky-buybar__media img { width: 100%; height: 100%; object-fit: cover; } .ll-sticky-buybar__info { flex: 1; min-width: 0; } .ll-sticky-buybar__title { margin: 0 0 3px; font-size: 12px; font-weight: 500; color: var(--ll-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ll-sticky-buybar__price { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--ll-ink); } .ll-sticky-buybar__price del { color: var(--ll-muted); font-weight: 400; font-size: 13px; margin-right: 6px; } .ll-sticky-buybar__cta { flex-shrink: 0; min-height: 46px !important; padding: 0 28px !important; } @media (max-width: 560px) { .ll-sticky-buybar { gap: 12px; padding: 12px 16px; } .ll-sticky-buybar__media { width: 46px; height: 46px; } .ll-sticky-buybar__price { font-size: 15px; } .ll-sticky-buybar__cta { min-height: 42px !important; padding: 0 20px !important; } } /* 구매바-푸터 빅로고 겹침(Luna 실측 확인, 2026-08-20)은 CSS padding-bottom으로 시도했으나 .ll-footer padding-bottom을 건드리는 기존 !important 규칙이 main.css/mobile.css에 10개 넘게 누적돼 있어 두 번 다 밀려서 신뢰할 수 없었습니다 (실측 2회 확인). woocommerce-product.js에서 IntersectionObserver로 푸터 노출 여부를 감지해 구매바를 아예 숨기는 방식으로 대체했습니다 — 여기엔 더 이상 대응하는 CSS가 없습니다. */ /* 사이트 전체 플로팅 배너(.ll-renewal-pill, bottom 고정)는 위치가 화면 하단에 고정이라, 상품 상세 페이지에서 스크롤 위치·뷰포트 크기와 무관하게 주문요약 박스·장바구니 버튼과 계속 겹칠 수밖에 없는 구조입니다(2026-08-20 실측 확인). 이미 전용 구매바 (.ll-sticky-buybar)가 같은 역할을 하므로 처음부터 끝까지 숨깁니다. */ body.single-product .ll-renewal-pill { display: none !important; } /* 빠른메뉴 FAB(.ll-social-fab, 카카오톡·인스타그램·맨위로)는 기본 위치(bottom:104px 고정)로는 주문요약/장바구니와 겹쳐서 평소엔 숨겨두되(2026-08-20, 3차 — Luna 요청), 구매바가 뜬 동안에는 JS(woocommerce-product.js)가 이 노드를 구매바 안으로 옮겨 넣습니다 — 그 상태의 스타일만 여기서 정의합니다. */ body.single-product:not(.ll-buybar-visible) .ll-social-fab { display: none !important; } /* !important 필수 — main.css:17014-17016 @media(min-width:901px)에 .ll-social-fab.is-shown { bottom:31px !important; }가 있어서, !important 없이는 specificity가 더 높아도(0,2,0 vs 0,1,0) 밀려서 FAB가 구매바 밖으로 붕 뜨는 정렬 오류가 있었습니다(2026-08-20 실측 확인, computed top:-31px). */ .ll-sticky-buybar .ll-social-fab { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; flex-shrink: 0; z-index: auto; } .ll-sticky-buybar .ll-social-fab__main { width: 44px; height: 44px; } .ll-sticky-buybar .ll-social-fab__items { bottom: 56px; } /* ── 장바구니/체크아웃 블록(우커머스 Cart/Checkout 블록 — React 렌더링) 브랜드 톤 맞춤 (Luna 요청 2026-08-21, Phase A). 기본은 우커머스 블록 자체 스타일을 그대로 쓰되, 버튼/포커스 색만 사이트 톤(다크 채움 + 라임 호버)에 맞춥니다. */ .wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button { border-radius: 999px !important; background: var(--ll-dark, #171c1d) !important; color: #fff !important; font-weight: 700 !important; transition: background 180ms ease, color 180ms ease !important; } .wc-block-components-checkout-place-order-button:hover, .wc-block-cart__submit-button:hover { background: var(--ll-lime, #d7ff2f) !important; color: var(--ll-dark, #171c1d) !important; } .wc-block-components-text-input input:focus, .wc-block-components-text-input textarea:focus { border-color: var(--ll-dark, #171c1d) !important; box-shadow: none !important; } .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__input:checked, .wc-block-components-radio-control__input:checked { border-color: var(--ll-dark, #171c1d) !important; } .wc-block-components-radio-control__input:checked + svg, .wc-block-components-radio-control__input:checked ~ * { color: var(--ll-dark, #171c1d); } /* ── 체크아웃 진입 차단 안내 배너 (inc/checkout-gate.php 짝, 2026-08-21) ── */ .ll-cart-blocked-notice { max-width: var(--ll-container, 1200px); margin: 24px auto 0; padding: 14px 20px; border: 1px solid var(--ll-line, rgba(23, 28, 29, 0.15)); border-left: 3px solid var(--ll-dark, #171c1d); border-radius: 10px; background: var(--ll-card, #f4f4f1); } .ll-cart-blocked-notice p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ll-ink, #171c1d); } /* ── 비회원 주문조회 (Luna 요청 2026-08-21 — 회원가입 없이 주문 상태 확인) ── */ .ll-order-lookup { max-width: 480px; margin: 0 auto; padding: 48px 0 96px; } /* Luna 지적(2026-08-22) — "PC버전에서 주문조회 타이틀 텍스트가 어색하게 왼쪽 정렬" → 이후 "모바일에서도 가운데 정렬로" 추가 요청. 페이지 제목(

)은 page.php 공용 템플릿이 출력해서 .ll-order-lookup 래퍼 바깥에 있습니다 — body.page-order-lookup(이 페이지 전용 클래스)로 범위를 좁혀 이 페이지의 제목만 가운데로 맞추고, 아래 폼 너비(480px)와 같은 폭으로 맞춰 시각적으로도 한 컬럼처럼 보이게 합니다. 모바일·데스크톱 모두 적용(장바구니와 달리 PC도 함께 가운데 정렬을 요청하셨음). / body.page-order-lookup .ll-pagecontent h1 { max-width: 480px; margin: 0 auto; text-align: center; } / 장바구니 타이틀 — 모바일에서만 가운데 정렬(2026-08-22, Luna 요청 — "장바구니는 PC 버전은 지금 그대로 두면돼"). 우커머스가 자동으로 붙이는 body.woocommerce-cart 클래스를 그대로 사용합니다. / @media (max-width: 900px) { body.woocommerce-cart .ll-pagecontent h1 { text-align: center; } } / 상단 헤더-타이틀 간격 보정(2026-08-22, Luna 지적 — "상단 헤더랑 타이틀 텍스트랑 너무 가까워"). .ll-page의 기본 padding-top(140px)이 고정 헤더 총 높이(공지 배너+헤더, 실측 약 96~115px) 대비 여유가 25~45px밖에 안 되어 답답해 보였습니다. 다른 일반 페이지는 지적이 없어 전역(.ll-page) 값은 그대로 두고, 이 두 페이지 제목에만 여백을 추가합니다. */ body.page-order-lookup .ll-pagecontent h1, body.woocommerce-cart .ll-pagecontent h1 { margin-top: 28px; } .ll-order-lookupform { display: flex; flex-direction: column; gap: 16px; } .ll-order-lookupfield { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ll-muted, #707777); } .ll-order-lookupfield input { height: 48px; padding: 0 16px; border: 1px solid var(--ll-line, rgba(23, 28, 29, 0.16)); border-radius: 10px; font-size: 15px; color: var(--ll-ink, #171c1d); background: #fff; } .ll-order-lookupfield input:focus { outline: none; border-color: var(--ll-dark, #171c1d); } .ll-order-lookuperror { margin: 0; font-size: 13px; color: #c0392b; } .ll-order-lookupsubmit { height: 52px; border: none; border-radius: 999px; background: var(--ll-dark, #171c1d); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 180ms ease, color 180ms ease; } .ll-order-lookupsubmit:hover { background: var(--ll-lime, #d7ff2f); color: var(--ll-dark, #171c1d); } .ll-order-lookuphint { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ll-muted, #707777); text-align: center; } .ll-order-lookupresult { margin-top: 32px; padding: 24px; border: 1px solid var(--ll-line, rgba(23, 28, 29, 0.12)); border-radius: 14px; background: var(--ll-card, #f4f4f1); } .ll-order-lookupresult-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .ll-order-lookupstatus { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--ll-dark, #171c1d); color: #fff; font-size: 12.5px; font-weight: 700; } .ll-order-lookupnumber { font-size: 13px; color: var(--ll-muted, #707777); } .ll-order-lookupnote { margin: 0 0 16px; font-size: 13.5px; color: var(--ll-muted, #707777); line-height: 1.6; } .ll-order-lookupitems { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--ll-line, rgba(23, 28, 29, 0.12)); } .ll-order-lookupitem { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--ll-line, rgba(23, 28, 29, 0.12)); font-size: 14px; color: var(--ll-ink, #171c1d); } .ll-order-lookuptotal { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; font-size: 15px; font-weight: 700; color: var(--ll-ink, #171c1d); } .ll-order-lookup__date { margin: 10px 0 0; font-size: 12px; color: var(--ll-muted, #707777); text-align: right; }