From 8d7d25cce8105f092bd9cbb7454a9a84b579e84b Mon Sep 17 00:00:00 2001 From: sungro815 Date: Mon, 12 Jan 2026 13:51:45 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B0=98?= =?UTF-8?q?=EC=9D=91=ED=98=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20css=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/web.php | 12 + resources/css/web.css | 631 ++++- resources/css/web.css.backup | 2341 +++++++++++++++++ resources/views/web/company/footer.blade.php | 204 +- resources/views/web/cs/faq/index.blade.php | 2 + resources/views/web/cs/guide/index.blade.php | 2 + resources/views/web/cs/kakao/index.blade.php | 2 + resources/views/web/cs/notice/index.blade.php | 14 +- resources/views/web/cs/qna/index.blade.php | 1 + resources/views/web/layouts/subpage.blade.php | 26 +- .../views/web/mypage/exchange/index.blade.php | 5 +- .../views/web/mypage/info/index.blade.php | 3 +- .../views/web/mypage/qna/index.blade.php | 3 +- .../views/web/mypage/usage/index.blade.php | 5 +- .../views/web/partials/content-head.blade.php | 14 +- .../web/partials/cs-quick-actions.blade.php | 22 + .../views/web/partials/cs-tabs.blade.php | 42 +- .../views/web/partials/hero-slider.blade.php | 2 +- .../partials/mypage-quick-actions.blade.php | 45 + .../views/web/partials/mypage-tabs.blade.php | 13 +- .../views/web/partials/policy-tabs.blade.php | 15 +- .../web/partials/subpage-sidenav.blade.php | 56 +- .../views/web/policy/email/index.blade.php | 116 +- resources/views/web/policy/index.blade.php | 98 +- .../views/web/policy/privacy/index.blade.php | 333 ++- .../views/web/policy/terms/index.blade.php | 260 +- 26 files changed, 4069 insertions(+), 198 deletions(-) create mode 100644 resources/css/web.css.backup create mode 100644 resources/views/web/partials/cs-quick-actions.blade.php create mode 100644 resources/views/web/partials/mypage-quick-actions.blade.php diff --git a/config/web.php b/config/web.php index 55cd983..f328bd0 100644 --- a/config/web.php +++ b/config/web.php @@ -25,6 +25,10 @@ return [ ], ], + 'cs_nav' => [ + 'title' => '고객센터', + 'subtitle' => '문의 및 안내', // 필요하면 '안내/문의' 같은 문구 넣어도 됨 + ], 'cs_tabs' => [ ['label' => '공지사항', 'route' => 'web.cs.notice.index', 'key' => 'notice'], ['label' => '자주 묻는 질문', 'route' => 'web.cs.faq.index', 'key' => 'faq'], @@ -33,6 +37,10 @@ return [ ['label' => '이용안내', 'route' => 'web.cs.guide.index', 'key' => 'guide'], ], + 'mypage_nav' => [ + 'title' => '마이페이지', + 'subtitle' => '내 정보/내역', + ], 'mypage_tabs' => [ ['label' => '나의정보', 'route' => 'web.mypage.info.index', 'key' => 'info'], ['label' => '이용내역', 'route' => 'web.mypage.usage.index', 'key' => 'usage'], @@ -40,6 +48,10 @@ return [ ['label' => '1:1문의내역', 'route' => 'web.mypage.qna.index', 'key' => 'qna'], ], + 'policy_nav' => [ + 'title' => 'PIN FOR YOU', // 요청하신 “핀포유” 느낌 + 'subtitle' => '약관 및 정책', // 박스 안에서 보조 타이틀 + ], 'policy_tabs' => [ ['label' => '개인정보처리방침', 'route' => 'web.policy.privacy.index', 'key' => 'privacy'], ['label' => '이용약관', 'route' => 'web.policy.terms.index', 'key' => 'terms'], diff --git a/resources/css/web.css b/resources/css/web.css index 020ef59..08954aa 100644 --- a/resources/css/web.css +++ b/resources/css/web.css @@ -1220,11 +1220,11 @@ h1, h2, h3, h4, h5, h6 { align-items: baseline; justify-content: space-between; gap: 12px; - margin: 40px 0 16px; + margin: 0px 0 16px; padding-left:8px; } .subpage-title{ - font-size: 20px; + font-size: 18px; font-weight: 900; letter-spacing: -0.3px; color:#0F172A; @@ -1750,3 +1750,630 @@ h1, h2, h3, h4, h5, h6 { border-color:#BFDBFE; color:#1D4ED8; } + +/* Side menu header */ +.subnav-head{ + padding: 16px 16px 10px; +} +.subnav-title{ + font-size: 19px; + font-weight: 800; + line-height: 1.2; + color: #001280; +} +.subnav-subtitle{ + margin-top: 6px; + font-size: 12px; + opacity: .7; +} +.subnav-divider{ + height: 1px; + margin: 0 16px 10px; + background: rgba(0,0,0,.08); +} + +/* ✅ 박스 자체 */ +.subnav--side .subnav-box{ + background: #fff; + border: 1px solid rgba(0,0,0,.08); + border-radius: 16px; + padding: 0; /* 헤더/리스트에서 패딩 관리 */ + overflow: hidden; /* 라운드 안쪽 정리 */ +} + +/* 기존 ul이 박스 역할을 하고 있었다면: ul은 이제 투명하게 */ +.subnav--side .subnav-list{ + margin: 0; + padding: 12px; /* 메뉴 영역 패딩 */ + list-style: none; + background: transparent; + border: 0; +} + +/* 헤더 */ +.subnav--side .subnav-head{ + padding: 16px 16px 10px; +} +.subnav--side .subnav-title{ + font-size: 18px; + font-weight: 800; + line-height: 1.2; +} +.subnav--side .subnav-subtitle{ + margin-top: 6px; + font-size: 12px; + opacity: .7; +} +.subnav--side .subnav-divider{ + height: 1px; + margin: 0 16px; + background: rgba(0,0,0,.08); +} + +/* subpage hero compact */ +.hero--compact{ + padding: 14px 0; +} +.hero--compact .hero-inner{ + min-height: 160px; /* 데스크탑 */ +} +@media (max-width: 768px){ + .hero--compact .hero-inner{ min-height: 120px; } +} + +.hero--compact h2, +.hero--compact .hero-title{ + font-size: 18px; + line-height: 1.25; +} + +.hero--compact .hero-desc{ + font-size: 12px; + opacity: .85; +} + +/* 서브에서는 CTA 과하면 지저분해져서 숨기거나 1개만 */ +.hero--compact .hero-actions .btn-secondary, +.hero--compact .hero-badges{ + display:none; +} +.cs-quick__bar{ + margin: 12px 0 14px; + padding: 10px 12px; + border-radius: 12px; + background: rgba(0,0,0,.04); + font-size: 12px; +} +.cs-quick__grid{ + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 10px; +} +@media (max-width: 768px){ + .cs-quick__grid{ grid-template-columns: 1fr; } +} +.cs-quick__card{ + display:block; + padding: 14px 14px; + border:1px solid rgba(0,0,0,.08); + border-radius: 14px; + background:#fff; + text-decoration:none; +} +.cs-quick__title{ font-weight: 800; } +.cs-quick__desc{ margin-top:6px; font-size: 12px; opacity:.75; } + +/* ===== Footer: Coupang-like ===== */ +.site-footer{ border-top:1px solid rgba(0,0,0,.08); background:#fff; } + +.footer-topbar{ + border-bottom:1px solid rgba(0,0,0,.08); + background:#fff; +} +.footer-topbar__inner{ + display:flex; + align-items:center; + justify-content:space-between; + gap:16px; + padding:0px 23px 20px; +} +.footer-topbar__nav{ + display:flex; + flex-wrap:wrap; + align-items:center; + gap:10px; + font-size:12px; + color:#111; +} +.footer-topbar__link{ + text-decoration:none; + color:inherit; + opacity:.85; +} +.footer-topbar__link:hover{ opacity:1; text-decoration:underline; } +.footer-topbar__link--strong{ font-weight:800; opacity:1; } +.footer-topbar__sep{ opacity:.35; } + +.footer-site-select{ + height:32px; + padding:0 10px; + border:1px solid rgba(0,0,0,.12); + border-radius:8px; + background:#fff; + font-size:12px; +} + +.footer-main{ padding:26px 0; } +.footer-grid{ + display:grid; + grid-template-columns: 1.35fr 1fr 1fr; + gap:24px; + align-items:start; +} +@media (max-width: 980px){ + .footer-grid{ grid-template-columns:1fr; } + .footer-topbar__inner{ flex-direction:column; align-items:flex-start; } +} + +.footer-logo-img{ height:55px; width:auto; display:block; } + +.footer-company{ + margin-top:12px; + font-size:12px; + line-height:1.6; + color:rgba(0,0,0,.78); +} +.footer-company__row{ display:flex; gap:10px; } +.footer-company__k{ min-width:160px; opacity:.75; } +.footer-company__v{ flex:1; } + +.footer-copy{ + margin-top:12px; + font-size:12px; + color:rgba(0,0,0,.6); +} + +.footer-h{ + font-size:12px; + font-weight:800; + margin-bottom:10px; + color:#111; +} + +.footer-call__num{ + font-size:26px; + font-weight:900; + letter-spacing:-.02em; + line-height:1.1; +} +.footer-call__meta{ + margin-top:6px; + font-size:12px; + color:rgba(0,0,0,.7); +} + +.footer-kv{ margin-top:14px; font-size:12px; } +.footer-kv__row{ display:flex; gap:10px; padding:4px 0; } +.footer-kv__k{ min-width:80px; opacity:.75; } +.footer-kv__v{ color:rgba(0,0,0,.85); } +.footer-link{ color:rgba(0,0,0,.85); text-decoration:none; } +.footer-link:hover{ text-decoration:underline; } +.footer-link--strong{ font-weight:800; } + +.footer-mini-links{ + display:flex; + flex-wrap:wrap; + gap:10px 14px; + font-size:12px; + margin-bottom:14px; +} + +.footer-payments{ display:flex; flex-direction:column; gap:12px; } +.footer-pay__img{ width:70px; height:auto; display:block; } +.footer-pay__img--wide{ width:180px; } +.footer-pay__cap{ margin-top:6px; font-size:12px; color:rgba(0,0,0,.65); } + +.footer-marks{ margin-top:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; } +.footer-marks img{ height:22px; width:auto; opacity:.9; } + +/* screen-reader only */ +.sr-only{ + position:absolute; width:1px; height:1px; padding:0; margin:-1px; + overflow:hidden; clip:rect(0,0,0,0); border:0; +} + +/* Policy page */ +.policy-page{ margin-top: 14px; } + +.policy-toc{ + display:flex; + flex-wrap:wrap; + gap:10px 12px; + padding:12px 14px; + border:1px solid rgba(0,0,0,.08); + border-radius:14px; + background:rgba(0,0,0,.02); + margin: 12px 0 18px; +} +.policy-toc a{ + font-size:12px; + text-decoration:none; + color:rgba(0,0,0,.8); + padding:6px 10px; + border-radius:999px; + border:1px solid rgba(0,0,0,.08); + background:#fff; +} +.policy-toc a:hover{ text-decoration:underline; } + +.policy-sec{ padding: 14px 0 8px; scroll-margin-top: 90px; } +.policy-h2{ + font-size:16px; + font-weight:900; + letter-spacing:-.02em; + margin: 8px 0 10px; +} +.policy-p{ + font-size:13px; + line-height:1.8; + color:rgba(0,0,0,.78); + margin: 0 0 10px; +} + +.policy-card{ + border:1px solid rgba(0,0,0,.08); + border-radius:16px; + padding:14px 14px; + background:#fff; + margin: 10px 0; +} +.policy-card__title{ + font-weight:700; + margin-bottom:8px; +} + +.policy-ul{ + margin: 0; + padding-left: 18px; + line-height: 1.8; + color: rgba(0,0,0,.78); +} +.policy-ul li{ margin: 4px 0; } + +.policy-badge-list{ + display:flex; + flex-wrap:wrap; + gap:8px; +} +.policy-badge{ + display:inline-flex; + align-items:center; + height:26px; + padding:0 10px; + font-size:12px; + border-radius:999px; + border:1px solid rgba(0,0,0,.10); + background:rgba(0,0,0,.02); +} + +.policy-table-wrap{ + overflow:auto; + border:1px solid rgba(0,0,0,.08); + border-radius:14px; + background:#fff; +} +.policy-table{ + width:100%; + border-collapse:separate; + border-spacing:0; + min-width: 720px; + font-size:12px; +} +.policy-table th, +.policy-table td{ + padding:10px 10px; + border-bottom:1px solid rgba(0,0,0,.08); + vertical-align:top; +} +.policy-table th{ + background:rgba(0,0,0,.03); + font-weight:800; + text-align:left; +} +.policy-table tr:last-child td{ border-bottom:0; } + +.policy-note{ + margin-top:10px; + padding:10px 12px; + border-radius:12px; + background:rgba(0,0,0,.03); + font-size:12px; + line-height:1.7; + color:rgba(0,0,0,.72); +} + +.policy-kv{ display:flex; flex-direction:column; gap:8px; } +.policy-kv__row{ display:flex; gap:10px; } +.policy-kv__row span{ min-width:90px; opacity:.75; } + +.policy-bottom{ margin-top: 14px; display:flex; justify-content:flex-end; } +.policy-top{ + display:inline-flex; + align-items:center; + justify-content:center; + height:34px; + padding:0 12px; + border-radius:10px; + border:1px solid rgba(0,0,0,.10); + text-decoration:none; + font-size:12px; + background:#fff; + color:rgba(0,0,0,.8); +} +.policy-top:hover{ text-decoration:underline; } + +.policy-ol{ + margin: 0; + padding-left: 18px; + line-height: 1.8; + color: rgba(0,0,0,.78); +} +.policy-ol > li{ margin: 6px 0; } +.policy-ol .policy-ul{ margin-top: 6px; } + +.policy-details{ border:0; } +.policy-summary{ + cursor:pointer; + font-weight:800; + list-style:none; +} +.policy-summary::-webkit-details-marker{ display:none; } + +.policy-law{ + margin-top:10px; + padding-top:10px; + border-top:1px solid rgba(0,0,0,.08); +} +.policy-card--alert{ + border-color: rgba(255, 102, 0, .25); + background: rgba(255, 102, 0, .04); +} + +/* Policy hub */ +.policy-hub{ + display:grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; +} +@media (max-width: 960px){ + .policy-hub{ grid-template-columns: 1fr; } +} + +.policy-hub__card{ + display:block; + text-decoration:none; + color: inherit; + border:1px solid rgba(0,0,0,.08); + border-radius:16px; + background:#fff; + padding:14px; + transition: transform .08s ease, box-shadow .08s ease; +} +.policy-hub__card:hover{ + transform: translateY(-1px); + box-shadow: 0 10px 24px rgba(0,0,0,.08); +} + +.policy-hub__top{ + display:flex; + align-items:center; + justify-content:space-between; + margin-bottom:10px; +} +.policy-hub__badge{ + display:inline-flex; + height:24px; + align-items:center; + padding:0 10px; + border-radius:999px; + font-size:12px; + border:1px solid rgba(0,0,0,.10); + background: rgba(0,0,0,.02); + font-weight:700; +} +.policy-hub__arrow{ + opacity:.6; + font-weight:900; +} + +.policy-hub__title{ + font-size:15px; + font-weight:900; + letter-spacing:-.02em; + margin-bottom:6px; +} +.policy-hub__desc{ + font-size:13px; + line-height:1.75; + color: rgba(0,0,0,.75); + margin-bottom:10px; +} +.policy-hub__meta{ + font-size:12px; + color: rgba(0,0,0,.6); +} + +/* ✅ Policy tables: mobile overflow fix */ +.policy-table-wrap{ + width:100%; + overflow-x:auto; + -webkit-overflow-scrolling:touch; + border:1px solid rgba(0,0,0,.08); + border-radius:12px; + background:#fff; +} + +.policy-table{ + width:100%; + border-collapse:collapse; + min-width:720px; /* 컬럼이 4개라 모바일에서 최소폭 필요 */ +} + +.policy-table th, +.policy-table td{ + padding:10px 12px; + border-bottom:1px solid rgba(0,0,0,.08); + vertical-align:top; + line-height:1.6; +} + +.policy-table th{ + background:rgba(0,0,0,.02); + font-weight:800; + white-space:nowrap; +} + +.policy-table td{ + word-break:break-word; +} + +/* 기본(PC/태블릿): 스크롤 테이블 */ +.policy-table-wrap{ + width:100%; + overflow-x:auto; + -webkit-overflow-scrolling:touch; + border:1px solid rgba(0,0,0,.08); + border-radius:12px; + background:#fff; +} + +.policy-table{ + width:100%; + border-collapse:collapse; + /* ⚠️ min-width를 무조건 박아두면 모바일에서 “커 보이는” 느낌이 남음 */ + /* min-width:720px; <-- 이게 들어가있다면 제거하거나 아래처럼 조건부로 */ +} + +@media (min-width: 641px){ + .policy-table{ min-width:720px; } /* 데스크톱에서만 최소폭 유지 */ +} + +.policy-table th, +.policy-table td{ + padding:10px 12px; + border-bottom:1px solid rgba(0,0,0,.08); + vertical-align:top; + line-height:1.6; +} +.policy-table th{ + background:rgba(0,0,0,.02); + font-weight:800; +} + +/* ✅ 모바일: 행을 카드처럼 쌓아서 “넘침” 자체를 제거 */ +@media (max-width: 640px){ + /* 래퍼 스크롤 제거 + 카드 형태로 */ + .policy-table-wrap{ + overflow:visible; + border:0; + border-radius:0; + background:transparent; + } + + .policy-table{ + min-width:0 !important; + } + + .policy-table thead{ display:none; } + .policy-table, + .policy-table tbody, + .policy-table tr, + .policy-table td{ + display:block; + width:100%; + } + + .policy-table tr{ + border:1px solid rgba(0,0,0,.08); + border-radius:14px; + background:#fff; + margin-bottom:10px; + overflow:hidden; + } + + .policy-table td{ + border:0; + border-top:1px solid rgba(0,0,0,.06); + padding:10px 12px; + display:flex; + gap:10px; + align-items:flex-start; + } + + .policy-table td:first-child{ + border-top:0; + } + + .policy-table td::before{ + content: attr(data-label); + flex:0 0 92px; + font-weight:900; + color: rgba(0,0,0,.65); + } + + .policy-table td{ + overflow-wrap:anywhere; + word-break:break-word; + } +} + +/* (안전장치) 카드 안에서 가로 넘침 방지 */ +.content-card{ overflow-x:hidden; } + + +/* ============================================================ + MOBILE / RESPONSIVE OVERFLOW HOTFIX (do not remove) + - Prevent horizontal overflow on small screens + - Keep original design; only constrains width/overflow + ============================================================ */ + +html, body { max-width: 100%; overflow-x: hidden; } +img, video, svg, iframe, canvas { max-width: 100%; height: auto; } + +/* Grid/flex children can cause overflow if min-width is auto */ +.subpage-grid, +.subpage-main, +.content-card, +.policy-page { min-width: 0; } + +/* Policy table: keep scroll without widening the whole page */ +.policy-table-wrap{ + width: 100%; + max-width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} +.policy-table{ + max-width: 100%; +} +.policy-table th, +.policy-table td{ + word-break: break-word; + overflow-wrap: anywhere; +} + +/* Small screens: don't "bleed" outside cards */ +@media (max-width: 640px){ + .policy-table-wrap{ + margin: 0; + border-left: 1px solid rgba(0,0,0,.08); + border-right: 1px solid rgba(0,0,0,.08); + border-radius: 14px; + } + /* Reduce minimum width a bit so it feels less huge on phones */ + .policy-table{ min-width: 560px; } +} + +/* If any component uses nowrap, allow scroll inside it */ +.policy-toc{ max-width: 100%; } + diff --git a/resources/css/web.css.backup b/resources/css/web.css.backup new file mode 100644 index 0000000..bd7dfe4 --- /dev/null +++ b/resources/css/web.css.backup @@ -0,0 +1,2341 @@ +/* ========================================= + Voucher Mall Design System + Theme: White base + Blue accent + ========================================= */ + +:root { + /* Colors */ + --color-bg-base: #FFFFFF; + --color-bg-section: #F7F8FA; /* Very light grey for separation */ + --color-bg-tint: #EFF6FF; /* Blue tint for badges */ + + --color-text-primary: #111827; + --color-text-secondary: #6B7280; + --color-text-tertiary: #9CA3AF; + --color-text-white: #FFFFFF; + + --color-border: #d5dff6; + + --color-accent-blue: #2563EB; + --color-accent-blue-hover: #1D4ED8; + + --color-footer-bg: #0B1220; + --color-footer-text: #E5E7EB; + + /* Semantic */ + --color-danger: #EF4444; + + /* Spacing & Layout */ + --container-width: 1280px; + --header-height-desktop: 72px; + --header-height-scroll: 56px; + + /* Radius */ + --radius-card: 16px; + --radius-pill: 9999px; + --radius-sm: 8px; + + /* Shadows */ + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + + /* Transitions */ + --transition-base: 200ms ease-out; +} + +/* Base & Reset */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; + background-color: var(--color-bg-base); + color: var(--color-text-primary); + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} + +a { + text-decoration: none; + color: inherit; + transition: color var(--transition-base); +} + +ul, li { + list-style: none; +} + +button { + font-family: inherit; + border: none; + background: none; + cursor: pointer; + padding: 0; +} + +img { + max-width: 100%; + display: block; +} +.logo{ + display: flex; + align-items: center; + flex-shrink: 0; + margin-right: 16px; +} + +.logo-img{ + height: 50px; + width: auto; /* 비율 유지 */ + display: block; +} + +.thumb-badges{ + position: absolute; + left: 10px; + top: 10px; + display: flex; + flex-wrap: wrap; + gap: 6px; + max-width: calc(100% - 20px); + pointer-events: none; /* 이미지 클릭 방해 X */ +} + +.pay-tag{ + display: inline-flex; + align-items: center; + height: 22px; + padding: 0 8px; + border-radius: 8px; + font-size: 11px; + font-weight: 800; + letter-spacing: .2px; + backdrop-filter: blur(6px); + border: 1px solid rgba(255,255,255,.7); + box-shadow: 0 1px 2px rgba(0,0,0,.08); +} + +.pay-tag--phone{ + background: rgba(16,185,129,.18); /* green tint */ + color: #047857; +} + +.pay-tag--card{ + background: rgba(37,99,235,.18); /* blue tint */ + color: #1D4ED8; +} + +.pay-tag--kbank{ + background: rgba(139,92,246,.18); /* violet tint */ + color: #6D28D9; +} + +.pay-tag--sale{ + background: rgba(245,158,11,.18); /* amber tint */ + color: #B45309; +} + +.product-img{ + width: 250px; + padding-top: 22px; + object-fit: cover; + display: block; +} +.product-img-s{ + width: 220px; + padding-top: 22px; + object-fit: cover; + display: block; +} + +/* Header layout fix */ +.site-header .container{ + height: 100%; + display: flex; + align-items: center; /* 전체 세로 가운데 */ + justify-content: space-between; + gap: 16px; +} + +.header-left{ + display: flex; + align-items: center; /* 로고+메뉴 세로 가운데 */ + gap: 24px; + min-width: 0; +} + +.desktop-nav{ + display: flex; + align-items: center; /* 메뉴 텍스트 세로 가운데 */ + gap: 22px; +} + +.nav-link{ + display: inline-flex; /* 텍스트도 박스로 잡아서 가운데 정렬 */ + align-items: center; + height: 40px; /* 메뉴 높이 통일 */ + font-weight: 700; + letter-spacing: 0.2px; +} + +/* Exchange pill (더 자연스럽게) */ +.nav-link--exchange{ + height: 40px; + padding: 0 14px; + border-radius: 9999px; + background: #EFF6FF; + border: 1px solid #BFDBFE; + color: #2563EB; +} +.nav-link--exchange:hover{ + background: #2563EB; + border-color: #2563EB; + color: #fff; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + font-weight: 700; + line-height: 1.2; +} + +.text-h1 { font-size: 32px; line-height: 40px; } +.text-h2 { + margin: 0; + font-size: 15px; /* 여기서 더 줄이고 싶으면 15px */ + line-height: 22px; + font-weight: 800; + color: #111827; + letter-spacing: -0.2px; +} +.text-h2::before{ + content: none !important; +} +.text-body{ + margin: 0; + font-size: 14px; /* 원래 크기 */ + line-height: 20px; + color: #6B7280; + white-space: normal; + overflow: visible; + text-overflow: clip; +} +.text-sm { font-size: 14px; } +.text-xs { font-size: 12px; } + +/* Layout Utilities */ +.container { + max-width: var(--container-width); + margin: 0 auto; + padding: 0 24px; +} + +.grid-cols-12 { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 24px; +} + +/* Flex Utilities */ +.flex { display: flex; } +.flex-col { flex-direction: column; } +.items-center { align-items: center; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.gap-1 { gap: 4px; } +.gap-2 { gap: 8px; } +.gap-3 { gap: 12px; } +.gap-4 { gap: 16px; } + +/* Components */ + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-pill); + font-weight: 600; + transition: all var(--transition-base); + cursor: pointer; +} + +.btn-primary { + background-color: var(--color-accent-blue); + color: white; + padding: 12px 24px; +} + +.btn-primary:hover { + background-color: var(--color-accent-blue-hover); + transform: translateY(-1px); + box-shadow: var(--shadow-md); +} + +.btn-ghost { + color: var(--color-text-primary); + padding: 8px 16px; +} + +.btn-ghost:hover { + color: var(--color-accent-blue); + background-color: var(--color-bg-tint); +} + +/* Header */ +.site-header { + position: sticky; + top: 0; + z-index: 50; + background-color: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--color-border); + height: var(--header-height-desktop); + transition: height 0.3s ease; +} + +.site-header.scrolled { + height: var(--header-height-scroll); +} + +.nav-link { + font-size: 17px; + font-weight: 600; + color: var(--color-text-primary); +} + +.nav-link:hover { + color: var(--color-accent-blue); +} + +.search-bar{ + position: relative; + flex: 0 1 300px; /* 기본 360, 필요하면 줄어듦 */ + max-width: 300px; /* 상한 */ + min-width: 220px; /* 너무 작아지지 않게 */ + width: auto; +} + +.search-input { + width: 100%; + height: 44px; + padding: 0 48px 0 20px; + border: 1px solid var(--color-border); + border-radius: var(--radius-pill); + background-color: #F3F4F6; + font-size: 15px; + transition: all 0.2s; +} +/*.search-input{ + height: 40px; + padding: 0 44px 0 16px; + font-size: 14px; +}*/ + +.search-input:focus { + outline: none; + border-color: var(--color-accent-blue); + background-color: white; + box-shadow: 0 0 0 2px var(--color-bg-tint); +} + +.search-icon { + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + color: var(--color-text-secondary); +} + +/* Hero Carousel */ +.hero-slider { + position: relative; + overflow: hidden; + height: 400px; + background-color: var(--color-bg-section); +} + +.hero-track { + display: flex; + height: 100%; + transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); +} + +.hero-slide { + min-width: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 0 24px; +} + +.hero-content { + max-width: 1000px; + width: 100%; + text-align: left; +} + +.hero-title { + font-size: 40px; + font-weight: 800; + margin-bottom: 16px; + color: var(--color-text-primary); +} + +.hero-desc { + font-size: 18px; + color: var(--color-text-secondary); + margin-bottom: 32px; +} + +.dots-container { + position: absolute; + bottom: 24px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 8px; +} + +.dot { + width: 10px; + height: 10px; + border-radius: 50%; + background-color: rgba(0,0,0,0.2); + cursor: pointer; + transition: all 0.2s; +} + +.dot.active { + background-color: var(--color-accent-blue); + transform: scale(1.2); +} + +/* Quick Categories */ +.category-chips { + display: flex; + gap: 12px; + padding: 32px 0; + overflow-x: auto; + scrollbar-width: none; /* Firefox */ +} +.category-chips::-webkit-scrollbar { + display: none; +} + +.chip { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + border: 1px solid var(--color-border); + border-radius: var(--radius-pill); + white-space: nowrap; + font-weight: 500; + font-size: 15px; + color: var(--color-text-primary); + background-color: white; + transition: all 0.2s; +} + +.chip:hover { + border-color: var(--color-accent-blue); + background-color: var(--color-bg-tint); + color: var(--color-accent-blue); +} + +/* Product Card */ +.product-card { + border: 1px solid var(--color-border); + border-radius: var(--radius-card); + overflow: hidden; + background: white; + transition: all 0.2s ease-out; + height: 100%; + display: flex; + flex-direction: column; + position: relative; + cursor: pointer; +} + +.product-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); + border-color: #BFDBFE; +} + +.card-thumb { + width: 100%; + height: 190px; + aspect-ratio: auto; + background-color: #F3F4F6; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.card-thumb-s { + width: 100%; + height: 170px; + aspect-ratio: auto; + background-color: #F3F4F6; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.card-body { + padding: 16px; + flex: 1; + display: flex; + flex-direction: column; +} + +.card-title { + font-size: 16px; + font-weight: 600; + margin-bottom: 8px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + color: var(--color-text-primary); + height: 20px; /* Fixed for 2 lines */ +} + +.card-price-area { + margin-top: auto; +} + +.price-row{ + display:flex; + align-items: center; + justify-content: space-between; /* 좌/우 분리 */ + gap: 10px; +} + +.discount{ + display:inline-flex; + align-items:center; + height: 26px; + padding: 0 10px; + border-radius: 9999px; + background: #EFF6FF; /* 연한 블루 */ + border: 1px solid #BFDBFE; + color: var(--color-accent-blue); + font-weight: 800; + font-size: 13px; + letter-spacing: -0.2px; + flex: 0 0 auto; +} + +.price{ + font-size: 18px; + font-weight: 800; + line-height: 1; + color: #111827; + white-space: nowrap; +} + +.original-price{ + margin-left: auto; /* ✅ 여기서 오른쪽으로 밀어줌 */ + text-decoration: line-through; + color: var(--color-text-tertiary); + font-size: 13px; + line-height: 1; + white-space: nowrap; +} + +.original-price + .price{ + margin-left: 10px; +} + +.payment-badge{ + display: inline; + padding: 0; + border: 0; + background: transparent; + + font-size: 11px; + font-weight: 700; + letter-spacing: .2px; + color: #94A3B8; /* 아주 옅게 */ + text-transform: uppercase; +} + +.payment-badge + .payment-badge::before{ + content: "·"; + margin: 0 6px; + color: #CBD5E1; + font-weight: 900; +} + +.payment-badge:last-child{ + color: #2563EB; /* 블루 포인트 */ +} + +.card-price-area .payment-badge:first-child{ + display: inline-block; + margin-top: 8px; /* 메타라인은 아래로 내려오게 */ +} + +/* Sections */ +.section{ + padding: 25px 0; /* 더 타이트 */ +} +.section + .section{ + padding-top: 16px; /* 섹션 사이 과한 간격 제거 */ +} + +.section-header{ + margin-bottom: 10px; +} + +.section-title{ + display: flex !important; + align-items: center !important; + gap: 12px !important; + flex-wrap: nowrap !important; + min-width: 0 !important; +} + +.section-title .text-h2{ + margin: 0 !important; + font-size: 22px !important; + line-height: 22px !important; + font-weight: 800 !important; + color: #111827 !important; + + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: clip !important; + flex: 0 0 auto !important; +} +.section-title .text-h2::before{ + content: none !important; +} +.section-title .text-body{ + margin: 0 !important; + font-size: 14px !important; + line-height: 20px !important; + color: #6B7280 !important; + + min-width: 0 !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: clip !important; + flex: 1 1 auto !important; +} + +.section-title p { + color: var(--color-text-secondary); +} + +/* Snap Carousel (Monthly Deals) */ +.snap-carousel{ + display:flex; + gap:16px; + overflow-x:auto; + overflow-y:hidden; + -webkit-overflow-scrolling: touch; + padding-bottom: 8px; + padding-top: 8px; +} +.snap-carousel > *{ + scroll-snap-align: start; /* 원치 않으면 삭제 */ + flex: 0 0 auto; +} + +.snap-carousel::-webkit-scrollbar{ height: 8px; } +.snap-carousel::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 999px; } + +.snap-item{ + flex: 0 0 280px; +} + +#popular .snap-item{ + flex-basis: 200px; +} + +.snap-carousel{ + scrollbar-width: thin; /* Firefox */ +} +.snap-carousel::-webkit-scrollbar{ + height: 8px; +} +.snap-carousel::-webkit-scrollbar-thumb{ + background: rgba(0,0,0,.15); + border-radius: 999px; +} +.snap-carousel::-webkit-scrollbar-track{ + background: transparent; +} + + +/* Filter Tabs */ +.filter-tabs { + display: flex; + gap: 8px; + justify-content: center; + margin-bottom: 32px; +} + +.tab-btn { + padding: 10px 20px; + border: 1px solid var(--color-border); + border-radius: var(--radius-pill); + background: white; + color: var(--color-text-secondary); + font-weight: 500; + transition: all 0.18s; +} + +.tab-btn.active { + background-color: var(--color-accent-blue); + color: white; + border-color: var(--color-accent-blue); + box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2); +} + +.tab-btn:hover:not(.active) { + background-color: #F9FAFB; + border-color: #D1D5DB; +} + +/* Footer */ +.site-footer { + background-color: var(--color-footer-bg); + color: var(--color-footer-text); + padding: 60px 0 40px; + margin-top: 80px; +} + +.footer-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 40px; +} + +.footer-link { + display: block; + margin-bottom: 12px; + color: #9CA3AF; +} + +.footer-link:hover { + color: white; +} + +.auth-buttons{ + white-space: nowrap; + flex: 0 0 auto; +} + +.nav-link--exchange{ + padding: 8px 12px; + border-radius: 9999px; + background: var(--color-bg-tint); + border: 1px solid #BFDBFE; + color: var(--color-accent-blue); + font-weight: 700; +} + +.nav-link--exchange:hover{ + background: var(--color-accent-blue); + border-color: var(--color-accent-blue); + color: #fff; +} + +/* Hashtag chips */ +.tag-chips{ + display:flex; + flex-wrap:wrap; + gap:10px; + margin-top: 8px; + margin-bottom: 12px; +} + +.tag-chip{ + display:inline-flex; + align-items:center; + height:36px; + padding:0 14px; + border-radius:9999px; + border:1px solid #E5E7EB; + background:#FFFFFF; + color:#111827; + font-weight:700; + font-size:13px; + letter-spacing:0.2px; + text-decoration:none; + transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; +} + +.tag-chip:hover{ + transform: translateY(-1px); + background:#EFF6FF; + border-color:#93C5FD; + color:#2563EB; +} + +/* 선택적으로 상위 4개만 컬러 포인트 */ +.tag-blue{ background:#EFF6FF; border-color:#93C5FD; color:#1D4ED8; } +.tag-violet{ background:#F5F3FF; border-color:#DDD6FE; color:#6D28D9; } +.tag-green{ background:#ECFDF5; border-color:#A7F3D0; color:#047857; } +.tag-sky{ background:#F0F9FF; border-color:#BAE6FD; color:#0369A1; } + + +@media (max-width: 480px) { + .logo-img{ + height: 34px; /* 모바일에선 낮춰서 공간 확보 */ + } + + .logo{ + margin-right: 8px; /* 여백 줄이기 */ + } + + /* ✅ 검색폼 거의 풀폭 */ + .search-bar{ + margin: 0 !important; /* 양쪽 여백 제거 */ + flex: 1 1 auto; + max-width: none; + min-width: 0; + } + + .search-bar form{ width: 100%; } + .search-input{ + width: 100%; + padding-left: 14px; + padding-right: 44px; + } + + .tag-chips{ + gap:8px; + margin-right: -12px; /* 컨테이너 패딩 보정 원하면 */ + padding-right: 12px; + } + .tag-chip{ + height:34px; + padding:0 12px; + font-size:12.5px; + } + + .section-title .text-h2{ font-size: 15px !important; } + .section-title .text-body{ font-size: 13px !important; } + + .text-body{ + display: none; + } +} + + + +/* Mobile Breakpoint */ +@media (max-width: 768px) { + :root { + --header-height-desktop: 60px; + } + + .grid-cols-12 { + grid-template-columns: repeat(4, 1fr); + gap: 16px; + } + + .hero-title { font-size: 28px; } + +/* .search-bar { + display: none; !* Handle mobile search differently *! + }*/ + + .footer-grid { + grid-template-columns: 1fr; + gap: 32px; + } + + .category-chips, .snap-carousel { + margin-right: -24px; + padding-right: 24px; + } +} +/* ===== Footer: modern & clean (light) ===== */ +.site-footer{ + background:#F8FAFC; + border-top: 1px solid #E5E7EB; + padding: 44px 0 28px; + margin-top: 48px; + color:#0F172A; +} + +.footer-top{ + display:grid; + grid-template-columns: 1.2fr 0.8fr 1fr 1fr; + gap: 28px; + align-items:start; +} + +.footer-title{ + font-size: 13px; + font-weight: 800; + margin-bottom: 12px; + color:#0F172A; +} + +.footer-brand-logo{ display:inline-flex; align-items:center; } +.footer-logo-img{ height: 50px; width:auto; display:block; } + +.footer-desc{ + margin-top: 10px; + font-size: 13px; + line-height: 1.6; + color:#64748B; +} + +.footer-copy{ + margin-top: 14px; + font-size: 12px; + color:#94A3B8; +} + +.footer-link-list{ display:flex; flex-direction:column; gap: 10px; } +.footer-link{ + color:#475569; + font-size: 13px; +} +.footer-link:hover{ color:#2563EB; } +.footer-link-strong{ font-weight: 800; color:#111827; } + +/* contact KV */ +.footer-kv{ display:flex; flex-direction:column; gap: 10px; } +.footer-kv-row{ + display:grid; + grid-template-columns: 72px 1fr; + gap: 10px; + font-size: 13px; + color:#475569; +} +.footer-k{ color:#94A3B8; } +.footer-v{ color:#334155; } + +/* payment */ +.footer-payment-col .footer-payment{ + display:flex; + flex-direction:column; + gap: 8px; +} +.footer-payment--mt{ margin-top: 14px; } + +.footer-pay-img{ + width:auto; + max-width: 100%; + height:auto; + display:block; +} + +.footer-pay-caption{ + font-size: 12px; + color:#64748B; +} + +/* divider */ +.footer-divider{ + height:1px; + background:#E5E7EB; + margin: 24px 0 16px; +} + +/* bottom details */ +.footer-details{ + background:#FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 14px; + padding: 12px 14px; +} + +.footer-summary{ + cursor:pointer; + font-size: 13px; + font-weight: 800; + color:#111827; + display:flex; + align-items:center; + justify-content:space-between; + gap: 12px; + list-style:none; +} + +.footer-summary::-webkit-details-marker{ display:none; } + +.footer-summary-hint{ + font-size: 12px; + font-weight: 700; + color:#2563EB; +} + +.footer-details[open] .footer-summary-hint{ + color:#64748B; +} + +.footer-info{ + margin-top: 12px; + display:grid; + gap: 8px; +} + +.footer-info-row{ + display:grid; + grid-template-columns: 130px 1fr; + gap: 12px; + font-size: 12.5px; + color:#475569; +} +.footer-info-row span{ color:#94A3B8; } +.footer-info-row b{ color:#334155; font-weight:700; } + +/* responsive */ +@media (max-width: 1024px){ + .footer-top{ + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 560px){ + .footer-top{ + grid-template-columns: 1fr; + gap: 20px; + } + .footer-info-row{ + grid-template-columns: 1fr; + gap: 4px; + } +} + +/* ===== Support strip (refined) ===== */ +.section--support{ padding: 10px 0 8px; } + +.support-grid{ + display:grid; + grid-template-columns: 1.45fr 1fr; + gap: 12px; + align-items: stretch; +} + +/* Notice panel */ +.notice-panel{ + background:#FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 16px; + padding: 12px 14px; /* ✅ 여백 축소 */ + box-shadow: 0 1px 2px rgba(15,23,42,.04); +} + +.notice-head{ + display:flex; + align-items:center; + justify-content:space-between; + gap: 10px; + margin-bottom: 6px; /* ✅ 타이트 */ +} + +.notice-title{ + font-size: 13px; + font-weight: 900; + color:#0F172A; + letter-spacing: -0.2px; + margin:0; +} + +.notice-more{ + font-size: 12px; + font-weight: 900; + color:#2563EB; + padding: 6px 8px; + border-radius: 10px; +} +.notice-more:hover{ background:#EFF6FF; } + +.notice-list{ + display:grid; +} + +/* ✅ 공지 사이 얇은 줄 */ +.notice-item + .notice-item{ + border-top: 1px solid #EEF2F7; +} + +.notice-link{ + display:grid; + grid-template-columns: 44px 1fr auto; + align-items:center; + gap: 10px; + padding: 10px 2px; /* ✅ 줄간격/여백 축소 */ + border-radius: 10px; + transition: background-color .16s ease; +} +.notice-link:hover{ background:#F8FAFC; } + +.notice-badge{ + display:inline-flex; + align-items:center; + justify-content:center; + height: 20px; + padding: 0 9px; + border-radius: 9999px; + font-size: 11px; + font-weight: 900; + color:#1D4ED8; + background:#EFF6FF; + border: 1px solid #BFDBFE; +} + +.notice-badge--info{ + color:#334155; + background:#F1F5F9; + border-color:#E2E8F0; +} + +.notice-text{ + font-size: 13px; + font-weight: 700; + color:#334155; + white-space: nowrap; + overflow:hidden; + text-overflow: ellipsis; +} + +.notice-date{ + font-size: 12px; + color:#94A3B8; + white-space: nowrap; +} + +/* Banners */ +.support-banners{ + display:grid; + gap: 10px; +} + +.support-banner{ + position: relative; + overflow: hidden; + border-radius: 16px; + border: 1px solid #E5E7EB; + padding: 14px 14px; /* ✅ 타이트 */ + background: #FFFFFF; + box-shadow: 0 1px 2px rgba(15,23,42,.04); + transition: transform .16s ease, border-color .16s ease; +} +.support-banner:hover{ + transform: translateY(-1px); + border-color: #BFDBFE; +} + +/* ✅ “배경 이미지 느낌” (그라데이션 없이, 패턴/하이라이트) */ +.support-banner::before{ + content:""; + position:absolute; + inset: -40px -60px auto auto; + width: 220px; + height: 220px; + border-radius: 9999px; + background: rgba(37, 99, 235, 0.08); + filter: blur(0); + transform: rotate(15deg); +} +.support-banner::after{ + content:""; + position:absolute; + inset:auto -40px -40px auto; + width: 180px; + height: 120px; + border-radius: 9999px; + background: rgba(2, 132, 199, 0.06); +} + +.support-banner--qna::before{ + background: rgba(37, 99, 235, 0.10); +} +.support-banner--guide::before{ + background: rgba(15, 23, 42, 0.06); +} +.support-banner--guide::after{ + background: rgba(37, 99, 235, 0.05); +} + +.support-banner > *{ position: relative; z-index: 1; } + +.support-banner-title{ + font-size: 14px; + font-weight: 900; + color:#0F172A; + letter-spacing: -0.2px; +} + +.support-banner-desc{ + margin-top: 6px; + font-size: 12.5px; + line-height: 1.5; + color:#64748B; +} + +.support-banner-cta{ + margin-top: 10px; + font-size: 12px; + font-weight: 900; + color:#2563EB; +} + +/* responsive */ +@media (max-width: 1024px){ + .support-grid{ grid-template-columns: 1fr; } + .support-banners{ grid-template-columns: 1fr 1fr; } +} +@media (max-width: 560px){ + .support-banners{ grid-template-columns: 1fr; } + .notice-link{ grid-template-columns: 44px 1fr; } + .notice-date{ display:none; } +} +/* ===== Subpage Skeleton ===== */ +.subpage-wrap{ padding: 18px 0 26px; } + +.subpage-header{ + display:flex; + align-items: baseline; + justify-content: space-between; + gap: 12px; + margin: 0px 0 16px; + padding-left:8px; +} +.subpage-title{ + font-size: 18px; + font-weight: 900; + letter-spacing: -0.3px; + color:#0F172A; +} +.subpage-desc{ + font-size: 13px; + color:#64748B; + white-space: nowrap; + overflow:hidden; + text-overflow: ellipsis; + max-width: 55%; +} + +.breadcrumb{ margin-top: 6px; } +.breadcrumb-list{ + display:flex; + gap: 8px; + flex-wrap: wrap; + font-size: 12px; + color:#94A3B8; +} +.breadcrumb-item::after{ + content:"/"; + margin-left: 8px; + color:#CBD5E1; +} +.breadcrumb-item:last-child::after{ content:none; } +.breadcrumb-link{ color:#64748B; } +.breadcrumb-link:hover{ color:#2563EB; } +.breadcrumb-current{ color:#475569; font-weight:700; } + +.subpage-grid{ + display:grid; + grid-template-columns: 260px 1fr; + gap: 14px; + align-items: start; +} + +.subpage-tabs{ display:none; } + +.subpage-side{ position: sticky; top: 90px; } + +.content-card{ + background:#FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 16px; + padding: 16px; + box-shadow: 0 1px 2px rgba(15,23,42,.04); +} + +/* side nav */ +.subnav--side .subnav-list{ + background:#FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 16px; + padding: 10px; + display:grid; + gap: 6px; +} +.subnav-link{ + display:flex; + align-items:center; + height: 40px; + padding: 0 12px; + border-radius: 12px; + font-size: 13px; + font-weight: 800; + color:#334155; +} +.subnav-link:hover{ background:#F8FAFC; } +.subnav-link.is-active{ + background:#EFF6FF; + border: 1px solid #BFDBFE; + color:#1D4ED8; +} + +/* mobile tabs */ +.subnav--tabs{ + display:flex; + gap: 8px; + overflow-x: auto; + scrollbar-width: none; + padding-bottom: 6px; +} +.subnav--tabs::-webkit-scrollbar{ display:none; } + +.subnav-tab{ + flex: 0 0 auto; + height: 36px; + padding: 0 14px; + border-radius: 9999px; + border: 1px solid #E5E7EB; + background:#FFFFFF; + font-size: 12.5px; + font-weight: 900; + color:#334155; +} +.subnav-tab:hover{ background:#F8FAFC; } +.subnav-tab.is-active{ + background:#EFF6FF; + border-color:#BFDBFE; + color:#1D4ED8; +} + +/* notice sample page */ +.list-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; } +.list-title{ font-size: 14px; font-weight: 900; color:#0F172A; margin:0; } +.list-desc{ font-size: 12.5px; color:#64748B; margin-top: 4px; } +.list-head{ + display:flex; + align-items: baseline; + justify-content: space-between; + gap: 12px; + margin-bottom: 10px; +} + +.list-title{ + margin: 0; +} + +.list-desc{ + margin: 0; + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 60%; + font-size: 12.5px; color:#64748B; +} + +@media (max-width: 560px){ + .list-desc{ display:none; } /* 모바일은 깔끔하게 */ +} + + +.notice-list2{ display:grid; } +.notice-list2 li + li{ border-top: 1px solid #EEF2F7; } +.notice-list2 a{ + display:grid; + grid-template-columns: 54px 1fr auto; + gap: 10px; + align-items:center; + padding: 12px 6px; + border-radius: 12px; +} +.notice-list2 a:hover{ background:#F8FAFC; } + +.n2-tag{ + height: 20px; + display:inline-flex; + align-items:center; + justify-content:center; + padding: 0 10px; + border-radius: 9999px; + font-size: 11px; + font-weight: 900; + background:#EFF6FF; + border:1px solid #BFDBFE; + color:#1D4ED8; +} +.n2-tag--info{ + background:#F1F5F9; + border-color:#E2E8F0; + color:#334155; +} +.n2-text{ + font-size: 13px; + font-weight: 800; + color:#334155; + white-space: nowrap; + overflow:hidden; + text-overflow: ellipsis; +} +.n2-date{ font-size: 12px; color:#94A3B8; white-space: nowrap; } + +.n2s-text{ + font-size: 13px; + font-weight: 600; + color: #2a3647; + white-space: nowrap; + overflow:hidden; + text-overflow: ellipsis; +} + +@media (max-width: 1024px){ + .subpage-grid{ grid-template-columns: 1fr; } + .subpage-side{ display:none; } + .subpage-tabs{ display:block; } + .subpage-desc{ max-width: 100%; } +} +@media (max-width: 560px){ + .notice-list2 a{ grid-template-columns: 54px 1fr; } + .n2-date{ display:none; } +} + +/* ===== Sub Hero (compact rolling banner) ===== */ +.subhero{ + margin: 8px 0 10px; +} +.subhero-inner{ + position: relative; + overflow: hidden; + border-radius: 16px; + border: 1px solid #E5E7EB; + background: #F8FAFC; + height: 160px; /* ✅ 메인보다 낮게 */ +} +.subhero-track{ + display:flex; + height: 100%; + transition: transform .45s cubic-bezier(.25,1,.5,1); +} +.subhero-slide{ + min-width: 100%; + height: 100%; + background-image: var(--bg); + background-size: cover; + background-position: center; + position: relative; +} +.subhero-slide::after{ + content:""; + position:absolute; inset:0; + background: rgba(255,255,255,.72); /* ✅ 과하지 않게 텍스트 가독 */ +} +.subhero-content{ + position: relative; + z-index: 1; + height: 100%; + padding: 18px 18px; + display:flex; + flex-direction: column; + justify-content: center; + max-width: 720px; +} +.subhero-kicker{ + font-size: 11px; + font-weight: 900; + letter-spacing: .8px; + color: #2563EB; +} +.subhero-title{ + margin-top: 6px; + font-size: 20px; + font-weight: 900; + color:#0F172A; + letter-spacing: -0.3px; +} +.subhero-desc{ + margin-top: 6px; + font-size: 13px; + color:#64748B; +} +.subhero-cta{ + margin-top: 10px; + display:inline-flex; + align-items:center; + height: 34px; + padding: 0 12px; + border-radius: 9999px; + border: 1px solid #BFDBFE; + background: #EFF6FF; + color:#1D4ED8; + font-size: 12.5px; + font-weight: 900; + width: fit-content; +} +.subhero-cta:hover{ background:#2563EB; border-color:#2563EB; color:#fff; } + +.subhero-arrow{ + position:absolute; top:50%; + transform: translateY(-50%); + width: 34px; height: 34px; + border-radius: 9999px; + border: 1px solid #E5E7EB; + background: rgba(255,255,255,.9); + font-size: 20px; + font-weight: 900; + color:#0F172A; +} +.subhero-arrow.prev{ left: 10px; } +.subhero-arrow.next{ right: 10px; } + +.subhero-dots{ + position:absolute; bottom: 10px; left: 50%; + transform: translateX(-50%); + display:flex; gap: 6px; +} +.subhero-dot{ + width: 7px; height: 7px; + border-radius: 9999px; + background: rgba(15,23,42,.18); +} +.subhero-dot.active{ background:#2563EB; transform: scale(1.2); } +/* ===== Notice toolbar (no duplicate nav) ===== */ +.notice-toolbar{ + display:flex; + align-items:flex-start; + justify-content:space-between; + gap: 12px; + margin: 6px 0 14px; + padding: 12px 12px; + border: 1px solid #E5E7EB; + border-radius: 16px; + background: #FFFFFF; + box-shadow: 0 1px 2px rgba(15,23,42,.04); +} + +.nt-left{ + min-width: 0; + display:flex; + flex-direction:column; + gap: 8px; +} + +.nt-pill{ + width: fit-content; + height: 22px; + padding: 0 10px; + border-radius: 9999px; + background: #EFF6FF; + border: 1px solid #BFDBFE; + color: #1D4ED8; + font-size: 11px; + font-weight: 900; +} + +.nt-meta{ + font-size: 12.5px; + color: #64748B; + line-height: 1.45; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 520px; +} + +.nt-right{ + display:flex; + flex-direction:column; + gap: 10px; + align-items:flex-end; +} + +.nt-search{ + display:flex; + align-items:center; + gap: 8px; +} + +.nt-search input{ + width: 280px; + height: 38px; + padding: 0 12px; + border-radius: 9999px; + border: 1px solid #E5E7EB; + background: #F3F4F6; + font-size: 13px; +} +.nt-search input:focus{ + outline: none; + border-color: #2563EB; + background: #FFFFFF; + box-shadow: 0 0 0 2px #EFF6FF; +} + +.nt-search button{ + height: 38px; + padding: 0 12px; + border-radius: 9999px; + background: #2563EB; + color:#fff; + font-size: 13px; + font-weight: 900; + border: 1px solid #2563EB; +} + +.nt-filters{ + display:flex; + gap: 8px; + flex-wrap: wrap; + justify-content:flex-end; +} + +.nt-chip{ + height: 32px; + padding: 0 12px; + border-radius: 9999px; + border: 1px solid #E5E7EB; + background: #FFFFFF; + color: #334155; + font-size: 12.5px; + font-weight: 900; +} +.nt-chip:hover{ background:#F8FAFC; } + +.nt-chip.is-active{ + background:#EFF6FF; + border-color:#BFDBFE; + color:#1D4ED8; +} + +@media (max-width: 1024px){ + .notice-toolbar{ flex-direction:column; align-items:stretch; } + .nt-meta{ max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; } + .nt-right{ align-items:stretch; } + .nt-search input{ width: 100%; } + .nt-filters{ justify-content:flex-start; } +} + +/* ===== Hero variants ===== */ +.hero-slider{ position: relative; overflow: hidden; background: var(--color-bg-section); } +.hero-slider--main{ height: 400px; } +.hero-slider--compact{ height: 170px; border-radius: 16px; border: 1px solid #E5E7EB; margin: 14px 0 18px; } + +/* track/slide 동일 */ +.hero-track{ display:flex; height:100%; transition: transform 0.5s cubic-bezier(0.25,1,0.5,1); } +.hero-slide{ min-width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding: 0 24px; } + +.hero-content{ max-width: var(--container-width); width:100%; text-align:left; padding: 0 8px; } + +/* ✅ compact에서 타이포/여백만 줄이기 */ +.hero-slider--compact .hero-slide{ padding: 0 18px; } +.hero-slider--compact .hero-title{ font-size: 22px; margin-bottom: 6px; } +.hero-slider--compact .hero-desc{ font-size: 13px; margin-bottom: 10px; } +.hero-slider--compact .btn.hero-cta{ padding: 8px 14px; font-size: 13px; } + +/* ✅ 왼쪽/오른쪽 화살표 버튼이 컨텐츠를 가리지 않게 여백 확보 */ +.slider-arrow{ + position:absolute; top:50%; transform: translateY(-50%); + width: 34px; height: 34px; + border-radius: 9999px; + border: 1px solid #E5E7EB; + background: rgba(255,255,255,.9); + font-size: 20px; font-weight: 900; + display:flex; align-items:center; justify-content:center; + z-index: 5; +} +.slider-arrow.prev{ left: 10px; } +.slider-arrow.next{ right: 10px; } + +/* ✅ 컨텐츠 좌우 패딩(화살표 영역만큼) */ +.hero-slider--compact .hero-content{ padding-left: 44px; padding-right: 44px; } + +/* dots */ +.dots-container{ position:absolute; bottom: 12px; left:50%; transform: translateX(-50%); display:flex; gap: 8px; z-index:5; } +.dot{ width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.18); } +.dot.active{ background: var(--color-accent-blue); transform: scale(1.15); } + +@media (max-width: 768px){ + .hero-slider--compact{ height: 150px; } + .hero-slider--compact .hero-content{ padding-left: 14px; padding-right: 14px; } /* 모바일에선 화살표가 위에 떠도 괜찮게 */ + .slider-arrow{ display:none; } /* 모바일은 스와이프/도트로만 */ +} +.subpage-wrap .hero-slider--compact{ + margin-top: 14px; + margin-bottom: 16px; +} + +/* ===== List Head (section heading) ===== */ +.list-head{ + display:flex; + align-items: baseline; + justify-content: space-between; + gap: 12px; + margin: 6px 0 12px; + + /* 은은한 구획감: 라인 + 여백만 */ + padding-bottom: 8px; + border-bottom: 1px solid #EEF2F7; +} + +.list-title{ + margin: 0; + font-size: 16px; /* 과하게 크지 않게 */ + font-weight: 900; + letter-spacing: -0.2px; + color: #0F172A; + line-height: 1.2; +} + +.list-desc{ + margin: 0; + font-size: 13px; + color: #64748B; + line-height: 1.2; + + /* 우측 정렬 + 길면 깔끔하게 처리 */ + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 60%; +} + +/* 모바일은 설명 숨기고 더 타이트하게 */ +@media (max-width: 560px){ + .list-head{ padding-bottom: 6px; margin: 4px 0 10px; } + .list-title{ font-size: 15px; } + .list-desc{ display:none; } +} + +/* ===== CS Tabs ===== */ +.cs-tabs{ + display:flex; + gap: 8px; + flex-wrap: wrap; + margin: 10px 0 14px; +} +.cs-tab{ + height: 34px; + padding: 0 14px; + border-radius: 9999px; + border: 1px solid #E5E7EB; + background:#fff; + font-size: 13px; + font-weight: 800; + color:#334155; +} +.cs-tab:hover{ background:#F8FAFC; } +.cs-tab.is-active{ + background:#EFF6FF; + border-color:#BFDBFE; + color:#1D4ED8; +} + +/* Side menu header */ +.subnav-head{ + padding: 16px 16px 10px; +} +.subnav-title{ + font-size: 19px; + font-weight: 800; + line-height: 1.2; + color: #001280; +} +.subnav-subtitle{ + margin-top: 6px; + font-size: 12px; + opacity: .7; +} +.subnav-divider{ + height: 1px; + margin: 0 16px 10px; + background: rgba(0,0,0,.08); +} + +/* ✅ 박스 자체 */ +.subnav--side .subnav-box{ + background: #fff; + border: 1px solid rgba(0,0,0,.08); + border-radius: 16px; + padding: 0; /* 헤더/리스트에서 패딩 관리 */ + overflow: hidden; /* 라운드 안쪽 정리 */ +} + +/* 기존 ul이 박스 역할을 하고 있었다면: ul은 이제 투명하게 */ +.subnav--side .subnav-list{ + margin: 0; + padding: 12px; /* 메뉴 영역 패딩 */ + list-style: none; + background: transparent; + border: 0; +} + +/* 헤더 */ +.subnav--side .subnav-head{ + padding: 16px 16px 10px; +} +.subnav--side .subnav-title{ + font-size: 18px; + font-weight: 800; + line-height: 1.2; +} +.subnav--side .subnav-subtitle{ + margin-top: 6px; + font-size: 12px; + opacity: .7; +} +.subnav--side .subnav-divider{ + height: 1px; + margin: 0 16px; + background: rgba(0,0,0,.08); +} + +/* subpage hero compact */ +.hero--compact{ + padding: 14px 0; +} +.hero--compact .hero-inner{ + min-height: 160px; /* 데스크탑 */ +} +@media (max-width: 768px){ + .hero--compact .hero-inner{ min-height: 120px; } +} + +.hero--compact h2, +.hero--compact .hero-title{ + font-size: 18px; + line-height: 1.25; +} + +.hero--compact .hero-desc{ + font-size: 12px; + opacity: .85; +} + +/* 서브에서는 CTA 과하면 지저분해져서 숨기거나 1개만 */ +.hero--compact .hero-actions .btn-secondary, +.hero--compact .hero-badges{ + display:none; +} +.cs-quick__bar{ + margin: 12px 0 14px; + padding: 10px 12px; + border-radius: 12px; + background: rgba(0,0,0,.04); + font-size: 12px; +} +.cs-quick__grid{ + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 10px; +} +@media (max-width: 768px){ + .cs-quick__grid{ grid-template-columns: 1fr; } +} +.cs-quick__card{ + display:block; + padding: 14px 14px; + border:1px solid rgba(0,0,0,.08); + border-radius: 14px; + background:#fff; + text-decoration:none; +} +.cs-quick__title{ font-weight: 800; } +.cs-quick__desc{ margin-top:6px; font-size: 12px; opacity:.75; } + +/* ===== Footer: Coupang-like ===== */ +.site-footer{ border-top:1px solid rgba(0,0,0,.08); background:#fff; } + +.footer-topbar{ + border-bottom:1px solid rgba(0,0,0,.08); + background:#fff; +} +.footer-topbar__inner{ + display:flex; + align-items:center; + justify-content:space-between; + gap:16px; + padding:0px 23px 20px; +} +.footer-topbar__nav{ + display:flex; + flex-wrap:wrap; + align-items:center; + gap:10px; + font-size:12px; + color:#111; +} +.footer-topbar__link{ + text-decoration:none; + color:inherit; + opacity:.85; +} +.footer-topbar__link:hover{ opacity:1; text-decoration:underline; } +.footer-topbar__link--strong{ font-weight:800; opacity:1; } +.footer-topbar__sep{ opacity:.35; } + +.footer-site-select{ + height:32px; + padding:0 10px; + border:1px solid rgba(0,0,0,.12); + border-radius:8px; + background:#fff; + font-size:12px; +} + +.footer-main{ padding:26px 0; } +.footer-grid{ + display:grid; + grid-template-columns: 1.35fr 1fr 1fr; + gap:24px; + align-items:start; +} +@media (max-width: 980px){ + .footer-grid{ grid-template-columns:1fr; } + .footer-topbar__inner{ flex-direction:column; align-items:flex-start; } +} + +.footer-logo-img{ height:55px; width:auto; display:block; } + +.footer-company{ + margin-top:12px; + font-size:12px; + line-height:1.6; + color:rgba(0,0,0,.78); +} +.footer-company__row{ display:flex; gap:10px; } +.footer-company__k{ min-width:160px; opacity:.75; } +.footer-company__v{ flex:1; } + +.footer-copy{ + margin-top:12px; + font-size:12px; + color:rgba(0,0,0,.6); +} + +.footer-h{ + font-size:12px; + font-weight:800; + margin-bottom:10px; + color:#111; +} + +.footer-call__num{ + font-size:26px; + font-weight:900; + letter-spacing:-.02em; + line-height:1.1; +} +.footer-call__meta{ + margin-top:6px; + font-size:12px; + color:rgba(0,0,0,.7); +} + +.footer-kv{ margin-top:14px; font-size:12px; } +.footer-kv__row{ display:flex; gap:10px; padding:4px 0; } +.footer-kv__k{ min-width:80px; opacity:.75; } +.footer-kv__v{ color:rgba(0,0,0,.85); } +.footer-link{ color:rgba(0,0,0,.85); text-decoration:none; } +.footer-link:hover{ text-decoration:underline; } +.footer-link--strong{ font-weight:800; } + +.footer-mini-links{ + display:flex; + flex-wrap:wrap; + gap:10px 14px; + font-size:12px; + margin-bottom:14px; +} + +.footer-payments{ display:flex; flex-direction:column; gap:12px; } +.footer-pay__img{ width:70px; height:auto; display:block; } +.footer-pay__img--wide{ width:180px; } +.footer-pay__cap{ margin-top:6px; font-size:12px; color:rgba(0,0,0,.65); } + +.footer-marks{ margin-top:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; } +.footer-marks img{ height:22px; width:auto; opacity:.9; } + +/* screen-reader only */ +.sr-only{ + position:absolute; width:1px; height:1px; padding:0; margin:-1px; + overflow:hidden; clip:rect(0,0,0,0); border:0; +} + +/* Policy page */ +.policy-page{ margin-top: 14px; } + +.policy-toc{ + display:flex; + flex-wrap:wrap; + gap:10px 12px; + padding:12px 14px; + border:1px solid rgba(0,0,0,.08); + border-radius:14px; + background:rgba(0,0,0,.02); + margin: 12px 0 18px; +} +.policy-toc a{ + font-size:12px; + text-decoration:none; + color:rgba(0,0,0,.8); + padding:6px 10px; + border-radius:999px; + border:1px solid rgba(0,0,0,.08); + background:#fff; +} +.policy-toc a:hover{ text-decoration:underline; } + +.policy-sec{ padding: 14px 0 8px; scroll-margin-top: 90px; } +.policy-h2{ + font-size:16px; + font-weight:900; + letter-spacing:-.02em; + margin: 8px 0 10px; +} +.policy-p{ + font-size:13px; + line-height:1.8; + color:rgba(0,0,0,.78); + margin: 0 0 10px; +} + +.policy-card{ + border:1px solid rgba(0,0,0,.08); + border-radius:16px; + padding:14px 14px; + background:#fff; + margin: 10px 0; +} +.policy-card__title{ + font-weight:700; + margin-bottom:8px; +} + +.policy-ul{ + margin: 0; + padding-left: 18px; + line-height: 1.8; + color: rgba(0,0,0,.78); +} +.policy-ul li{ margin: 4px 0; } + +.policy-badge-list{ + display:flex; + flex-wrap:wrap; + gap:8px; +} +.policy-badge{ + display:inline-flex; + align-items:center; + height:26px; + padding:0 10px; + font-size:12px; + border-radius:999px; + border:1px solid rgba(0,0,0,.10); + background:rgba(0,0,0,.02); +} + +.policy-table-wrap{ + overflow:auto; + border:1px solid rgba(0,0,0,.08); + border-radius:14px; + background:#fff; +} +.policy-table{ + width:100%; + border-collapse:separate; + border-spacing:0; + min-width: 720px; + font-size:12px; +} +.policy-table th, +.policy-table td{ + padding:10px 10px; + border-bottom:1px solid rgba(0,0,0,.08); + vertical-align:top; +} +.policy-table th{ + background:rgba(0,0,0,.03); + font-weight:800; + text-align:left; +} +.policy-table tr:last-child td{ border-bottom:0; } + +.policy-note{ + margin-top:10px; + padding:10px 12px; + border-radius:12px; + background:rgba(0,0,0,.03); + font-size:12px; + line-height:1.7; + color:rgba(0,0,0,.72); +} + +.policy-kv{ display:flex; flex-direction:column; gap:8px; } +.policy-kv__row{ display:flex; gap:10px; } +.policy-kv__row span{ min-width:90px; opacity:.75; } + +.policy-bottom{ margin-top: 14px; display:flex; justify-content:flex-end; } +.policy-top{ + display:inline-flex; + align-items:center; + justify-content:center; + height:34px; + padding:0 12px; + border-radius:10px; + border:1px solid rgba(0,0,0,.10); + text-decoration:none; + font-size:12px; + background:#fff; + color:rgba(0,0,0,.8); +} +.policy-top:hover{ text-decoration:underline; } + +.policy-ol{ + margin: 0; + padding-left: 18px; + line-height: 1.8; + color: rgba(0,0,0,.78); +} +.policy-ol > li{ margin: 6px 0; } +.policy-ol .policy-ul{ margin-top: 6px; } + +.policy-details{ border:0; } +.policy-summary{ + cursor:pointer; + font-weight:800; + list-style:none; +} +.policy-summary::-webkit-details-marker{ display:none; } + +.policy-law{ + margin-top:10px; + padding-top:10px; + border-top:1px solid rgba(0,0,0,.08); +} +.policy-card--alert{ + border-color: rgba(255, 102, 0, .25); + background: rgba(255, 102, 0, .04); +} + +/* Policy hub */ +.policy-hub{ + display:grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; +} +@media (max-width: 960px){ + .policy-hub{ grid-template-columns: 1fr; } +} + +.policy-hub__card{ + display:block; + text-decoration:none; + color: inherit; + border:1px solid rgba(0,0,0,.08); + border-radius:16px; + background:#fff; + padding:14px; + transition: transform .08s ease, box-shadow .08s ease; +} +.policy-hub__card:hover{ + transform: translateY(-1px); + box-shadow: 0 10px 24px rgba(0,0,0,.08); +} + +.policy-hub__top{ + display:flex; + align-items:center; + justify-content:space-between; + margin-bottom:10px; +} +.policy-hub__badge{ + display:inline-flex; + height:24px; + align-items:center; + padding:0 10px; + border-radius:999px; + font-size:12px; + border:1px solid rgba(0,0,0,.10); + background: rgba(0,0,0,.02); + font-weight:700; +} +.policy-hub__arrow{ + opacity:.6; + font-weight:900; +} + +.policy-hub__title{ + font-size:15px; + font-weight:900; + letter-spacing:-.02em; + margin-bottom:6px; +} +.policy-hub__desc{ + font-size:13px; + line-height:1.75; + color: rgba(0,0,0,.75); + margin-bottom:10px; +} +.policy-hub__meta{ + font-size:12px; + color: rgba(0,0,0,.6); +} + +/* ✅ Policy tables: mobile overflow fix */ +.policy-table-wrap{ + width:100%; + overflow-x:auto; + -webkit-overflow-scrolling:touch; + border:1px solid rgba(0,0,0,.08); + border-radius:12px; + background:#fff; +} + +.policy-table{ + width:100%; + border-collapse:collapse; + min-width:720px; /* 컬럼이 4개라 모바일에서 최소폭 필요 */ +} + +.policy-table th, +.policy-table td{ + padding:10px 12px; + border-bottom:1px solid rgba(0,0,0,.08); + vertical-align:top; + line-height:1.6; +} + +.policy-table th{ + background:rgba(0,0,0,.02); + font-weight:800; + white-space:nowrap; +} + +.policy-table td{ + word-break:break-word; +} + +/* 모바일에서 카드 패딩 밖으로 살짝 넓혀서 스크롤 UX 개선(선택) */ +@media (max-width: 640px){ + .policy-table-wrap{ + margin:0 -12px; + border-left:0; + border-right:0; + border-radius:0; + } +} + +/* 기본(PC/태블릿): 스크롤 테이블 */ +.policy-table-wrap{ + width:100%; + overflow-x:auto; + -webkit-overflow-scrolling:touch; + border:1px solid rgba(0,0,0,.08); + border-radius:12px; + background:#fff; +} + +.policy-table{ + width:100%; + border-collapse:collapse; + /* ⚠️ min-width를 무조건 박아두면 모바일에서 “커 보이는” 느낌이 남음 */ + /* min-width:720px; <-- 이게 들어가있다면 제거하거나 아래처럼 조건부로 */ +} + +@media (min-width: 641px){ + .policy-table{ min-width:720px; } /* 데스크톱에서만 최소폭 유지 */ +} + +.policy-table th, +.policy-table td{ + padding:10px 12px; + border-bottom:1px solid rgba(0,0,0,.08); + vertical-align:top; + line-height:1.6; +} +.policy-table th{ + background:rgba(0,0,0,.02); + font-weight:800; +} + +/* ✅ 모바일: 행을 카드처럼 쌓아서 “넘침” 자체를 제거 */ +@media (max-width: 640px){ + /* 래퍼 스크롤 제거 + 카드 형태로 */ + .policy-table-wrap{ + overflow:visible; + border:0; + border-radius:0; + background:transparent; + } + + .policy-table{ + min-width:0 !important; + } + + .policy-table thead{ display:none; } + .policy-table, + .policy-table tbody, + .policy-table tr, + .policy-table td{ + display:block; + width:100%; + } + + .policy-table tr{ + border:1px solid rgba(0,0,0,.08); + border-radius:14px; + background:#fff; + margin-bottom:10px; + overflow:hidden; + } + + .policy-table td{ + border:0; + border-top:1px solid rgba(0,0,0,.06); + padding:10px 12px; + display:flex; + gap:10px; + align-items:flex-start; + } + + .policy-table td:first-child{ + border-top:0; + } + + .policy-table td::before{ + content: attr(data-label); + flex:0 0 92px; + font-weight:900; + color: rgba(0,0,0,.65); + } + + .policy-table td{ + overflow-wrap:anywhere; + word-break:break-word; + } +} + +/* (안전장치) 카드 안에서 가로 넘침 방지 */ +.content-card{ overflow-x:hidden; } diff --git a/resources/views/web/company/footer.blade.php b/resources/views/web/company/footer.blade.php index b5cfb72..c44db94 100644 --- a/resources/views/web/company/footer.blade.php +++ b/resources/views/web/company/footer.blade.php @@ -1,100 +1,134 @@ -