/* ============================================================ ONSUITE — hotel bedding, quietly luxurious Pretendard body · Playfair Display for EN display type square buttons · brown #6B5138 · bronze #A8875A ------------------------------------------------------------ Playfair Display: 섹션 영문 디스플레이/숫자 스트립 전용. HTML 에 아래 링크 필요: ============================================================ */ :root { --ink: #2A2723; --ink-2: #35312B; --ink-3: #46413A; --ink-soft: #5B554C; --gray: #6E675C; --gray-2: #8B8377; --muted: #8B8377; --line: #EAE3D7; --line-soft: #EFE9DD; --bg: #FAF8F3; --wash: #F3EEE4; --img-bg: #F1ECE2; --brown: #6B5138; --brown-deep: #52402C; --bronze: #A8875A; --bronze-deep: #8C6F45; --bronze-soft: #C9B48E; --white: #ffffff; --header-h: 72px; --promo-h: 46px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Pretendard Variable", Pretendard, "NanumBarunGothic", -apple-system, sans-serif; color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.55; letter-spacing: -0.01em; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: 0; background: none; } img { max-width: 100%; display: block; } ul { list-style: none; } .wrap { max-width: 1340px; margin: 0 auto; padding: 0 40px; } /* ---------- promo bar ---------- */ .promo-bar { height: var(--promo-h); background: var(--brown-deep); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; gap: 8px; letter-spacing: .01em; } .promo-bar em { font-style: normal; color: var(--bronze-soft); font-weight: 600; } /* ---------- partner strip (최상단 체인 워드마크) ---------- */ .partner-strip { height: 40px; background: var(--brown-deep); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 30px; overflow: hidden; } .partner-strip .chains { display: flex; align-items: center; gap: 0; overflow: hidden; white-space: nowrap; flex: 0 1 auto; min-width: 0; color: var(--bronze-soft); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; } .partner-strip .chains span { color: var(--bronze-soft); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; flex: 0 0 auto; } .partner-strip .chains span + span::before { content: "\00B7"; margin: 0 14px; color: var(--bronze-soft); opacity: .55; letter-spacing: 0; } .partner-strip .cap { color: #fff; font-size: 11.5px; opacity: .7; letter-spacing: .02em; white-space: nowrap; flex: 0 0 auto; } /* ---------- header ---------- */ .header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .2s; } .header.scrolled { border-bottom-color: var(--line-soft); } .header-in { max-width: 1400px; margin: 0 auto; padding: 0 30px; height: var(--header-h); display: flex; align-items: center; gap: 30px; } .logo { display: flex; align-items: center; gap: 10px; color: var(--brown); flex: 0 0 auto; } .logo svg { display: block; } .logo .word { font-size: 21px; font-weight: 800; letter-spacing: -0.025em; font-family: inherit; } .gnb { display: flex; gap: 8px; margin: 0 auto; } .gnb > li { position: relative; } .gnb > li > a { display: block; padding: 24px 26px; font-size: 17px; font-weight: 600; color: var(--ink); } .gnb > li > a:hover { color: var(--brown); } /* mega menu */ .mega { position: absolute; left: 0; right: 0; top: var(--header-h); background: var(--bg); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); opacity: 0; visibility: hidden; transition: opacity .18s; } .mega.open { opacity: 1; visibility: visible; } .mega-in { max-width: 1400px; margin: 0 auto; padding: 28px 30px 34px; display: flex; gap: 0; } .mega-col { width: 190px; } .mega-col a { display: block; padding: 9px 0; font-size: 15px; color: var(--ink-3); text-align: center; } .mega-col a:hover { color: var(--brown); text-decoration: underline; } .mega-col .dl { color: var(--bronze-deep); font-size: 14px; } .util { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; } .util .txt { font-size: 13px; color: var(--ink-3); } .util .ic { width: 22px; height: 22px; color: var(--ink-2); display: block; } .util a:hover { color: var(--brown); } .cart-badge { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; background: var(--brown); color: #fff; font-size: 10px; font-weight: 700; border-radius: 8px; display: none; align-items: center; justify-content: center; padding: 0 4px; } .cart-rel { position: relative; } /* ---------- hero carousel ---------- */ .hero { position: relative; height: 560px; overflow: hidden; background: var(--wash); } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s; background-size: cover; background-position: center; } .hero-slide.on { opacity: 1; } .hero-copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.28); } .hero-copy .tag { border: 1px solid #fff; border-radius: 999px; padding: 6px 22px; font-size: 14px; font-weight: 500; letter-spacing: .18em; margin-bottom: 18px; background: rgba(255,255,255,.1); backdrop-filter: blur(2px); } .hero-copy h2 { font-size: 44px; font-weight: 600; letter-spacing: -0.01em; } .hero-copy .big { font-size: 18px; font-weight: 500; line-height: 1.5; margin-top: 10px; } .hero-copy .big small { font-size: 15px; font-weight: 400; } .hero-copy .sub { margin-top: 12px; font-size: 18px; font-weight: 400; } .hero-dots { position: absolute; bottom: 24px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; } .hero-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); } .hero-dots button.on { width: 22px; border-radius: 4px; background: #fff; } /* ---------- number strip (트러스트 숫자) ---------- */ .num-strip { padding: 64px 0; } .num-strip .grid { display: grid; grid-template-columns: repeat(4, 1fr); } .num-strip .it { text-align: center; padding: 6px 20px; border-left: 1px solid var(--line-soft); } .num-strip .it:first-child { border-left: 0; } .num-strip .n { font-family: 'Playfair Display', Georgia, serif; font-size: 34px; font-weight: 500; color: var(--brown); line-height: 1.15; } .num-strip .l { margin-top: 8px; font-size: 14px; color: var(--gray); } /* ---------- section base ---------- */ .section { padding: 66px 0; } .sec-head { text-align: center; margin-bottom: 36px; } .sec-head h2 { font-size: 30px; font-weight: 700; color: var(--ink-2); } .sec-head p { margin-top: 10px; font-size: 15px; color: var(--gray); } /* 영문 세리프 디스플레이 타이틀 (영문 위 + 한국어 서브 아래) */ .sec-en { font-family: 'Playfair Display', Georgia, serif; font-size: 36px; letter-spacing: .05em; font-weight: 500; color: var(--ink); text-transform: uppercase; line-height: 1.2; } .sec-head .sec-en { display: block; } .sec-head .sub { margin-top: 12px; font-size: 15px; color: var(--gray); } /* ---------- event cards ---------- */ .event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .event-card .thumb { aspect-ratio: 16 / 9.6; background: var(--img-bg); overflow: hidden; } .event-card .thumb > div { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform .4s; } .event-card:hover .thumb > div { transform: scale(1.04); } .event-card h3 { margin-top: 18px; font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1.4; } .progress-track { margin-top: 44px; height: 3px; background: var(--line-soft); } .progress-track .bar { height: 100%; width: 33%; background: var(--brown-deep); transition: width .3s; } /* ---------- journal / launch ad cards ---------- */ .ad-card { display: block; } .ad-card .thumb { aspect-ratio: 16 / 9; background: var(--img-bg); overflow: hidden; } .ad-card .thumb > div, .ad-card .thumb img { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; transition: transform .4s; } .ad-card:hover .thumb > div, .ad-card:hover .thumb img { transform: scale(1.04); } .ad-card .badge { display: inline-block; margin-top: 16px; padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; } .ad-card .badge.launch { background: var(--brown); color: #fff; } .ad-card .badge.journal { background: transparent; color: var(--ink-2); border: 1px solid var(--line); } .ad-card .badge.gift { background: var(--bronze); color: #fff; } .ad-card .badge.proven { background: transparent; color: var(--bronze-deep); border: 1px solid var(--bronze); } .ad-card .badge.campaign { background: var(--wash); color: var(--brown); border: 1px solid var(--line); } .ad-card h3 { margin-top: 10px; font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.4; } .ad-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; } .ad-card .sub { margin-top: 6px; font-size: 14px; color: var(--gray); } .ad-card .period { margin-top: 8px; font-size: 13px; color: var(--muted); } /* adCard() 마크업 (.ph / .ad-badge / .ad-body) 지원 */ .ad-card .ph { position: relative; aspect-ratio: 16 / 9; background: var(--img-bg); overflow: hidden; } .ad-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .ad-card:hover .ph img { transform: scale(1.04); } .ad-badge { position: absolute; left: 16px; top: 16px; z-index: 2; background: rgba(250,248,243,.94); color: var(--brown); border: 1px solid var(--bronze); font-size: 11px; font-weight: 700; letter-spacing: .14em; padding: 5px 12px; } .ad-card .ad-body { padding-top: 16px; } /* ---------- journal & campaign (event.html) ---------- */ .ad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 22px; margin-top: 26px; } /* 풀폭 히어로형 카드 — 런칭 캠페인 */ .ad-hero { position: relative; display: block; overflow: hidden; background: var(--img-bg); } .ad-hero .ph { aspect-ratio: 21 / 9; } .ad-hero .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,24,18,.62) 0%, rgba(30,24,18,.18) 44%, rgba(30,24,18,0) 68%); } .ad-hero .hero-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 44px 40px; color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.3); } .ad-hero .hero-body .en { font-family: 'Playfair Display', Georgia, serif; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-soft); } .ad-hero .hero-body h3 { margin-top: 10px; font-size: 34px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; } .ad-hero .hero-body .sub { margin-top: 10px; font-size: 16px; color: rgba(255,255,255,.92); } .ad-hero .hero-body .period { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.72); letter-spacing: .06em; } .ad-hero:hover .ph img { transform: scale(1.03); } /* 저널 본문 아티클 */ .journal-article { max-width: 780px; margin: 0 auto; } .journal-article .label { font-family: 'Playfair Display', Georgia, serif; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--bronze-deep); } .journal-article h2 { margin-top: 14px; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; } .journal-article .lead { margin-top: 14px; font-size: 16.5px; color: var(--ink-soft); line-height: 1.7; } .journal-article figure { margin: 36px 0; } .journal-article figure img { width: 100%; } .journal-article figcaption { margin-top: 10px; font-size: 12.5px; color: var(--muted); letter-spacing: .04em; } .journal-article h3 { margin: 40px 0 12px; font-size: 20px; font-weight: 600; color: var(--ink-2); } .journal-article h3 .no { font-family: 'Playfair Display', Georgia, serif; color: var(--bronze); font-size: 17px; margin-right: 10px; letter-spacing: .04em; } .journal-article p { font-size: 15.5px; color: var(--ink-3); line-height: 1.85; } .journal-article p + p { margin-top: 12px; } .journal-article .cta { margin-top: 44px; text-align: center; } .journal-article .cta .note { margin-top: 12px; font-size: 13px; color: var(--muted); } @media (max-width: 860px) { .ad-grid { grid-template-columns: 1fr; gap: 38px; } .ad-hero .ph { aspect-ratio: 4 / 3; } .ad-hero .hero-body { padding: 0 22px 26px; } .ad-hero .hero-body h3 { font-size: 24px; } .journal-article h2 { font-size: 25px; } } /* ---------- product card ---------- */ .prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 22px; } .prod-card { display: block; } .prod-card .ph { position: relative; aspect-ratio: 4 / 3.35; background: var(--img-bg); overflow: hidden; } .prod-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .prod-card:hover .ph img { transform: scale(1.035); } /* fill badge — 충전재 표기 */ .fill-badge { position: absolute; right: 20px; bottom: 20px; width: 92px; height: 92px; border-radius: 50%; background: rgba(255,255,255,.92); border: 1px solid var(--bronze); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--bronze-deep); gap: 3px; } .fill-badge svg { display: block; } .fill-badge span { font-size: 13px; font-weight: 600; } .prod-card h3 { margin-top: 22px; font-size: 21px; font-weight: 600; color: var(--ink); } .prod-card .desc { margin-top: 6px; font-size: 14px; color: var(--gray-2); } .prod-sizes { margin-top: 16px; display: flex; align-items: center; font-size: 13px; color: var(--bronze); } .prod-sizes span + span::before { content: ""; display: inline-block; width: 1px; height: 10px; background: var(--line); margin: 0 10px; } .price-rows { margin-top: 14px; border-top: 1px solid var(--line-soft); } .price-row { display: flex; align-items: baseline; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line-soft); } .price-row .lb { font-size: 14px; color: var(--gray); flex: 0 0 auto; } .price-row .val { display: flex; align-items: baseline; gap: 10px; } .price-row .strike { font-size: 14px; color: var(--muted); text-decoration: line-through; } .price-row .num { font-size: 22px; font-weight: 700; color: var(--ink); } .price-row .num small { font-size: 14px; font-weight: 400; color: var(--ink-3); margin-left: 1px; } /* minimal product card — 메인용: 이름 중앙, 가격 없음 */ .prod-card.minimal { text-align: center; } .prod-card.minimal .subname { display: block; margin-top: 20px; font-size: 13px; color: var(--bronze); letter-spacing: .06em; font-weight: 600; } .prod-card.minimal h3 { margin-top: 6px; font-size: 19px; font-weight: 600; color: var(--ink); } .prod-card.minimal .desc { text-align: center; } /* shop list — 이름 + 판매가만 작게 */ .prod-card .price-line { margin-top: 8px; font-size: 15px; color: var(--ink-soft); text-align: center; } .prod-card .price-line .strike { font-size: 13px; color: var(--muted); text-decoration: line-through; margin-right: 8px; } /* ---------- category banner + pills (shop) ---------- */ .cat-banner { height: 360px; background: var(--img-bg) center/cover; display: flex; align-items: center; } .cat-banner h1 { color: #fff; font-size: 58px; font-weight: 300; letter-spacing: .04em; padding-left: 44px; text-shadow: 0 2px 20px rgba(0,0,0,.25); } .pill-bar { display: flex; align-items: center; gap: 10px; padding: 34px 0 8px; flex-wrap: wrap; } .pill { padding: 11px 24px; border-radius: 999px; font-size: 16px; font-weight: 500; background: var(--wash); color: var(--ink); border: 0; display: inline-block; } .pill.on { background: var(--brown); color: #fff; font-weight: 600; } .pill:hover:not(.on) { background: #ECE5D8; } .sort { margin-left: auto; font-size: 15px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; } .list-head { margin: 42px 0 34px; } .list-head h2 { font-size: 34px; font-weight: 700; } .list-head p { margin-top: 12px; font-size: 17px; color: var(--ink-3); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 34px; font-size: 16px; font-weight: 500; border-radius: 0; transition: filter .15s; } .btn:hover { filter: brightness(.96); } .btn-primary { background: var(--brown); color: #fff; border: .5px solid var(--brown); } .btn-bronze { background: var(--bronze); color: #fff; border: .5px solid var(--bronze); } .btn-ghost { background: #fff; color: var(--bronze-deep); border: .5px solid var(--bronze); } .btn-ghost-ink { background: #fff; color: var(--ink); border: 1px solid var(--line); } .btn-ink { background: var(--ink); color: #fff; border: .5px solid var(--ink); } .gift-banner { background: var(--wash); color: var(--brown); width: 100%; justify-content: space-between; padding: 0 22px; font-weight: 600; font-size: 15px; height: 54px; border: 1px solid var(--bronze); border-radius: 0; } /* ---------- breadcrumb ---------- */ .crumb { padding: 20px 0 8px; font-size: 13px; color: var(--gray); display: flex; gap: 8px; align-items: center; } .crumb a:hover { text-decoration: underline; } .crumb .sep { color: #CFC7B8; } /* ---------- product detail ---------- */ .pd { display: grid; grid-template-columns: minmax(0, 1fr) 536px; gap: 56px; padding: 18px 0 70px; } .pd-gallery { display: flex; gap: 14px; align-items: flex-start; } .pd-thumbs { display: flex; flex-direction: column; gap: 12px; width: 88px; flex: 0 0 auto; } .pd-thumbs button { aspect-ratio: 1; background: var(--img-bg); overflow: hidden; border: 1px solid transparent; padding: 0; width: 100%; } .pd-thumbs button.on { border-color: var(--ink); } .pd-thumbs img { width: 100%; height: 100%; object-fit: cover; } .pd-main { position: relative; flex: 1; background: var(--img-bg); overflow: hidden; aspect-ratio: 1 / 1; } .pd-main img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .pd-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; color: #fff; font-size: 30px; text-shadow: 0 1px 8px rgba(0,0,0,.3); z-index: 2; } .pd-nav.prev { left: 8px; } .pd-nav.next { right: 8px; } /* sticky gallery — 좌측 대형 갤러리 고정 */ .pd-gallery-sticky { position: sticky; top: calc(var(--header-h) + 20px); align-self: flex-start; } .gal-counter { position: absolute; right: 14px; bottom: 14px; z-index: 2; background: rgba(42,39,35,.6); color: #fff; font-size: 12px; padding: 4px 12px; border-radius: 999px; letter-spacing: .06em; } /* section anchor subnav (PDP 상단) — 반드시 불투명 배경(var(--bg)): 스크롤 중 이미지 위에 떠 보이는 버그 방지 */ .pd-subnav { position: sticky; top: var(--header-h); z-index: 90; height: 44px; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 34px; } .pd-subnav a { position: relative; font-size: 14px; color: var(--gray); height: 44px; display: inline-flex; align-items: center; } .pd-subnav a:hover { color: var(--ink); } .pd-subnav a.active { color: var(--brown); font-weight: 600; } .pd-subnav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brown); } /* size grid buttons — 실측 표기 지원 */ .size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; } .size-grid button { border: 1px solid var(--line); background: #fff; color: var(--ink-2); padding: 10px 8px; font-size: 14px; line-height: 1.35; text-align: center; border-radius: 0; transition: border-color .15s, color .15s; } .size-grid button small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; } .size-grid button:hover { border-color: var(--bronze); } .size-grid button.on { border-color: var(--brown); color: var(--brown); font-weight: 600; } .size-grid button.on small { color: var(--brown); opacity: .75; } /* wish (heart) */ .wish { width: 46px; height: 46px; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--gray); transition: color .15s, border-color .15s; flex: 0 0 auto; } .wish:hover { border-color: var(--brown); color: var(--brown); } .wish.on { color: var(--brown); border-color: var(--brown); } .wish.on svg path { fill: var(--brown); stroke: var(--brown); } /* launch price — 런칭 혜택가 (조용한 표기) */ .launch-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .launch-price .cap { font-size: 13px; color: var(--bronze); font-weight: 600; letter-spacing: .04em; } .launch-price .now { font-size: 30px; font-weight: 700; color: var(--ink); } .launch-price .now small { font-size: 16px; font-weight: 400; } .launch-price .was { font-size: 14px; color: var(--muted); text-decoration: line-through; } /* 함께 쓰면 좋은 — 미니 추천 카드 */ .with-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .with-items a { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-soft); padding: 8px; background: #fff; transition: border-color .15s; } .with-items a:hover { border-color: var(--bronze); } .with-items .im { width: 64px; height: 64px; flex: 0 0 auto; background: var(--img-bg); overflow: hidden; } .with-items .im img { width: 100%; height: 100%; object-fit: cover; } .with-items .nm { font-size: 13px; color: var(--ink-2); line-height: 1.4; } .with-items .pr { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-soft); font-weight: 600; } .pd-buy h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; } .pd-sub { margin-top: 10px; display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; } .pd-sub p { font-size: 15px; color: var(--gray); max-width: 330px; } .stars { color: #C9A15E; font-size: 17px; letter-spacing: 2px; white-space: nowrap; } .stars b { color: var(--ink-3); font-size: 17px; font-weight: 600; margin-left: 6px; letter-spacing: 0; } .pd-fill { display: inline-flex; align-items: center; white-space: nowrap; border: 1px solid var(--bronze); color: var(--bronze-deep); background: #fff; font-size: 13px; font-weight: 600; padding: 5px 14px; border-radius: 999px; } .pd-divider { border: 0; border-top: 1px solid var(--line); margin: 26px 0; } .opt-row { display: flex; align-items: flex-start; margin-bottom: 22px; } .opt-row .opt-lb { width: 130px; flex: 0 0 auto; font-size: 16px; font-weight: 600; padding-top: 9px; } .opt-body { display: flex; flex-wrap: wrap; gap: 14px 44px; align-items: center; flex: 1; } .radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 16px; } .radio input { display: none; } .radio .dot { width: 26px; height: 26px; border-radius: 50%; background: #E5DFD3; position: relative; transition: background .15s; } .radio input:checked + .dot { background: var(--brown); } .radio .dot::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s; } .radio input:checked + .dot::after { opacity: 1; } .select { height: 50px; min-width: 178px; border: 1px solid #D9D2C4; background: #fff; font-size: 16px; padding: 0 44px 0 16px; appearance: none; border-radius: 0; font-family: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232A2723' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } .sel-summary { display: flex; align-items: center; justify-content: space-between; } .sel-summary .txt { font-size: 19px; font-weight: 700; } .qty { display: inline-flex; border: 1px solid var(--line); } .qty button { width: 38px; height: 40px; font-size: 18px; color: var(--gray); } .qty input { width: 44px; text-align: center; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 15px; font-family: inherit; background: #fff; } .amount-rows { margin-top: 22px; } .amount-row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; } .amount-row .lb { font-size: 16px; font-weight: 600; } .amount-row .lb small { font-weight: 400; color: var(--gray); font-size: 13px; margin-left: 6px; } .amount-row .num { font-size: 26px; font-weight: 700; } .amount-row .num.red { color: var(--brown-deep); } .amount-row .num small { font-size: 15px; font-weight: 400; } .benefit-box { margin-top: 14px; border: 1px solid var(--line); padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; } .benefit-box .t { color: var(--bronze-deep); font-size: 17px; } .benefit-box .q { width: 22px; height: 22px; border-radius: 50%; background: var(--bronze); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; } .cta-row { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 12px; } .cta-row .btn { padding: 0; width: 100%; } /* detail tabs */ .pd-tabs { position: sticky; top: var(--header-h); background: var(--bg); z-index: 50; border-bottom: 2px solid var(--line); } .pd-tabs-in { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1340px; margin: 0 auto; padding: 0 40px; } .pd-tabs a { text-align: center; padding: 22px 0 20px; font-size: 17px; color: var(--gray); position: relative; } .pd-tabs a.on { color: var(--brown-deep); font-weight: 700; } .pd-tabs a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: var(--brown-deep); } /* detail content */ .pd-sec { padding: 92px 0; } .pd-sec.alt { background: var(--wash); } .pd-statement { text-align: center; max-width: 860px; margin: 0 auto 46px; } .pd-statement .flag { display: inline-flex; margin-bottom: 20px; } .pd-statement h2 { font-size: 38px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; } .pd-statement p { margin-top: 18px; font-size: 17px; color: var(--ink-3); line-height: 1.7; } .pd-photo { max-width: 940px; margin: 0 auto; } .pd-photo img { width: 100%; } .icon-strip { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--wash); padding: 34px 20px; max-width: 1140px; margin: 0 auto; } .icon-strip .it { text-align: center; border-left: 1px solid var(--line); padding: 4px 10px; font-size: 14px; color: var(--ink-3); } .icon-strip .it:first-child { border-left: 0; } .icon-strip svg { margin: 0 auto 10px; display: block; color: var(--ink-2); } .spec-table { width: 100%; border-collapse: collapse; max-width: 940px; margin: 0 auto; } .spec-table th, .spec-table td { border-top: 1px solid var(--line); padding: 17px 20px; font-size: 15px; text-align: left; } .spec-table th { width: 220px; background: var(--wash); font-weight: 600; color: var(--ink-2); } .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 1px solid var(--line); } /* reviews */ .rv-sum { display: flex; align-items: center; gap: 26px; margin-bottom: 34px; } .rv-sum .score { font-size: 54px; font-weight: 700; } .rv-item { border-top: 1px solid var(--line-soft); padding: 26px 4px; } .rv-item:last-child { border-bottom: 1px solid var(--line-soft); } .rv-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; font-size: 14px; color: var(--muted); } .rv-item p { font-size: 15px; color: var(--ink-3); } /* ---------- guest notes ticker ---------- */ .live-review { position: fixed; left: 26px; bottom: 26px; z-index: 90; width: 330px; background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.08); } .live-review .hd { font-size: 14px; font-weight: 700; color: var(--bronze-deep); letter-spacing: .08em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .live-review .hd::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); animation: blink 1.6s infinite; } @keyframes blink { 50% { opacity: .25; } } .live-review .row { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; color: var(--ink-3); } .live-review .nm { flex: 0 0 auto; background: var(--wash); border-radius: 999px; padding: 3px 10px; font-weight: 600; color: var(--ink-2); } .live-review .tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- floating buttons ---------- */ .floaters { position: fixed; right: 28px; bottom: 30px; z-index: 90; display: flex; flex-direction: column; gap: 12px; align-items: center; } .floaters .top-btn { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--brown); font-size: 22px; display: flex; align-items: center; justify-content: center; } .floaters .chat-btn { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: #fff; border: 1px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 8px 22px rgba(42,39,35,.22); font-size: 11px; font-weight: 600; letter-spacing: .04em; } .floaters .chat-btn:hover { background: var(--ink-2); } /* ---------- footer ---------- */ .footer { border-top: 1px solid var(--line-soft); margin-top: 40px; background: var(--bg); } .footer-in { max-width: 1400px; margin: 0 auto; padding: 54px 30px 60px; } .footer-top { display: flex; gap: 60px; justify-content: space-between; flex-wrap: wrap; } .f-col h4 { font-size: 15px; font-weight: 700; margin-bottom: 16px; } .f-col a { display: block; font-size: 14px; color: var(--gray); padding: 5px 0; } .f-col a:hover { color: var(--ink); } .f-info { max-width: 460px; } .f-info .logo { margin-bottom: 18px; } .f-info p { font-size: 13px; color: var(--muted); line-height: 1.8; } .f-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted); } .f-legal .links { display: flex; gap: 20px; } .f-legal .links a:hover { text-decoration: underline; } .f-legal .links .em { font-weight: 700; color: var(--ink-3); } /* ---------- cart / misc pages ---------- */ .page-title { padding: 52px 0 10px; } .page-title h1 { font-size: 34px; font-weight: 700; } .page-title p { margin-top: 10px; color: var(--gray); font-size: 16px; } .cart-table { width: 100%; border-collapse: collapse; margin-top: 26px; } .cart-table th { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: 15px 10px; font-size: 14px; font-weight: 600; } .cart-table td { border-bottom: 1px solid var(--line-soft); padding: 20px 10px; font-size: 15px; vertical-align: middle; } .cart-total { margin-top: 30px; text-align: right; font-size: 18px; } .cart-total b { font-size: 28px; } .empty { padding: 90px 0; text-align: center; color: var(--muted); font-size: 16px; } /* toast */ .toast { position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%) translateY(20px); background: #2A2723; color: #fff; padding: 14px 26px; font-size: 15px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 200; border-radius: 4px; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast a { color: var(--bronze-soft); text-decoration: underline; margin-left: 10px; } /* reveal */ .reveal { opacity: 0; transform: translateY(22px); transition: all .6s cubic-bezier(.2,.6,.2,1); } .reveal.in { opacity: 1; transform: none; } /* ---------- top ad — 헤더 위 소재 배너 (슬립퍼 상단 배너 문법) ---------- 좌측 소형 이미지 + 카피 + › 화살표, 전체가 하나의 링크. 변형: 기본(아이보리) / .brown(brown-deep 배경 흰 글자) / .wash */ .top-ad { display: flex; align-items: center; justify-content: center; gap: 24px; height: 88px; padding: 0 20px; background: var(--bg); border-bottom: 1px solid var(--line); } .top-ad img { width: 160px; height: 64px; object-fit: cover; flex: 0 0 auto; } .top-ad .copy { font-size: 15px; color: var(--ink); letter-spacing: -0.005em; line-height: 1.45; } .top-ad .arrow { font-size: 20px; line-height: 1; color: var(--muted); transition: transform .15s; } .top-ad:hover .arrow { transform: translateX(3px); } .top-ad.brown { background: var(--brown-deep); border-bottom-color: var(--brown-deep); } .top-ad.brown .copy { color: #fff; } .top-ad.brown .arrow { color: var(--bronze-soft); } .top-ad.wash { background: var(--wash); } /* ---------- mid banner — 본문 중간 풀블리드 소재 모듈 ---------- .left(기본)/.right — 카피블록 위치. 사진 위 가독용 그라디언트 포함 */ .mid-banner { position: relative; height: 340px; overflow: hidden; background-size: cover; background-position: center; } .mid-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42,39,35,.5) 0%, rgba(42,39,35,.16) 42%, rgba(42,39,35,0) 62%); } .mid-banner.right::before { background: linear-gradient(270deg, rgba(42,39,35,.5) 0%, rgba(42,39,35,.16) 42%, rgba(42,39,35,0) 62%); } .mid-banner .cp { position: absolute; top: 50%; transform: translateY(-50%); left: 64px; max-width: 520px; color: #fff; z-index: 1; } .mid-banner.right .cp { left: auto; right: 64px; text-align: right; } .mid-banner .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--bronze-soft); /* bronze 포인트 — 어두운 그라디언트 위 가독용 soft 톤 */ } .mid-banner h3 { margin-top: 10px; font-size: 28px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; text-shadow: 0 1px 14px rgba(0,0,0,.18); } .mid-banner .cta { display: inline-block; margin-top: 18px; font-size: 14px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.65); padding-bottom: 3px; } .mid-banner .cta:hover { border-bottom-color: #fff; } /* ---------- editorial mosaic — 소컷 2 + 대컷 1 (슬립퍼 누어 블록 문법) ---------- */ .editorial { display: grid; grid-template-columns: 1fr 1.55fr; gap: 22px; align-items: start; } .editorial .col { display: grid; gap: 22px; } .editorial .it { margin: 0; } .editorial .im { background: var(--img-bg); overflow: hidden; } .editorial .col .im { aspect-ratio: 1 / 1; } .editorial .it.main .im { aspect-ratio: 3 / 4; } .editorial .im img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .editorial .it:hover .im img { transform: scale(1.03); } .editorial .cap { margin-top: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* ---------- hero copy minimal — 좌하단 소형 카피 (슬립퍼 "버디의 방" 문법) ---------- */ .hero-copy.minimal { align-items: flex-start; justify-content: flex-end; text-align: left; padding: 0 0 56px 48px; } .hero-copy.minimal h2 { font-size: 30px; font-weight: 600; } .hero-copy.minimal .sub { margin-top: 8px; font-size: 15px; } /* ---------- benefits bar — 트러스트 4항목 한 줄 ---------- */ .benefits-bar { background: var(--wash); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .benefits-bar .in { display: grid; grid-template-columns: repeat(4, 1fr); height: 48px; align-items: center; } .benefits-bar .it { text-align: center; font-size: 14px; color: var(--ink-3); line-height: 1.3; border-left: 1px solid var(--line); padding: 0 8px; } .benefits-bar .it:first-child { border-left: 0; } /* ---------- sku table — 사이즈·규격 표 (선택 행 하이라이트) ---------- */ .sku-table { width: 100%; border-collapse: collapse; } .sku-table th, .sku-table td { border-top: 1px solid var(--line); padding: 13px 14px; font-size: 14px; text-align: left; } .sku-table thead th { background: var(--wash); font-weight: 600; color: var(--ink-2); } .sku-table tr:last-child th, .sku-table tr:last-child td { border-bottom: 1px solid var(--line); } .sku-table tbody tr { cursor: pointer; transition: background .15s; } .sku-table tbody tr:hover { background: var(--wash); } .sku-table tbody tr.on { background: var(--wash); } .sku-table tbody tr.on td { color: var(--brown-deep); font-weight: 600; } .sku-table tbody tr.on td:first-child { box-shadow: inset 3px 0 0 var(--brown); } /* ---------- ugc grid — 실사용 컷 그리드 ---------- */ .ugc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .ugc-grid a { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--img-bg); } .ugc-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .ugc-grid a:hover img { transform: scale(1.05); } .ugc-grid .ov { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px; background: linear-gradient(180deg, rgba(42,39,35,0) 45%, rgba(42,39,35,.55)); color: #fff; font-size: 13px; opacity: 0; transition: opacity .25s; } .ugc-grid a:hover .ov { opacity: 1; } /* ---------- badge tag — 카드 좌상단 소형 사각 (BEST/NEW) ---------- */ .badge-tag { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 10px; background: var(--brown); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; } .badge-tag.new { background: var(--bronze); } /* ---------- mobile fixed CTA (PDP) ---------- */ .mobile-cta { display: none; } /* ---------- table scroll wrapper — 표 가로 스크롤 ---------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---------- mobile nav — 햄버거 + 풀스크린 드로어 ---------- */ .ham { display: none; width: 44px; height: 44px; padding: 0; flex: 0 0 auto; align-items: center; justify-content: center; color: var(--ink-2); } .m-drawer { position: fixed; inset: 0; z-index: 400; background: var(--bg); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .28s cubic-bezier(.25,.6,.3,1), visibility .28s; } .m-drawer.open { transform: none; visibility: visible; } body.drawer-lock { overflow: hidden; } .m-drawer-head { flex: 0 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 20px; border-bottom: 1px solid var(--line-soft); } .m-drawer-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); padding: 0; } .m-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px 30px; } .m-acc > li { border-bottom: 1px solid var(--line-soft); } .m-acc-head { display: flex; align-items: center; } .m-acc-head > a { flex: 1; display: flex; align-items: center; min-height: 56px; font-size: 17px; font-weight: 600; color: var(--ink); } .m-acc-toggle { width: 44px; height: 44px; flex: 0 0 auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--gray); } .m-acc-toggle svg { transition: transform .2s; } .m-acc > li.open .m-acc-toggle svg { transform: rotate(180deg); } .m-acc-sub { display: none; padding: 0 0 14px; } .m-acc > li.open .m-acc-sub { display: block; } .m-acc-sub a { display: flex; align-items: center; min-height: 44px; padding-left: 12px; font-size: 15px; color: var(--ink-3); } .m-acc-sub a:active { color: var(--brown); } .m-links { display: flex; gap: 24px; padding: 18px 0 4px; } .m-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-3); } .m-drawer-foot { flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--wash); padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); } .m-drawer-foot .cap { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--bronze-deep); } .m-drawer-foot .tel { display: inline-flex; align-items: center; min-height: 44px; font-family: 'Playfair Display', Georgia, serif; font-size: 27px; font-weight: 500; color: var(--brown); letter-spacing: .02em; } .m-drawer-foot p { font-size: 13px; color: var(--gray); } .m-drawer-foot .ask { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; } /* ---------- responsive ---------- */ @media (max-width: 1120px) { .gnb, .mega { display: none; } .ham { display: inline-flex; } .util .txt { display: none; } .pd { grid-template-columns: 1fr; } } @media (max-width: 860px) { /* 헤더 56px · 로고 18px · 터치 44px */ :root { --header-h: 56px; } .header-in { padding: 0 12px 0 16px; gap: 12px; } .logo { gap: 8px; } .logo svg { width: 18px; height: 21px; } .logo .word { font-size: 18px; } .util { gap: 0; } .util a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .cart-badge { top: 4px; right: 4px; } .wrap { padding: 0 20px; } .gnb { display: none; } /* 히어로 68vw (min 380px) */ .hero { height: 68vw; min-height: 380px; } .hero-copy h2 { font-size: 30px; } .hero-dots button { width: 20px; height: 20px; padding: 6px; background-clip: content-box; } .hero-dots button.on { width: 34px; } .partner-strip { padding: 0 16px; gap: 12px; } .partner-strip .chains span:nth-child(n+4) { display: none; } .partner-strip .cap { display: none; } .num-strip { padding: 44px 0; } .num-strip .grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } .num-strip .it:nth-child(odd) { border-left: 0; } .num-strip .n { font-size: 30px; } .section { padding: 48px 0; } .sec-head { margin-bottom: 28px; } .sec-en { font-size: 27px; } /* 상품 카드 2열 12px · 저널(이벤트) 1열 */ .event-grid { grid-template-columns: 1fr; gap: 34px; } .event-card h3 { font-size: 18px; margin-top: 14px; } .prod-grid { grid-template-columns: 1fr 1fr; gap: 30px 12px; } .prod-card h3 { margin-top: 14px; font-size: 16px; } .prod-card .desc { font-size: 12.5px; } .prod-card.minimal .subname { margin-top: 12px; font-size: 11px; } .prod-card.minimal h3 { margin-top: 4px; font-size: 15px; } .prod-card .price-line { font-size: 13.5px; } .prod-sizes { margin-top: 10px; font-size: 12px; } .price-row .num { font-size: 18px; } .fill-badge { width: 62px; height: 62px; right: 10px; bottom: 10px; gap: 1px; } .fill-badge svg { width: 18px; height: 18px; } .fill-badge span { font-size: 10px; } .cta-row { grid-template-columns: 1fr; } .live-review { display: none; } .pd-tabs a { font-size: 14px; } .cat-banner { height: 220px; } .cat-banner h1 { font-size: 32px; padding-left: 20px; } .list-head { margin: 30px 0 26px; } .list-head h2 { font-size: 26px; } .list-head p { font-size: 15px; } .pd-tabs-in { padding: 0 10px; } /* PDP 1열 + 갤러리 가로 스냅 스크롤 */ .pd { gap: 30px; padding-bottom: 44px; } .pd-gallery-sticky { position: static; } .pd-gallery { flex-direction: column; } .pd-thumbs { flex-direction: row; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .pd-thumbs::-webkit-scrollbar { display: none; } .pd-thumbs button { flex: 0 0 64px; width: 64px; scroll-snap-align: start; } .pd-buy h1 { font-size: 25px; } .launch-price .now { font-size: 26px; } .amount-row .num { font-size: 22px; } .pd-sec { padding: 56px 0; } .pd-statement h2 { font-size: 26px; } .pd-statement p { font-size: 15px; } .pd-subnav { gap: 20px; overflow-x: auto; justify-content: flex-start; padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pd-subnav::-webkit-scrollbar { display: none; } .pd-subnav a { white-space: nowrap; flex: 0 0 auto; } .with-items { grid-template-columns: 1fr; } .qty button { width: 44px; height: 44px; } .qty input { height: 44px; } /* 표 — 가로 스크롤 래퍼 안에서 셀 유지 */ .table-scroll .cart-table { min-width: 540px; } .spec-table th { width: 110px; padding: 14px 12px; font-size: 14px; } .spec-table td { padding: 14px 12px; font-size: 14px; } /* 인증 스트립 6종 → 3×2 */ .icon-strip { grid-template-columns: repeat(3, 1fr); row-gap: 24px; padding: 26px 12px; } .icon-strip .it { font-size: 12.5px; } .icon-strip .it:nth-child(3n+1) { border-left: 0; } /* 푸터 1열 */ .footer-in { padding: 40px 20px 46px; } .footer-top { flex-direction: column; gap: 30px; } .f-col a { padding: 11px 0; } .f-legal { flex-direction: column; align-items: flex-start; gap: 14px; } .f-legal .links a { display: inline-flex; align-items: center; min-height: 40px; } /* top ad — 모바일에선 이미지 숨김 */ .top-ad { height: 64px; gap: 12px; } .top-ad img { display: none; } .top-ad .copy { font-size: 13.5px; } /* mid banner */ .mid-banner { height: 280px; } .mid-banner .cp, .mid-banner.right .cp { left: 24px; right: 24px; text-align: left; } .mid-banner h3 { font-size: 22px; } /* editorial — 소컷 2단 가로, 대컷 아래로 */ .editorial { grid-template-columns: 1fr; } .editorial .col { grid-template-columns: 1fr 1fr; } /* hero minimal copy */ .hero-copy.minimal { padding: 0 0 40px 24px; } .hero-copy.minimal h2 { font-size: 24px; } /* benefits bar — 2×2 */ .benefits-bar .in { grid-template-columns: 1fr 1fr; height: auto; padding: 4px 0; } .benefits-bar .it { font-size: 13px; padding: 9px 6px; border-left: 0; } .benefits-bar .it:nth-child(even) { border-left: 1px solid var(--line); } /* ugc grid — 2열 */ .ugc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* 하단 고정 CTA바 */ .mobile-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: #fff; border-top: 1px solid var(--line); padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); gap: 10px; } .mobile-cta .btn { flex: 1; height: 50px; font-size: 15px; padding: 0; } .mobile-cta .wish { width: 50px; height: 50px; } .floaters { bottom: 84px; } }