/* 렌탈마켓 상품 목록·상세 전용 */ /* ── 목록 ── */ .pub-root .pd-head{padding-block:var(--s5) var(--s6);} .pub-root .pd-head p{margin-top:var(--s2);} .pub-root .pd-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);} .pub-root .pd-sort{display:flex;gap:var(--s4);overflow-x:auto;scrollbar-width:none;} .pub-root .pd-sort::-webkit-scrollbar{display:none;} .pub-root .pd-sort a{font-size:var(--fs-label);color:var(--pub-ink-3);white-space:nowrap;} .pub-root .pd-sort a[aria-current="true"]{color:var(--pub-ink);font-weight:var(--fw-sb); text-decoration:underline;text-underline-offset:5px;} /* * grid 아이템 기본 min-width 는 auto 라 내용보다 작아지지 않는다. * 그것 없이 1fr 만 주면 카드 안 고정폭이 남아 좁은 화면을 넘는다. * 폴드 접힘(344px)에서 가로 12px, 320px 에서 36px 넘쳤다(실측). */ .pub-root .pd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s8) var(--s3);} @media (min-width:600px){ .pub-root .pd-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s10) var(--s5);} } @media (min-width:1024px){ .pub-root .pd-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s10) var(--s6);} } /* 카드 : 테두리·그림자 없음. 이미지 바탕과 여백만으로 구분한다 */ .pub-root .card{position:relative;display:flex;flex-direction:column;height:100%;min-width:0;} /* * 카드 focus 표시 (PATCH-007 · P1). * * 이전에는 :focus-within 이었다. * 마우스로 카드를 누르면 안쪽 가 포커스를 받고 * 카드 전체에 4px offset 파란 테두리가 남았다. * 클릭한 사람에게는 이미 어디를 눌렀는지 보이므로 알려 줄 필요가 없다. * * :focus-visible 로 바꾼다. * 브라우저가 "키보드로 이동한 경우" 에만 켜 준다. * 마우스·터치에서는 나오지 않는다. * * :has() 를 쓰지 않는다. 구형 브라우저에서 규칙이 통째로 무시돼 * 키보드 사용자가 현재 위치를 잃는다. * 대신 안쪽 링크에 직접 건다. 카드 안에서 포커스를 받는 것은 그 링크뿐이다. * * outline 을 쓴다. border 를 바꾸면 폭이 변해 카드가 밀린다(layout shift). * outline 은 자리를 차지하지 않는다. */ .pub-root .card__name:focus-visible{outline:2px solid var(--pub-accent-brand); outline-offset:2px;border-radius:var(--r1);} .pub-root .card__brand{margin-top:var(--s3);font-size:var(--fs-label);color:var(--pub-ink-3);letter-spacing:var(--tr-1);} .pub-root .card__name{margin-top:2px;font-size:var(--fs-body);font-weight:var(--fw-m);line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .pub-root .card__name a::after{content:"";position:absolute;inset:0;} .pub-root .card__model{margin-top:2px;font-size:var(--fs-caption);color:var(--pub-ink-3);letter-spacing:var(--tr-1);} /* 이름 높이를 예약하는 대신 가격을 바닥으로 민다. 모델명이 상품명 바로 아래 붙으면서도 카드 간 가격 줄은 정렬된다. */ .pub-root .card__price{margin-top:auto;padding-top:var(--s3);} /* 혜택 배지를 썸네일 오버레이로 옮겼다(PATCH-002). 카드 하단 컨테이너는 더 쓰이지 않지만 규칙은 남긴다. 다른 화면이 이 클래스를 쓸 수 있고, 지워서 얻는 것이 없다. */ .pub-root .card__foot{margin-top:var(--s2);} /* ── 카드 기능 라벨 (PATCH-002) ────────────────────────── * 정수 · 온수 · 냉수 · 얼음. * 제품명 아래, 가격 위에 둔다. 이름을 보고 바로 기능을 확인하는 순서다. * * 가운뎃점은 CSS 로 넣는다. 마크업에 넣으면 스크린리더가 읽는다. */ /* * 기능 라벨 pill (PATCH-004 RC2). * * 이전에는 가운뎃점으로 구분한 일반 텍스트였다. * 정수 · 온수 · 냉수 · 얼음 * 제품명 바로 아래라 어디까지가 이름이고 어디부터 기능인지 흐렸다. * * 하나의 박스로 묶는다. 항목별로 pill 을 만들지 않는다. * 4개면 pill 이 4개가 되어 카드가 배지밭이 되고, * 혜택 배지(badge--benefit)와 위계가 다투게 된다. * 기능은 "이 제품이 무엇을 하는가"이지 강조 대상이 아니다. * * 한 줄로 유지한다. 좁은 화면에서 접히면 카드 높이가 들쭉날쭉해진다. * 넘치면 말줄임으로 자른다. 기능 전체는 상세에서 본다. */ .pub-root .card__feats{display:inline-flex;flex-wrap:nowrap;align-items:center; /* 카드가 flex/grid 컨테이너라 inline-flex 여도 늘어난다. align-self 로 내용 크기에 맞춘다. 폭 전체를 채우면 pill 이 아니라 띠가 된다. */ align-self:flex-start;width:fit-content; max-width:100%;margin:var(--s2) 0 0;padding:3px var(--s2); border-radius:var(--r1);background:var(--pub-bg-3); list-style:none;overflow:hidden;} .pub-root .card__feats li{flex:0 0 auto; font-size:var(--fs-caption);color:var(--pub-ink-3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pub-root .card__feats li + li::before{content:"·";margin:0 4px; color:var(--pub-ink-4);} .pub-root .plines{display:grid;gap:2px;} .pub-root .pline{display:flex;align-items:baseline;justify-content:space-between; gap:var(--s3);min-width:0;flex-wrap:wrap;} .pub-root .pline dt{flex:0 0 auto;font-size:var(--fs-caption);color:var(--pub-ink-3); letter-spacing:var(--tr-1);white-space:nowrap;} .pub-root .pline dd{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--s1);min-width:0;} /* * 좁은 화면에서 라벨과 값이 두 줄이 되면 값도 왼쪽에 맞춘다 (DESIGN-REFINEMENT). * * 한 줄일 때는 라벨 왼쪽 · 값 오른쪽이 읽기 좋다. * 두 줄이 되면 값만 오른쪽에 떠 라벨과 어긋나 보인다. * 폴드 접힘(344px)에서 값 오른쪽에 52px 이 비었다(실측). * * 카드 그리드 안에서만 적용한다. * 상세 요약 패널(.sum)은 폭이 넉넉해 한 줄을 유지한다. */ /* * 자리가 있으면 한 줄, 모자라면 두 줄로 접힌다 (DESIGN-REFINEMENT). * * width:100% 를 주면 폭이 넉넉해도 늘 두 줄이 됐다. * PC 카드에서 "월 렌탈료 / 월 49,900원" 이 세로로 쪼개졌다. * * dd 가 남는 자리를 차지하므로 * 한 줄일 때 값이 오른쪽 끝에 붙는다 * 두 줄일 때 값 줄이 카드 폭을 다 써 라벨과 왼쪽 선이 맞는다 */ .pub-root .pd-grid .pline{gap:0 var(--s2);} .pub-root .pd-grid .pline dd{flex:1 1 auto;} .pub-root .pline--card dt{color:var(--pub-accent);font-weight:var(--fw-sb);} /* ── 상세 : 좌 갤러리 고정 / 우 패널 스크롤 ── */ /* * 1열 구간에서 자식이 부모보다 커지지 않게 한다 (DESIGN-REFINEMENT). * * grid 아이템 기본 min-width 는 auto 라 내용보다 작아지지 않는다. * 390px 화면에서 .dt-hero 는 358px 인데 * .dt-gallery 와 .panel 이 664px 로 잡혀 290px 넘쳤다(실측). * body 의 overflow-x:hidden 이 그것을 감춰 * 화면에서는 오른쪽이 잘려 보였다. * * 안쪽에 고정폭(썸네일 76px × 8, 약정 버튼 min-width 등)이 있어 * 그 합이 자식의 최소 폭이 된다. 그 값을 0 으로 풀어 준다. */ .pub-root .dt-hero{display:grid;gap:var(--s6); grid-template-columns:minmax(0,1fr);} .pub-root .dt-hero > *{min-width:0;} @media (min-width:960px){ .pub-root .dt-hero{grid-template-columns:minmax(0,1fr) var(--detail-panel);gap:var(--s10);align-items:start;} .pub-root .dt-gallery{position:sticky;top:calc(64px + var(--s5));} } .pub-root .dt-gallery__main{position:relative;} /* * 대표 이미지 크기 상한 (DESIGN-REFINEMENT). * * 폭만 보고 정사각형을 만들면 화면이 낮을 때 넘친다. * 1440x760 노트북에서 썸네일이 140px 밖으로 나갔다(실측). * 1280x720 에서는 180px. * 제품을 보러 왔는데 다른 각도 사진이 화면에 없다. * * 화면 높이를 함께 본다. * 헤더 64 + breadcrumb·여백 약 120 + 썸네일 78 + 아래 숨통을 빼면 * 대표 이미지에 쓸 수 있는 높이가 나온다. * 그 값과 폭 중 작은 쪽을 쓴다. * * 이미지가 작아지는 만큼 옆 정보 칸도 함께 올라와 * 가격과 조건이 첫 화면에 들어온다. */ /* * 1열 구간(959px 이하)에서도 대표 이미지를 제한한다. * * 2열이 풀리면서 갤러리가 본문 폭을 다 쓴다. * 959px 화면에서 대표 이미지가 911px 정사각형이 됐다(실측). * 화면 하나를 이미지가 통째로 차지해 가격도 조건도 안 보인다. * * 화면 높이와 폭 중 작은 쪽을 쓴다. * 이 구간은 세로로 쌓이므로 아래 내용을 위해 조금 더 낮춘다. */ @media (max-width:959px){ .pub-root .dt-gallery{--dt-gal-w:min(100%, calc(100vh - 380px), 480px);} .pub-root .dt-gallery__main{max-width:var(--dt-gal-w);} .pub-root .dt-thumbs{max-width:var(--dt-gal-w);} } @media (min-width:1024px){ /* * 왼쪽에 붙인다. * 가운데 두면 이미지 왼쪽 선이 breadcrumb·본문과 어긋난다. * 같은 세로선에서 시작해야 한 덩어리로 읽힌다. * * 썸네일 줄도 같은 폭으로 맞춘다. * 대표 이미지보다 넓으면 아래만 튀어나와 보인다. */ .pub-root .dt-gallery{--dt-gal-w:min(100%, calc(100vh - 340px));} /* * 상자 자체를 줄인다. 안의 .media 만 줄이면 안 된다. * 좌우 화살표(.gal-nav)와 매수 표시(.gal-count)는 * .dt-gallery__main 을 기준으로 붙는 absolute 요소다. * 상자는 그대로 두고 이미지만 줄이면 * 화살표가 이미지 밖 빈 자리에 남는다(실측). */ .pub-root .dt-gallery__main{max-width:var(--dt-gal-w);} .pub-root .dt-thumbs{max-width:var(--dt-gal-w);} } /* 이전 / 다음 */ .pub-root .gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:40px;height:40px;border:0;border-radius:var(--r-pill);cursor:pointer; background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(30,23,35,.14); color:var(--pub-ink);font-size:22px;line-height:1;display:grid;place-items:center;} .pub-root .gal-nav:hover{background:#fff;} .pub-root .gal-nav--prev{left:var(--s3);} .pub-root .gal-nav--next{right:var(--s3);} .pub-root .gal-count{position:absolute;right:var(--s3);bottom:var(--s3);z-index:3; padding:3px 10px;border-radius:var(--r-pill);background:rgba(30,23,35,.7);color:#fff; font-size:var(--fs-caption);letter-spacing:var(--tr-1);} .pub-root .gal-count b{font-weight:var(--fw-b);} /* 썸네일 */ .pub-root .dt-thumbs{display:flex;gap:var(--s2);margin-top:var(--s3);overflow-x:auto; scrollbar-width:none;padding-bottom:2px;} .pub-root .dt-thumbs::-webkit-scrollbar{display:none;} .pub-root .dt-thumb{flex:0 0 76px;width:76px;border:0;padding:0;background:none;cursor:pointer; position:relative;display:block;} .pub-root .dt-thumb .media{box-shadow:inset 0 0 0 1px var(--pub-line);} .pub-root .dt-thumb:hover .media{box-shadow:inset 0 0 0 1px var(--pub-ink-3);} /* 선택된 썸네일은 잉크 2px. 마젠타를 쓰지 않는다(가격·행동 전용) */ /* [RC16 PRE-EXISTING ACCESSIBILITY FIX] 썸네일은 tab 이 아니라 toggle button 이다. aria-pressed 로 상태를 읽는다. 시각 상태(테두리·투명도)와 보조기기 상태가 같은 속성 하나에서 나온다. */ .pub-root .dt-thumb[aria-pressed="true"] .media{box-shadow:inset 0 0 0 2px var(--pub-ink);} .pub-root .dt-thumb[aria-pressed="false"] .media{opacity:.72;} .pub-root .dt-thumb:focus-visible{outline:2px solid var(--pub-accent-brand);outline-offset:2px;border-radius:var(--r1);} /* 조건 패널 */ .pub-root .panel__head{padding-bottom:var(--s4);margin-bottom:var(--s2);border-bottom:1px solid var(--pub-line);} .pub-root .panel__head .card__brand{margin-top:0;} .pub-root .panel__head h1{margin-top:var(--s1);} .pub-root .panel__head .card__model{margin-top:var(--s1);display:block;} .pub-root .opt-row{padding:var(--s4) 0;border-bottom:1px solid var(--pub-line);} .pub-root .opt-row--stack{display:block;} .pub-root .opt-row__head{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s3);} .pub-root .opt-row__label{font-size:var(--fs-label);font-weight:var(--fw-b);letter-spacing:var(--tr-1);} .pub-root .opt-row__val{font-size:var(--fs-label);color:var(--pub-ink-3);} .pub-root .opts{display:flex;flex-wrap:wrap;gap:var(--s2);} /* 좌우 폭을 꽉 채우는 균등 분할 */ .pub-root .opts--fill{flex-wrap:nowrap;gap:var(--s2);} .pub-root .opts--fill .opt{flex:1 1 0;min-width:0;} .pub-root .opts--fill .opt__btn{width:100%;} .pub-root .opt{position:relative;} .pub-root .opt input{position:absolute;opacity:0;width:1px;height:1px;} /* * 옵션 버튼 (PUBLIC-OPTION-URL-BACKNAV-001 · 라벨 줄바꿈). * * 이전에는 height 를 44px 로 고정했다. * "스탠드형 냉온정수기" 처럼 긴 이름이 들어오면 두 줄이 되는데 * 높이가 고정이라 글자가 버튼 밖으로 삐져나갔다. 모바일에서 특히 심했다. * * height:auto + min-height 로 바꾼다. * 한 줄이면 지금과 똑같은 44px 이다. 색상 원(44px)과도 계속 맞는다. * 두 줄이면 버튼이 스스로 늘어난다. * * word-break:keep-all 로 한글을 단어 단위로 끊는다. * 기본값은 글자 아무 데서나 끊어 "스탠드형 냉온정" / "수기" 처럼 나뉜다. * * padding 에 세로값을 준다. auto 높이에서 위아래가 붙지 않게 한다. */ .pub-root .opt__btn{display:inline-flex;align-items:center;justify-content:center;min-width:54px; height:auto;min-height:var(--h-md); padding:6px 12px;cursor:pointer;border-radius:var(--r1); box-shadow:inset 0 0 0 1px var(--pub-line-2); line-height:1.25;word-break:keep-all;text-align:center; font-size:var(--fs-label);font-weight:var(--fw-m);letter-spacing:var(--tr-1);} /* * 같은 줄의 버튼들이 같은 높이가 되게 한다. * 하나만 두 줄이면 나머지는 짧은 채로 남아 아래가 들쭉날쭉해진다. * .opt 는 라벨 wrapper 라 늘어나야 안쪽 버튼도 함께 늘어난다. */ .pub-root .opts{align-items:stretch;} .pub-root .opt{display:flex;} /* 좌표가 하나도 없는 관리방식·약정은 숨긴다 (PUBLIC-EMPTY-AXIS-HIDE-001). 바로 위 display:flex 가 hidden 속성을 이기지 않게 한다. 지우지 않고 숨기므로 조합을 바꾸면 다시 보인다. */ .pub-root .opt[hidden]{display:none;} .pub-root .opt .opt__btn{flex:1;} .pub-root .opt:hover .opt__btn{background:var(--pub-bg-2);} /* 선택은 잉크 채움. 무채색이라 마젠타·바이올렛과 경쟁하지 않는다 */ .pub-root .opt input:checked + .opt__btn{box-shadow:inset 0 0 0 2px var(--pub-ink);font-weight:var(--fw-b);} .pub-root .opt input:disabled + .opt__btn{color:var(--pub-ink-4);background:var(--pub-bg-2); box-shadow:inset 0 0 0 1px var(--pub-line);cursor:not-allowed;text-decoration:line-through;} .pub-root .opt input:focus-visible + .opt__btn{outline:2px solid var(--pub-accent-brand);outline-offset:2px;} /* 요약 — L1 이 사는 곳 */ .pub-root .sum{margin-top:var(--s5);border:1px solid var(--pub-line);border-radius:var(--r2);padding:var(--s5);} .pub-root .sum .pline dt{font-size:var(--fs-label);} .pub-root .sum__meta{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--pub-line); font-size:var(--fs-caption);color:var(--pub-ink-3);letter-spacing:var(--tr-1);} .pub-root .sum__meta span + span{margin-left:var(--s3);} .pub-root .sum__cta{margin-top:var(--s5);display:none;} @media (min-width:960px){ .pub-root .sum__cta{display:block;} } /* 혜택 유의사항 — 상품별 운영자 입력 문구 보조 텍스트다. 카드·배지·마젠타 배경을 쓰지 않는다. white-space:pre-line 이 줄바꿈을 보존한다(nl2br 미사용). */ .pub-root .benefit-note{margin-top:var(--s4);padding-top:var(--s4); border-top:1px solid var(--pub-line);} .pub-root .benefit-note__title{font-size:var(--fs-caption);font-weight:var(--fw-b); color:var(--pub-ink-2);letter-spacing:var(--tr-1);} .pub-root .benefit-note__body{margin-top:var(--s2);font-size:var(--fs-caption); color:var(--pub-ink-3);line-height:1.65;letter-spacing:var(--tr-1); white-space:pre-line;word-break:keep-all;} /* 제휴카드 요약 */ .pub-root .cardlist{margin-top:var(--s5);border:1px solid var(--pub-line);border-radius:var(--r2);overflow:hidden;} .pub-root .cardlist summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between; padding:var(--s4) var(--s5);font-size:var(--fs-label);font-weight:var(--fw-b);letter-spacing:var(--tr-1);} .pub-root .cardlist summary::-webkit-details-marker{display:none;} .pub-root .cardlist summary b{color:var(--pub-accent);} .pub-root .cardlist summary::after{content:"⌄";color:var(--pub-ink-3);} .pub-root .cardlist[open] summary::after{content:"⌃";} .pub-root .cardlist ul{border-top:1px solid var(--pub-line);background:var(--pub-bg-2);} .pub-root .cardlist li{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s5); border-bottom:1px solid var(--pub-line);} .pub-root .cardlist li:last-of-type{border-bottom:0;} .pub-root .cardlist li a,.pub-root .cardlist li > span:first-child{flex:1;min-width:0;} .pub-root .cardlist li a:hover{text-decoration:none;} .pub-root .cardlist li a:hover .cl__name{text-decoration:underline;} .pub-root .cl__name{display:block;font-size:var(--fs-label);letter-spacing:var(--tr-1);} .pub-root .cl__name em{font-style:normal;color:var(--pub-ink-3);} .pub-root .cl__amt{display:block;margin-top:1px;font-size:var(--fs-caption);font-weight:var(--fw-b);color:var(--pub-accent);} .pub-root .cl__go{flex:0 0 auto;font-size:var(--fs-caption);color:var(--pub-ink-3);} .pub-root .cl__go::after{content:"›";margin-left:3px;} .pub-root .cardlist__note{padding:var(--s3) var(--s5);border-top:1px solid var(--pub-line);} /* 전체 조건표 (읽기 전용) */ .pub-root .rates__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;} .pub-root .rates table{width:100%;min-width:600px;font-variant-numeric:tabular-nums;} .pub-root .rates th,.pub-root .rates td{text-align:left;padding:var(--s4) var(--s3); border-bottom:1px solid var(--pub-line);white-space:nowrap;vertical-align:top;} /* * 셀 안쪽 (DESIGN-REFINEMENT). * * 이전에는
로 줄을 나눴다. * 줄 간격이 글자 크기를 따라가 항목마다 달랐고 * 배지에만 인라인 margin 을 줘 규칙이 두 곳에 흩어졌다. * * grid 로 바꾼다. 네 줄이 같은 간격으로 선다. * 값이 없는 줄은 만들지 않으므로 빈 자리가 생기지 않는다. */ .pub-root .rates tbody td > *{display:block;} .pub-root .rates tbody td{line-height:1.45;} .pub-root .rates tbody td .r-card, .pub-root .rates tbody td .r-comp{margin-top:3px;} .pub-root .rates thead th{font-size:var(--fs-caption);font-weight:var(--fw-sb);color:var(--pub-ink-3); border-bottom:1px solid var(--pub-ink);} .pub-root .rates tbody th{font-size:var(--fs-label);font-weight:var(--fw-sb); position:sticky;left:0;background:var(--pub-bg);z-index:1;} .pub-root .rates thead th:first-child{position:sticky;left:0;background:var(--pub-bg);z-index:2;} .pub-root .rates .r-main{font-size:var(--fs-price-sub);font-weight:var(--fw-b);} .pub-root .rates .r-card{font-size:var(--fs-caption);color:var(--pub-accent);font-weight:var(--fw-b);} /* * 타사보상가 (PATCH-007 · P0). * * 가격표 안에서만 쓴다. .rates 아래로 한정한다. * 카드·대표가격 패널에 같은 클래스가 새로 생겨도 여기 스타일이 따라가지 않는다. * * 월 렌탈료(r-main)보다 약하고 제휴카드가(r-card)와도 색을 나눈다. * 셋이 같은 무게면 무엇이 실제 낼 돈인지 알기 어렵다. */ .pub-root .rates .r-comp{display:inline-block; font-size:var(--fs-caption);color:var(--pub-ink-3);white-space:nowrap;} .pub-root .rates .r-none{font-size:var(--fs-label);color:var(--pub-ink-4);} /* * 혜택 배지 (DESIGN-REFINEMENT). * * 가격 아래 한 칸 띄워 붙인다. * 셀 안에서 유일하게 색 면을 가진 요소라 간격이 없으면 숫자와 뭉쳐 보인다. */ /* * 조건표 안 혜택 배지 (DESIGN-REFINEMENT). * * 진한 청록 바탕이 셀마다 반복되니 표가 얼룩덜룩했다. * 가격이 주인공인데 배지가 먼저 눈에 들어왔다. * * 연한 바탕 + 진한 글자로 바꾼다(--pub-benefit-soft / -ink). * 이미 정의된 badge--benefit-soft 와 같은 조합이라 * 새 색을 만들지 않는다. * * 상단 대표가격·상품 카드 배지는 그대로 둔다. * 거기서는 하나만 있어 강조가 필요하다. * * 높이·글자도 한 단계 낮춘다. 표 안에서는 가격 아래 보조 정보다. */ .pub-root .rates .r-bene{ /* * 셀 안 요소를 block 으로 깐 규칙이 배지의 inline-flex 를 덮었다. * 그래서 글자가 상자 위쪽에 붙었다(위 1px · 아래 9px 실측). * 배지만 다시 flex 로 되돌려 세로 가운데에 세운다. */ /* * flex 로 둔다. inline-flex 로 하면 위 줄(타사보상가) 옆에 붙는다. * 셀 안 요소는 각자 한 줄을 쓰는 것이 규칙이다. * width:max-content 라 줄 전체를 차지하지는 않는다. */ display:flex;align-items:center;justify-content:center; width:max-content;margin-top:var(--s2); height:22px;padding:0 8px;line-height:1; background:var(--pub-benefit-grad);color:var(--pub-benefit-grad-ink); font-size:11px;letter-spacing:0; box-shadow:inset 0 0 0 1px var(--pub-benefit-grad-line);} /* 사양 */ .pub-root .spec-g + .spec-g{margin-top:var(--s8);} .pub-root .spec-g__t{padding-bottom:var(--s3);border-bottom:1px solid var(--pub-ink); font-size:var(--fs-label);font-weight:var(--fw-b);letter-spacing:var(--tr-1);} .pub-root .spec-list{display:grid;grid-template-columns:1fr;} @media (min-width:768px){ .pub-root .spec-list{grid-template-columns:1fr 1fr;column-gap:var(--s12);} } .pub-root .spec{display:flex;gap:var(--s4);align-items:baseline;padding:var(--s3) 0; border-bottom:1px solid var(--pub-line);font-size:var(--fs-label);} .pub-root .spec dt{flex:0 0 96px;color:var(--pub-ink-3);} .pub-root .spec dd{flex:1;min-width:0;word-break:keep-all;} .pub-root .spec--off dd{color:var(--pub-ink-3);} /* 부가 이미지 — 원본 비율 유지 */ .pub-root .dt-detail{max-width:var(--content-max);margin:0 auto;} .pub-root .dt-detail__list{display:grid;gap:var(--s3);} /* * legacy 상세 이미지 (DESIGN-REFINEMENT · §4). * * detail_html 본문 이미지와 같은 규칙으로 가운데 둔다. * * width:100% 를 쓰지 않는다. * 원본이 본문보다 작아도 억지로 늘어나 흐릿해진다. * max-width 로 두면 작은 그림은 원본 크기 그대로 가운데 선다. */ .pub-root .dt-detail__list img{display:block;max-width:100%;height:auto; margin-inline:auto;border-radius:var(--r1);} .pub-root .dt-detail__more{margin-top:var(--s4);} .pub-root .dt-detail__more summary{list-style:none;cursor:pointer;} .pub-root .dt-detail__more summary::-webkit-details-marker{display:none;} .pub-root .dt-detail__more[open] summary{display:none;} /* sticky CTA (모바일) */ /* ── 제품 상세 모바일 가격 dock (KAKAO-CTA) ───────────── * 기준선 1024px. 넥센 운영 구조와 같은 선을 쓴다. * * position:fixed 다. sticky 가 아니다. * sticky 는 부모 overflow 나 transform 에 걸리면 조용히 풀린다. * 화면 아래에 반드시 붙어 있어야 하는 요소라 fixed 로 고정한다. * * 공통 하단바(.rm-cbar)를 여기서 끈다. * 두 바가 같이 뜨면 화면 아래가 두 겹으로 막힌다. */ .pub-root .pd-dock{display:none;} /* 여백 규칙은 public-counsel-cta.css 가 갖는다. 공통바 여백과 함께 문서 맨 끝에서 처리해야 푸터가 가리지 않는다. */ .pub-root .pd-dock__space{display:none;} @media (max-width:1023px){ /* 메뉴가 열리면 상세 가격 dock 도 감춘다(위 .rm-cbar 와 같은 이유). */ .pub-root[data-menu-open] .pd-dock, .pub-root[data-sheet-open] .pd-dock{display:none;} .pub-root .pd-dock{display:block; position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky); background:var(--pub-bg); box-shadow:0 -4px 18px rgba(30,23,35,.08); /* 아이폰 홈 인디케이터 영역만큼 여백을 더한다. 없으면 버튼이 화면 맨 끝선에 붙어 누르기 어렵다. */ padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));} .pub-root .pd-dock__price{max-width:520px;margin:0 auto var(--s3);} .pub-root .pd-dock__row{display:flex;align-items:baseline; justify-content:space-between;gap:var(--s3);} .pub-root .pd-dock__row + .pd-dock__row{margin-top:2px;} .pub-root .pd-dock__row[hidden]{display:none;} .pub-root .pd-dock__lb{flex:0 1 auto;min-width:0; font-size:var(--fs-caption);color:var(--pub-ink-3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pub-root .pd-dock__act{display:flex;align-items:stretch;gap:var(--s2); width:100%;max-width:520px;margin:0 auto;} } /* ═══════════════════════════════════════════════════════════════ 상품 옵션 (PRODUCT-OPTION-MATRIX-001) 약정·관리방식과 같은 자리에 같은 모양으로 놓인다. 기존 .opt-row / .opts--fill / .opt 언어를 그대로 쓴다. 여기서 새로 만드는 것은 색상 스와치 하나뿐이다. ═══════════════════════════════════════════════════════════════ */ /* * 색상 스와치. * * 원만 늘어놓고 이름은 라벨 옆에 하나만 둔다. * 원마다 이름을 붙이면 여섯 색이면 세 줄이 된다. * 고른 색의 이름만 알면 되고, 그것이 상담에서 말할 값이다. */ .pub-root .pv-swatches{display:flex;flex-wrap:wrap;gap:var(--s3);} .pub-root .pv-sw{position:relative;display:grid;place-items:center; width:44px;height:44px;cursor:pointer;} .pub-root .pv-sw input{position:absolute;opacity:0;width:1px;height:1px;} .pub-root .pv-sw__c{width:30px;height:30px;border-radius:var(--r-pill); background:var(--sw, var(--pub-bg-3)); box-shadow:inset 0 0 0 1px rgba(23,26,35,.14);} /* * 선택 표시는 잉크색이다. * accent 를 쓰면 흰색·연한 색 스와치 위에서 보이지 않는다. * 기존 칩 선택이 inset 0 0 0 2px var(--pub-ink) 라 같은 언어다. */ .pub-root .pv-sw input:checked ~ .pv-sw__c{ box-shadow:inset 0 0 0 1px rgba(23,26,35,.14), 0 0 0 2px var(--pub-bg), 0 0 0 4px var(--pub-ink);} .pub-root .pv-sw input:focus-visible ~ .pv-sw__c{ box-shadow:inset 0 0 0 1px rgba(23,26,35,.14), 0 0 0 2px var(--pub-bg), 0 0 0 4px var(--pub-accent-brand);} /* * 선택할 수 없는 조합 (D-NEXT-WAVE §15). * * 숨기지 않고 회색으로 남긴다. * 목록에서 사라지면 왜 없어졌는지 알 수 없다. * 남아 있으면 "이 조합은 안 나온다" 는 것이 보인다. */ .pub-root .pv-sw input:disabled{cursor:not-allowed;} .pub-root .pv-sw input:disabled ~ .pv-sw__c{opacity:.35;} /* * 색상칩은 항상 색으로만 표시한다 * (PUBLIC-OPTION-PRESENTATION-UX-001 · 사용자 확정). * * 사진을 원 안에 넣던 이미지 칩 규칙은 제거했다. * 죽은 규칙을 남기지 않는다. 다음에 누가 다시 붙일 여지를 두지 않는다. * * 옵션 사진은 계속 갤러리에서 쓴다. 칩만 색으로 돌아간 것이다. */ /* * 값이 많은 옵션은 목록으로 고른다 (BLOCK-04). * * native