/* ========================================================================== Skinlab — Bootstrap 5.3 override Bootstrap 5.3.3 CSS 뒤에 로드하세요. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Theme tokens (Bootstrap CSS 변수 재정의) -------------------------------------------------------------------------- */ :root { --bs-ink: #14130f; --bs-ink-2: #5f5e59; --bs-ink-3: #7d7b75; --bs-muted: #9b9b96; --bs-muted-2: #b3b3ae; --bs-line: #ececec; --bs-line-2: #f2f2f1; --bs-surface: #f7f7f6; --bs-brand: #c4472c; --bs-brand-soft: #fdf6f3; --bs-brand-line: #f0e3dd; --bs-brand-tint: #f4ece9; --bs-radius: 16px; --bs-radius-lg: 22px; --bs-sidebar-w: 280px; --bs-content-max: 1380px; --bs-primary: #c4472c; --bs-primary-rgb: 196, 71, 44; --bs-body-color: #14130f; --bs-body-bg: #ffffff; --bs-body-font-family: "IBM Plex Sans KR", system-ui, -apple-system, sans-serif; --bs-body-font-size: 0.75rem; /* 12px 기본 */ --bs-body-line-height: 1.75; --bs-border-color: #ececec; --bs-border-radius: 10px; --bs-border-radius-lg: 16px; --bs-border-radius-xl: 22px; --bs-border-radius-pill: 999px; --bs-link-color: #c4472c; --bs-link-color-rgb: 196, 71, 44; --bs-link-hover-color: #14130f; --bs-link-hover-color-rgb: 20, 19, 15; --bs-link-decoration: none; --bs-secondary-color: #9b9b96; --bs-emphasis-color: #14130f; } html, body { background: #fff; } ::selection { background: #ffd9cd; color: var(--bs-ink); } /* Bootstrap 5.3 reboot는 a에 underline을 직접 지정하므로 실제 규칙으로 덮어씀 */ a, a:hover, a:focus { text-decoration: none; } a:hover { color: var(--bs-ink); } a.btn { color: var(--bs-btn-color); } a.btn:hover { color: var(--bs-btn-hover-color); } /* 숫자·영문은 Poppins */ .sl-num, .sl-en { font-family: "Poppins", sans-serif; font-feature-settings: "tnum"; } /* -------------------------------------------------------------------------- 2. Typography scale — 본문 12px, 최소 10px -------------------------------------------------------------------------- */ .sl-fs-10 { font-size: 10px !important; } .sl-fs-11 { font-size: 11px !important; } .sl-fs-12 { font-size: 12px !important; } .sl-fs-13 { font-size: 13px !important; } .sl-fs-14 { font-size: 14px !important; } .sl-fs-15 { font-size: 15px !important; } .sl-fs-16 { font-size: 16px !important; } .sl-eyebrow { font-family: "Poppins", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bs-brand); white-space: nowrap; } .sl-eyebrow-muted { color: var(--bs-muted-2); } .sl-display { font-size: clamp(27px, 3vw, 46px); line-height: 1.16; letter-spacing: -0.03em; font-weight: 700; text-wrap: pretty; } .sl-h2 { font-size: clamp(20px, 2vw, 27px); font-weight: 700; letter-spacing: -0.03em; } .sl-h3 { font-size: clamp(19px, 2vw, 27px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.32; } .sl-h4 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .sl-body { font-size: 12px; line-height: 1.85; color: var(--bs-ink-3); text-wrap: pretty; } .sl-muted { color: var(--bs-muted) !important; } .sl-ink-2 { color: var(--bs-ink-2) !important; } .sl-brand { color: var(--bs-brand) !important; } /* -------------------------------------------------------------------------- 3. Buttons -------------------------------------------------------------------------- */ .btn { --bs-btn-border-radius: 999px; font-weight: 600; } .btn-sl-dark { --bs-btn-color: #fff; --bs-btn-bg: #14130f; --bs-btn-border-color: #14130f; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000; --bs-btn-active-color: #fff; --bs-btn-font-size: 13.5px; --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: 0.72rem; } .btn-sl-brand { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-brand); --bs-btn-border-color: var(--bs-brand); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ad3d25; --bs-btn-hover-border-color: #ad3d25; --bs-btn-active-bg: #ad3d25; --bs-btn-active-border-color: #ad3d25; --bs-btn-active-color: #fff; --bs-btn-font-size: 13.5px; --bs-btn-padding-x: 1.3rem; --bs-btn-padding-y: 0.7rem; } .btn-sl-outline { --bs-btn-color: #14130f; --bs-btn-bg: #fff; --bs-btn-border-color: #e2e0dc; --bs-btn-hover-color: #14130f; --bs-btn-hover-bg: var(--bs-surface); --bs-btn-hover-border-color: #d8d5cf; --bs-btn-font-size: 13.5px; --bs-btn-font-weight: 500; --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: 0.68rem; } .btn-sl-soft { --bs-btn-color: #14130f; --bs-btn-bg: var(--bs-surface); --bs-btn-border-color: var(--bs-line); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #14130f; --bs-btn-hover-border-color: #14130f; --bs-btn-font-size: 12.5px; --bs-btn-font-weight: 500; --bs-btn-padding-x: 0.85rem; --bs-btn-padding-y: 0.5rem; display: inline-flex; align-items: center; justify-content: center; } .btn-sl-icon { --bs-btn-bg: #fff; --bs-btn-border-color: var(--bs-line); --bs-btn-color: #14130f; --bs-btn-hover-bg: var(--bs-surface); --bs-btn-hover-border-color: var(--bs-line); width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; position: relative; } .btn-sl-icon .sl-cart-badge { position: absolute; top: -4px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--bs-brand); color: #fff; font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; } /* filter / nav chips */ .sl-chip { border: 1px solid var(--bs-line); background: #fff; color: var(--bs-ink-2); border-radius: 999px; padding: 8px 15px; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: all .15s ease; cursor: pointer; } .sl-chip:hover { border-color: #d8d5cf; } .sl-chip.active { background: var(--bs-ink); border-color: var(--bs-ink); color: #fff; font-weight: 600; } /* -------------------------------------------------------------------------- 4. Forms -------------------------------------------------------------------------- */ .sl-search { background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: 999px; padding: 8px 14px; } .sl-search input { background: transparent; border: 0; outline: none; font-size: 13.5px; color: var(--bs-ink); width: 100%; min-width: 0; } .sl-search input::placeholder { color: #a3a09a; } .form-select.sl-select { width: auto; border-radius: 999px; border-color: var(--bs-line); font-size: 13px; font-weight: 500; padding: 0.55rem 2.2rem 0.55rem 0.9rem; } .form-select.sl-select:focus { border-color: #e0cec7; box-shadow: 0 0 0 3px rgba(196,71,44,.08); } /* -------------------------------------------------------------------------- 5. Layout — sidebar + content -------------------------------------------------------------------------- */ .sl-shell { display: flex; align-items: flex-start; min-height: 100vh; } .sl-sidebar { width: var(--bs-sidebar-w); min-width: var(--bs-sidebar-w); align-self: stretch; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid var(--bs-line); padding: 20px 18px 32px; display: flex; flex-direction: column; gap: 26px; } .sl-main { flex: 1; min-width: 0; } .sl-container { max-width: var(--bs-content-max); margin: 0 auto; padding: 0 clamp(16px, 2.6vw, 36px); } .sl-topbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.93); backdrop-filter: blur(14px); border-bottom: 1px solid var(--bs-line); } .sl-topbar .sl-container { padding-top: 12px; padding-bottom: 12px; } .sl-logo-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--bs-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px; flex-shrink: 0; } .sl-logo-mark.sl-sm { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; } .sl-wordmark { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; line-height: 1.1; } /* header user dropdown */ .wb-user-toggle { background: #fff; border: 1px solid var(--bs-line); border-radius: 999px; padding: 5px 12px 5px 6px; cursor: pointer; transition: border-color .14s ease, background .14s ease; line-height: 1; color: var(--bs-ink); } .wb-user-toggle:hover, .wb-user-toggle[aria-expanded="true"] { border-color: #d8d5cf; background: var(--bs-surface); } .wb-user-avatar { width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0; background: #fbeae5; color: var(--bs-brand); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .wb-user-meta { line-height: 1.25; min-width: 0; } .wb-user-nick { font-size: 13px; font-weight: 600; color: var(--bs-ink); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wb-user-id { font-family: "Poppins", sans-serif; font-size: 11px; color: var(--bs-muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wb-user-caret { font-size: 12px; color: var(--bs-muted); transition: transform .16s ease; } .wb-user-toggle[aria-expanded="true"] .wb-user-caret { transform: rotate(180deg); } .wb-user-menu { --bs-dropdown-min-width: 190px; border: 1px solid var(--bs-line); border-radius: 14px; padding: 6px; box-shadow: 0 12px 30px rgba(20,19,15,.12); margin-top: 6px; } .wb-user-head { padding: 8px 12px 4px; } .wb-user-head .wb-user-nick { font-size: 14px; max-width: none; } .wb-user-head .wb-user-id { max-width: none; margin-top: 1px; } .wb-user-menu .dropdown-divider { margin: 6px 4px; border-color: var(--bs-line); } .wb-user-menu .dropdown-item { display: flex; align-items: center; gap: 9px; border-radius: 9px; padding: 9px 11px; font-size: 13.5px; color: var(--bs-ink-2); } .wb-user-menu .dropdown-item i { font-size: 15px; color: var(--bs-muted); width: 16px; text-align: center; } .wb-user-menu .dropdown-item:hover, .wb-user-menu .dropdown-item:focus { background: var(--bs-surface); color: var(--bs-ink); } .wb-user-menu .wb-user-logout:hover, .wb-user-menu .wb-user-logout:focus { color: var(--bs-brand); } .wb-user-menu .wb-user-logout:hover i, .wb-user-menu .wb-user-logout:focus i { color: var(--bs-brand); } /* 모바일: 프로필 토글에도 닉네임+아이디 표시(공간 위해 폭 축소·워드마크 숨김) */ @media (max-width: 991.98px) { .wb-user-toggle { padding: 4px 9px 4px 5px; gap: 6px !important; } .wb-user-nick, .wb-user-id { max-width: 96px; } } @media (max-width: 575.98px) { .sl-topbar .sl-mobile-only .sl-wordmark { display: none; } .wb-user-nick, .wb-user-id { max-width: 84px; } } /* sidebar nav */ .sl-nav-link { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 9px; padding: 9px 11px; font-size: 14px; color: var(--bs-ink-2); transition: background .14s ease; cursor: pointer; } .sl-nav-link:hover { background: var(--bs-surface); } .sl-nav-link .sl-caret { width: 9px; font-size: 10px; color: var(--bs-muted-2); flex-shrink: 0; } .sl-nav-link .sl-count { font-family: "Poppins", sans-serif; font-size: 11px; color: var(--bs-muted-2); } .sl-nav-link.active { background: var(--bs-brand-tint); color: var(--bs-brand); font-weight: 600; } .sl-nav-link.active .sl-caret, .sl-nav-link.active .sl-count { color: var(--bs-brand); } .sl-subnav { padding: 3px 0 6px 28px; display: flex; flex-direction: column; gap: 1px; } .sl-subnav-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; border-left: 1px solid var(--bs-line); padding: 6px 10px; font-size: 13px; color: var(--bs-ink-3); cursor: pointer; } .sl-subnav-link:hover { color: var(--bs-ink); } .sl-subnav-link .sl-count { font-family: "Poppins", sans-serif; font-size: 11px; color: #c2c2bd; } .sl-subnav-link.active { color: var(--bs-brand); font-weight: 600; border-left-color: var(--bs-brand); } /* 분류 트리 (최대 5뎁스 드롭다운) */ .sl-cat-tree { display: flex; flex-direction: column; gap: 1px; } .sl-cat-item { display: flex; flex-direction: column; } .sl-cat-row { display: flex; align-items: center; gap: 2px; } .sl-cat-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: transparent; border: 0; border-radius: 9px; padding: 8px 11px; font-size: 13.5px; color: var(--bs-ink-2); text-decoration: none; transition: background .14s ease; } .sl-cat-link:hover { background: var(--bs-surface); } .sl-cat-link.active { background: var(--bs-brand-tint); color: var(--bs-brand); font-weight: 600; } .sl-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-cat-link .sl-count { font-family: "Poppins", sans-serif; font-size: 11px; color: var(--bs-muted-2); flex-shrink: 0; } .sl-cat-link.active .sl-count { color: var(--bs-brand); } .sl-cat-toggle { flex: 0 0 auto; width: 26px; height: 30px; border: 0; background: transparent; color: var(--bs-muted-2); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 7px; } .sl-cat-toggle:hover { background: var(--bs-surface); color: var(--bs-ink); } .sl-cat-toggle svg { transition: transform .18s ease; } .sl-cat-toggle.open svg { transform: rotate(90deg); } .sl-cat-sub { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 2px 13px; padding-left: 7px; border-left: 1px solid var(--bs-line); } .sl-cat-sub.collapsed { display: none; } .sl-side-cta { margin-top: auto; border: 1px solid var(--bs-brand-line); background: var(--bs-brand-soft); border-radius: 12px; padding: 16px; } .sl-chip-row { display: flex; gap: 7px; overflow-x: auto; padding-top: 14px; scrollbar-width: none; } .sl-chip-row::-webkit-scrollbar { display: none; } /* -------------------------------------------------------------------------- 6. Cards & panels -------------------------------------------------------------------------- */ .sl-card { border: 1px solid var(--bs-line); background: #fff; border-radius: var(--bs-radius); overflow: hidden; } .sl-panel { border: 1px solid var(--bs-line); background: #fff; border-radius: var(--bs-radius-lg); overflow: hidden; } .sl-hero { position: relative; overflow: hidden; border-radius: var(--bs-radius-lg); border: 1px solid #f0efed; background: linear-gradient(150deg, #fdf6f3 0%, #f9f9f8 62%); padding: clamp(26px, 3.2vw, 48px); min-height: 380px; } .sl-hero::after { content: ""; position: absolute; right: -130px; top: -130px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(196,71,44,.10), rgba(196,71,44,0) 68%); } .sl-hero > * { position: relative; z-index: 1; } .sl-hero-badge { display: inline-flex; align-items: center; border: 1px solid #f2cec2; background: #fff; border-radius: 999px; padding: 5px 11px; } /* stat grid — 2x2 균등 */ .sl-stat { padding: 20px 22px; } .sl-stat-label { font-size: 11.5px; color: var(--bs-muted); letter-spacing: .02em; } .sl-stat-value { font-family: "Poppins", sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; margin-top: 6px; line-height: 1; } .sl-stat-grid { display: grid; grid-template-columns: 1fr 1fr; } .sl-stat-grid > .sl-stat:nth-child(-n+2) { border-bottom: 1px solid var(--bs-line-2); } .sl-stat-grid > .sl-stat:nth-child(odd) { border-right: 1px solid var(--bs-line-2); } /* product card */ .sl-skin-card { transition: border-color .16s ease, box-shadow .16s ease; display: flex; flex-direction: column; height: 100%; } .sl-skin-card:hover { border-color: #e0cec7; box-shadow: 0 12px 30px rgba(20,19,15,.08); } .sl-thumb { position: relative; aspect-ratio: 16 / 10; background-color: var(--bs-surface); background-image: repeating-linear-gradient(115deg, #efefee 0 12px, #f9f9f8 12px 24px); display: flex; align-items: center; justify-content: center; } .sl-thumb-label { font-family: "Poppins", sans-serif; font-size: 10px; letter-spacing: .07em; color: #b0aeaa; text-transform: uppercase; text-align: center; padding: 0 12px; } .sl-badge-platform { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 5px; background: rgba(255,255,255,.95); border: 1px solid var(--bs-line); color: var(--bs-ink-2); white-space: nowrap; } .sl-badge-corner { position: absolute; top: 10px; right: 10px; font-family: "Poppins", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .06em; padding: 4px 8px; border-radius: 5px; } .sl-badge-free { background: var(--bs-ink); color: #fff; } .sl-badge-sale { background: var(--bs-brand); color: #fff; } .sl-demo-link { position: absolute; bottom: 10px; right: 10px; font-size: 12px; font-weight: 500; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.96); border: 1px solid #e5e3df; color: var(--bs-ink); white-space: nowrap; } .sl-demo-link:hover { background: #fff; border-color: #d8d5cf; color: var(--bs-ink); } .sl-tag { font-size: 11.5px; color: #6e6c66; background: var(--bs-surface); border-radius: 4px; padding: 4px 7px; white-space: nowrap; } .sl-meta { font-size: 11.5px; color: var(--bs-muted); } .sl-price { font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; } .sl-price-orig { font-size: 11px; color: #b3b1ac; text-decoration: line-through; } .sl-card-foot { border-top: 1px solid var(--bs-line-2); } .sl-promo-band { background: var(--bs-brand-soft); border: 1px solid #f4e4de; border-radius: var(--bs-radius-lg); padding: clamp(26px, 3vw, 42px); } .sl-banner-ph { background-color: var(--bs-surface); background-image: repeating-linear-gradient(115deg, #efefee 0 14px, #f9f9f8 14px 28px); display: flex; align-items: center; justify-content: center; min-height: 240px; } /* -------------------------------------------------------------------------- 7. Carousel -------------------------------------------------------------------------- */ .sl-carousel { border-radius: var(--bs-radius-lg); overflow: hidden; min-height: 200px; } .sl-carousel .carousel-inner, .sl-carousel .carousel-item { height: 100%; } .sl-carousel .carousel-indicators { margin-bottom: 12px; } .sl-carousel .carousel-indicators [data-bs-target] { width: 6px; height: 6px; border-radius: 50%; border: 0; background: #fff; opacity: .45; margin: 0 3px; } .sl-carousel .carousel-indicators .active { opacity: 1; } .sl-carousel .carousel-control-prev, .sl-carousel .carousel-control-next { width: 34px; opacity: .7; } .sl-carousel .carousel-control-prev-icon, .sl-carousel .carousel-control-next-icon { width: 14px; height: 14px; } .sl-slide { height: 100%; min-height: 200px; padding: 26px 40px 34px 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; } .sl-slide-title { font-size: clamp(19px, 1.7vw, 26px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.28; margin-top: 12px; } .sl-slide-figure { font-family: "Poppins", sans-serif; font-size: 34px; font-weight: 600; letter-spacing: -0.04em; line-height: .85; } .sl-slide-brand { background: var(--bs-brand); color: #fff9f6; } .sl-slide-ink { background: var(--bs-ink); color: var(--bs-surface); } .sl-slide-sand { background: #f1ece4; color: var(--bs-ink); } .sl-slide-sand .carousel-indicators [data-bs-target] { background: var(--bs-ink); } /* -------------------------------------------------------------------------- 8. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1099.98px) { .sl-sidebar { display: none; } } @media (min-width: 1100px) { .sl-mobile-only { display: none !important; } } @media (max-width: 575.98px) { .sl-slide { padding: 22px 34px 30px 22px; } .sl-hero { min-height: 320px; } } /* -------------------------------------------------------------------------- 9. Auth (login) page -------------------------------------------------------------------------- */ .sl-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: #fff; } .sl-auth-card { width: 100%; max-width: 420px; } .sl-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--bs-line); border-radius: 999px; padding: 4px; background: var(--bs-surface); } .sl-auth-tab { border: 0; background: transparent; border-radius: 999px; padding: 10px 0; font-size: 13.5px; font-weight: 600; color: var(--bs-muted); cursor: pointer; transition: all .16s ease; } .sl-auth-tab.active { background: #fff; color: var(--bs-ink); box-shadow: 0 1px 3px rgba(20,19,15,.08); } .sl-field-label { font-size: 12px; font-weight: 600; color: var(--bs-ink-2); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; } .sl-req { color: var(--bs-brand); font-size: 11px; font-weight: 600; } .form-control.sl-input { border-radius: 10px; border-color: var(--bs-line); background: var(--bs-surface); font-size: 13.5px; padding: 0.72rem 0.9rem; color: var(--bs-ink); } .form-control.sl-input::placeholder { color: #b3b1ac; } .form-control.sl-input:focus { background: #fff; border-color: #e0cec7; box-shadow: 0 0 0 3px rgba(196,71,44,.09); } .sl-pw-wrap { position: relative; } .sl-pw-wrap .form-control { padding-right: 64px; } .sl-pw-toggle { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); border: 0; background: transparent; color: var(--bs-muted); font-size: 11px; font-weight: 600; padding: 4px 6px; cursor: pointer; white-space: nowrap; } .sl-pw-toggle:hover { color: var(--bs-ink); } /* 회원 비밀번호 확인(member_confirm) 전용 */ .sl-pw-lock { width: 46px; height: 46px; border-radius: 999px; background: var(--bs-brand-soft); border: 1px solid var(--bs-brand-line); color: var(--bs-brand); display: flex; align-items: center; justify-content: center; } .sl-pw-idbox { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: 11px; padding: 13px 15px; } .form-check-input:checked { background-color: var(--bs-brand); border-color: var(--bs-brand); } .form-check-input:focus { border-color: #e0cec7; box-shadow: 0 0 0 3px rgba(196,71,44,.09); } .sl-link-quiet { font-size: 12px; color: var(--bs-brand); font-weight: 500; } .sl-divider { display: flex; align-items: center; gap: 12px; color: var(--bs-muted-2); font-size: 11px; } .sl-divider::before, .sl-divider::after { content: ""; height: 1px; flex: 1; background: var(--bs-line); } .sl-alert-soft { background: #fdf0ec; border: 1px solid #f4d8cd; color: #a93a21; border-radius: 10px; font-size: 12px; padding: 10px 12px; } /* -------------------------------------------------------------------------- 10. Register — agreement page -------------------------------------------------------------------------- */ .sl-agree-wrap { min-height: 100vh; background: #fff; padding: 48px 20px 72px; } .sl-agree-inner { max-width: 860px; margin: 0 auto; } .sl-steps { display: flex; align-items: center; gap: 10px; } .sl-step { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--bs-muted-2); white-space: nowrap; } .sl-step-num { width: 20px; height: 20px; border-radius: 50%; background: var(--bs-line); color: #fff; font-family: "Poppins", sans-serif; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .sl-step.on { color: var(--bs-ink); font-weight: 600; } .sl-step.on .sl-step-num { background: var(--bs-brand); } .sl-step-bar { height: 1px; width: 26px; background: var(--bs-line); } .sl-notice { background: var(--bs-brand-soft); border: 1px solid #f4d8cd; border-radius: 12px; padding: 14px 18px; font-size: 12.5px; color: #a93a21; display: flex; align-items: center; gap: 9px; } .sl-agree-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--bs-line-2); } .sl-agree-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .sl-tag-req { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--bs-brand); background: #fdeee8; border: 1px solid #f4d8cd; border-radius: 5px; padding: 3px 7px; white-space: nowrap; } .sl-agree-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bs-ink-2); white-space: nowrap; cursor: pointer; } .sl-terms-box { max-height: 220px; overflow-y: auto; padding: 20px 22px; font-size: 12px; line-height: 1.95; color: var(--bs-ink-3); background: var(--bs-surface); } .sl-terms-box h4 { font-size: 12.5px; font-weight: 600; color: var(--bs-ink); margin: 0 0 6px; } .sl-terms-box p { margin: 0 0 14px; } .sl-terms-box p:last-child { margin-bottom: 0; } .sl-privacy-table { width: 100%; border-collapse: collapse; font-size: 12px; } .sl-privacy-table th { background: var(--bs-surface); font-weight: 600; color: var(--bs-ink-2); font-size: 11.5px; padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--bs-line); white-space: nowrap; } .sl-privacy-table td { padding: 13px 16px; color: var(--bs-ink-3); border-bottom: 1px solid var(--bs-line-2); vertical-align: top; line-height: 1.7; } .sl-privacy-table tr:last-child td { border-bottom: 0; } .sl-agree-all { background: var(--bs-brand-soft); border: 1px solid var(--bs-brand-line); border-radius: 14px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; } .sl-check-lg { width: 1.15rem; height: 1.15rem; margin: 0; flex-shrink: 0; } /* -------------------------------------------------------------------------- 11. Register — form page -------------------------------------------------------------------------- */ .sl-form-sec { border: 1px solid var(--bs-line); border-radius: 18px; overflow: hidden; background: #fff; } .sl-form-sec-head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--bs-line-2); } .sl-form-sec-num { font-family: "Poppins", sans-serif; font-size: 10px; font-weight: 600; color: var(--bs-brand); background: #fdeee8; border: 1px solid #f4d8cd; border-radius: 5px; padding: 3px 7px; } .sl-form-sec-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .sl-form-sec-body { padding: 22px; } .sl-hint { font-size: 11px; color: var(--bs-muted); margin-top: 6px; line-height: 1.6; } .sl-help { border: 0; background: transparent; padding: 0; font-size: 11px; color: var(--bs-muted-2); text-decoration: underline; cursor: pointer; } .sl-help:hover { color: var(--bs-brand); } .sl-captcha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sl-captcha-img { width: 150px; height: 46px; border: 1px solid var(--bs-line); border-radius: 8px; background: var(--bs-surface) repeating-linear-gradient(115deg, #efefee 0 8px, #f9f9f8 8px 16px); display: flex; align-items: center; justify-content: center; font-family: "Poppins", sans-serif; font-size: 19px; font-weight: 600; letter-spacing: .22em; color: #6e6c66; font-style: italic; user-select: none; } .sl-status { font-size: 11px; margin-top: 6px; font-weight: 500; } .sl-status.ok { color: #2c7a4b; } .sl-status.no { color: var(--bs-brand); } /* -------------------------------------------------------------------------- 12. Register — result (complete) page -------------------------------------------------------------------------- */ .sl-done-card { border: 1px solid var(--bs-line); border-radius: 22px; overflow: hidden; background: #fff; } .sl-done-top { background: var(--bs-brand-soft); border-bottom: 1px solid var(--bs-brand-line); padding: 44px 32px 38px; text-align: center; } .sl-done-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--bs-brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .sl-done-title { font-size: clamp(21px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.03em; } .sl-account { border: 1px solid var(--bs-line); border-radius: 14px; overflow: hidden; } .sl-account-row { display: flex; align-items: center; gap: 16px; padding: 15px 20px; } .sl-account-row + .sl-account-row { border-top: 1px solid var(--bs-line-2); } .sl-account-key { font-size: 11.5px; color: var(--bs-muted); width: 76px; flex-shrink: 0; } .sl-account-val { font-size: 14px; font-weight: 600; color: var(--bs-ink); word-break: break-all; } .sl-next-list { display: flex; flex-direction: column; border-top: 1px solid var(--bs-line-2); } .sl-next-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--bs-line-2); } .sl-next-num { font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 600; color: var(--bs-brand); background: #fdeee8; border: 1px solid #f4d8cd; border-radius: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* -------------------------------------------------------------------------- 13. Product list page -------------------------------------------------------------------------- */ .sl-crumb { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--bs-muted); } .sl-crumb a { color: var(--bs-muted); } .sl-crumb a:hover { color: var(--bs-ink); } .sl-sort { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .sl-sort-btn { border: 0; background: transparent; padding: 7px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--bs-ink-2); cursor: pointer; white-space: nowrap; transition: all .14s ease; } .sl-sort-btn:hover { background: var(--bs-surface); } .sl-sort-btn.active { background: var(--bs-brand-tint); color: var(--bs-brand); font-weight: 600; } .sl-viewtoggle { display: flex; border: 1px solid var(--bs-line); border-radius: 999px; padding: 3px; background: var(--bs-surface); flex-shrink: 0; } .sl-viewtoggle button { border: 0; background: transparent; border-radius: 999px; width: 34px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--bs-muted); cursor: pointer; } .sl-viewtoggle button.active { background: #fff; color: var(--bs-ink); box-shadow: 0 1px 3px rgba(20,19,15,.08); } .sl-pd-thumb { position: relative; overflow: hidden; background: var(--bs-surface); } .sl-pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-pd-flags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .sl-flag { font-size: 10px; font-weight: 600; letter-spacing: .02em; padding: 4px 8px; border-radius: 5px; white-space: nowrap; } .sl-flag-hit { background: var(--bs-ink); color: #fff; } .sl-flag-best { background: var(--bs-brand); color: #fff; } .sl-flag-new { background: #2c7a4b; color: #fff; } .sl-flag-reco { background: #fff; color: var(--bs-ink); border: 1px solid var(--bs-line); } .sl-pd-actions { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; opacity: 0; transform: translateY(4px); transition: all .18s ease; } .sl-pd:hover .sl-pd-actions, .sl-pd:focus-within .sl-pd-actions { opacity: 1; transform: none; } .sl-icon-btn { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--bs-line); background: rgba(255,255,255,.96); color: var(--bs-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .sl-icon-btn:hover { background: var(--bs-ink); border-color: var(--bs-ink); color: #fff; } .sl-icon-btn.on { background: var(--bs-brand); border-color: var(--bs-brand); color: #fff; } .sl-pd-name { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.45; margin: 0; } .sl-pd-sum { font-size: 12px; color: #8b8983; margin: 4px 0 0; line-height: 1.65; } .sl-pd-price { font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; } .sl-pd-strike { font-size: 11px; color: #b3b1ac; text-decoration: line-through; } .sl-pd-off { font-size: 11px; font-weight: 600; color: var(--bs-brand); } .sl-pd-list { display: grid; grid-template-columns: 200px 1fr; } .sl-share { display: flex; align-items: center; gap: 6px; } .sl-share-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--bs-muted-2); font-family: "Poppins", sans-serif; margin-right: 2px; } .sl-share-btn { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--bs-line); background: #fff; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; color: var(--bs-muted); } .sl-share-btn:hover { color: #fff; } .sl-share-fb:hover { background: #1877f2; border-color: #1877f2; } .sl-share-tw:hover { background: var(--bs-ink); border-color: var(--bs-ink); } .sl-share-copy:hover { background: var(--bs-brand); border-color: var(--bs-brand); } .sl-share-btn.copied { background: var(--bs-brand); border-color: var(--bs-brand); color: #fff; } .sl-pager { display: flex; align-items: center; justify-content: center; gap: 5px; } .sl-pager button, .sl-pager a { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--bs-line); background: #fff; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 500; color: var(--bs-ink-2); cursor: pointer; text-decoration: none; } .sl-pager button:hover, .sl-pager a:hover { border-color: #d8d5cf; color: var(--bs-ink); } .sl-pager button.active { background: var(--bs-ink); border-color: var(--bs-ink); color: #fff; font-weight: 600; } .sl-pager button:disabled { opacity: 0.4; cursor: default; } @media (max-width: 575.98px) { .sl-pd-list { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 14. Product detail page -------------------------------------------------------------------------- */ .sl-gal-main { position: relative; border: 1px solid var(--bs-line); border-radius: 18px; overflow: hidden; background: var(--bs-surface); aspect-ratio: 4 / 3; } .sl-gal-main img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-gal-zoom { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--bs-line); background: rgba(255,255,255,.96); color: var(--bs-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .sl-gal-zoom:hover { background: var(--bs-ink); border-color: var(--bs-ink); color: #fff; } .sl-gal-thumbs { display: flex; gap: 8px; margin-top: 10px; } .sl-gal-thumb { width: 68px; height: 68px; border-radius: 11px; overflow: hidden; border: 1px solid var(--bs-line); padding: 0; background: var(--bs-surface); cursor: pointer; flex-shrink: 0; } .sl-gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-gal-thumb.active { border-color: var(--bs-brand); box-shadow: 0 0 0 2px rgba(196,71,44,.15); } .sl-spec-key { color: var(--bs-muted); } .sl-spec-val { color: var(--bs-ink); font-weight: 500; } .sl-spec-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--bs-line); border-radius: 14px; overflow: hidden; } .sl-spec-cell { display: flex; flex-direction: column; gap: 4px; padding: 13px 16px; font-size: 12.5px; border-bottom: 1px solid var(--bs-line-2); } .sl-spec-cell:nth-child(odd) { border-right: 1px solid var(--bs-line-2); } .sl-spec-cell:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; } .sl-spec-cell .sl-spec-key { font-size: 11px; } .sl-ship-line { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--bs-ink-2); background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: 10px; padding: 11px 14px; } .sl-price-now { font-family: "Poppins", sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; } .sl-optgroup { border: 1px solid var(--bs-line); border-radius: 14px; padding: 16px; } .sl-optgroup-title { font-size: 12px; font-weight: 600; color: var(--bs-ink); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; } .sl-optgroup-count { font-family: "Poppins", sans-serif; font-size: 10px; font-weight: 600; color: var(--bs-brand); background: #fdeee8; border: 1px solid #f4d8cd; border-radius: 5px; padding: 2px 6px; } .sl-optgroup-count.opt { color: var(--bs-muted); background: var(--bs-surface); border-color: var(--bs-line); } .sl-optrow { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 10px; } .sl-optrow + .sl-optrow { margin-top: 8px; } .sl-optrow-key { font-size: 12px; color: var(--bs-ink-2); } .form-select.sl-optsel { border-radius: 9px; border-color: var(--bs-line); background-color: var(--bs-surface); font-size: 12.5px; padding: 0.55rem 2rem 0.55rem 0.75rem; width: 100%; } .form-select.sl-optsel:focus { background-color: #fff; border-color: #e0cec7; box-shadow: 0 0 0 3px rgba(196,71,44,.09); } .sl-picked { background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: 14px; padding: 16px; } .sl-picked-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--bs-line); border-radius: 11px; padding: 12px 14px; } .sl-picked-item + .sl-picked-item { margin-top: 8px; } .sl-picked-empty { font-size: 12px; color: var(--bs-muted); text-align: center; padding: 18px 0; } .sl-remove { border: 0; background: transparent; color: var(--bs-muted-2); font-size: 15px; line-height: 1; padding: 2px 4px; cursor: pointer; } .sl-remove:hover { color: var(--bs-brand); } .sl-stepper { display: inline-flex; align-items: center; border: 1px solid var(--bs-line); border-radius: 999px; background: #fff; overflow: hidden; } .sl-stepper button { width: 30px; height: 30px; border: 0; background: transparent; color: var(--bs-ink-2); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .sl-stepper button:hover { color: var(--bs-brand); } .sl-stepper input { width: 40px; border: 0; outline: none; text-align: center; font-family: "Poppins", sans-serif; font-size: 12.5px; font-weight: 600; background: transparent; color: var(--bs-ink); } .sl-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--bs-line); border-bottom: 1px solid var(--bs-line); } .sl-total-val { font-family: "Poppins", sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: var(--bs-brand); } .sl-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bs-line); overflow-x: auto; } .sl-tab { border: 0; background: transparent; padding: 13px 18px; font-size: 13px; font-weight: 500; color: var(--bs-ink-2); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .sl-tab:hover { color: var(--bs-ink); } .sl-tab.active { color: var(--bs-brand); font-weight: 600; border-bottom-color: var(--bs-brand); } .sl-tab-count { font-family: "Poppins", sans-serif; font-size: 11px; color: var(--bs-muted-2); margin-left: 4px; } .sl-empty { padding: 56px 0; text-align: center; font-size: 12px; color: var(--bs-muted); } .sl-detail-body { font-size: 13px; line-height: 2; color: var(--bs-ink-3); } .sl-detail-body h3 { font-size: 15px; font-weight: 600; color: var(--bs-ink); margin: 28px 0 10px; letter-spacing: -0.01em; } .sl-detail-body h3:first-child { margin-top: 0; } .sl-detail-body ul { padding-left: 18px; margin: 0; } .sl-detail-body li { margin-bottom: 6px; } .sl-detail-shot { border: 1px solid var(--bs-line); border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bs-surface); } .sl-detail-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-notice-table { width: 100%; border-collapse: collapse; font-size: 12px; border-top: 1px solid var(--bs-line); } .sl-notice-table th { width: 210px; text-align: left; font-weight: 600; color: var(--bs-ink-2); background: var(--bs-surface); padding: 11px 16px; border-bottom: 1px solid var(--bs-line-2); vertical-align: top; } .sl-notice-table td { padding: 11px 16px; color: var(--bs-ink-3); border-bottom: 1px solid var(--bs-line-2); } .sl-buybar { position: sticky; bottom: 0; z-index: 20; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); border-top: 1px solid var(--bs-line); padding: 12px 0; margin-top: 40px; } @media (max-width: 575.98px) { .sl-notice-table th { width: 130px; } } /* -------------------------------------------------------------------------- 15. Reviews & QnA (product detail tabs) -------------------------------------------------------------------------- */ .sl-crumb a, .sl-crumb span { white-space: nowrap; flex-shrink: 0; } .sl-rv-summary { display: grid; grid-template-columns: 190px 1fr; gap: 28px; align-items: center; border: 1px solid var(--bs-line); border-radius: 16px; padding: 24px 26px; } .sl-rv-score { font-family: "Poppins", sans-serif; font-size: 44px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; } .sl-rv-bars { display: flex; flex-direction: column; gap: 7px; } .sl-rv-bar { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 10px; font-size: 11px; color: var(--bs-muted); } .sl-rv-track { height: 6px; border-radius: 999px; background: var(--bs-line); overflow: hidden; } .sl-rv-fill { height: 100%; background: var(--bs-brand); border-radius: 999px; } .sl-rv-item { padding: 20px 0; border-bottom: 1px solid var(--bs-line-2); } .sl-rv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sl-avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--bs-brand-tint); color: var(--bs-brand); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sl-stars { font-size: 11px; letter-spacing: 1px; color: var(--bs-brand); } .sl-rv-body { font-size: 12px; line-height: 1.95; color: var(--bs-ink-3); margin: 10px 0 0; } .sl-rv-shots { display: flex; gap: 6px; margin-top: 10px; } .sl-rv-shot { width: 62px; height: 62px; border-radius: 9px; overflow: hidden; border: 1px solid var(--bs-line); } .sl-rv-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-rv-reply { margin-top: 12px; background: var(--bs-surface); border-radius: 10px; padding: 12px 14px; font-size: 12px; line-height: 1.9; color: var(--bs-ink-3); } .sl-rv-reply strong { color: var(--bs-brand); font-size: 11px; } .sl-qna-item { border-bottom: 1px solid var(--bs-line-2); } .sl-qna-q { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: 0; padding: 16px 0; cursor: pointer; } .sl-qna-mark { font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600; color: var(--bs-brand); flex-shrink: 0; } .sl-qna-a { display: flex; gap: 12px; background: var(--bs-surface); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; font-size: 12px; line-height: 1.9; color: var(--bs-ink-3); } .sl-badge-state { font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 5px; white-space: nowrap; } .sl-state-done { background: var(--bs-brand-tint); color: var(--bs-brand); } .sl-state-wait { background: var(--bs-surface); color: var(--bs-muted); border: 1px solid var(--bs-line); } @media (max-width: 575.98px) { .sl-rv-summary { grid-template-columns: 1fr; gap: 18px; } } /* ---- 15b. 전체 후기/문의 목록 페이지 (itemuselist / itemqalist) — .sl-rvpage 스코프 ---- 섹션 15의 상품상세 탭용 .sl-rv-* 와 이름이 겹치는 것은 .sl-rvpage 로 스코프해 격리 */ .sl-rvpage .sl-rv-hero { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: center; border: 1px solid var(--bs-line); border-radius: 16px; background: #fff; padding: 22px 26px; } .sl-rvpage .sl-rv-hero .sl-rv-score { font-family: "Poppins", sans-serif; font-size: 42px; font-weight: 600; line-height: 1; color: var(--bs-ink); text-align: center; } .sl-rvpage .sl-rv-scorebox { text-align: center; border-right: 1px solid var(--bs-line-2); padding-right: 24px; } .sl-rvpage .sl-rv-bar { grid-template-columns: 40px 1fr 42px; font-size: 11.5px; } .sl-rvpage .sl-rv-track { display: block; height: 6px; background: var(--bs-line-2); } .sl-rvpage .sl-rv-card { display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 20px; } .sl-rvpage .sl-rv-card + .sl-rv-card { border-top: 1px solid var(--bs-line-2); } .sl-rvpage .sl-rv-card:hover { background: var(--bs-surface); } .sl-rvpage .sl-rv-thumb { display: block; width: 92px; height: 92px; border-radius: 12px; border: 1px solid var(--bs-line); background-size: cover; background-position: center; background-color: var(--bs-surface); flex-shrink: 0; } .sl-rvpage .sl-rv-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; } .sl-rvpage .sl-rv-goods { font-size: 11.5px; color: var(--bs-muted); text-decoration: none; } .sl-rvpage .sl-rv-goods:hover { color: var(--bs-brand); text-decoration: underline; } .sl-rvpage .sl-rv-title { font-size: 14px; font-weight: 600; color: var(--bs-ink); text-decoration: none; } .sl-rvpage .sl-rv-title:hover { color: var(--bs-brand); } .sl-rvpage .sl-rv-body { font-size: 12.5px; line-height: 1.75; color: var(--bs-ink-2); margin: 0; text-wrap: pretty; } .sl-rvpage .sl-rv-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--bs-muted); } .sl-rvpage .sl-rv-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--bs-line); } .sl-rvpage .sl-rv-shots { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .sl-rvpage .sl-rv-shot { width: 66px; height: 66px; border-radius: 9px; padding: 0; cursor: zoom-in; } .sl-rvpage .sl-rv-shot:hover { border-color: var(--bs-brand-line); } .sl-rvpage .sl-rv-reply { margin: 0; border-left: 2px solid var(--bs-brand-line); background: var(--bs-brand-tint); border-radius: 0 10px 10px 0; padding: 11px 14px; font-size: 12px; line-height: 1.7; color: var(--bs-ink-2); } .sl-rvpage .sl-rv-reply strong { color: var(--bs-brand); } .sl-rvpage .sl-rv-stars { letter-spacing: 1px; font-size: 13px; color: #f5a524; } .sl-rv-photo-chip { font-size: 10px; font-weight: 600; color: var(--bs-brand); background: var(--bs-brand-tint); border-radius: 4px; padding: 3px 7px; } .sl-rv-filter { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .sl-rv-pill { border: 1px solid var(--bs-line); background: #fff; border-radius: 999px; padding: 7px 15px; font-size: 12px; color: var(--bs-ink-2); white-space: nowrap; text-decoration: none; display: inline-block; } .sl-rv-pill:hover { border-color: var(--bs-brand-line); color: var(--bs-brand); } .sl-rv-pill.on { background: var(--bs-brand); border-color: var(--bs-brand); color: #fff; font-weight: 600; } @media (max-width: 767.98px) { .sl-rvpage .sl-rv-hero { grid-template-columns: 1fr; gap: 18px; } .sl-rvpage .sl-rv-scorebox { border-right: 0; border-bottom: 1px solid var(--bs-line-2); padding: 0 0 16px; } .sl-rvpage .sl-rv-card { grid-template-columns: 64px 1fr; gap: 12px; padding: 16px; } .sl-rvpage .sl-rv-thumb { width: 64px; height: 64px; } } /* ---- 15c. 공용 전체화면 이미지 뷰어 (sl-iv) — wb-imgview.js 가 body에 주입 ---- */ .sl-iv { position: fixed; inset: 0; z-index: 2000; background: #0e0f11; display: none; flex-direction: column; } .sl-iv.on { display: flex; } body.wb-iv-open { overflow: hidden; } .sl-iv-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,0.08); } .sl-iv-name { font-size: 13.5px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-iv-count { font-family: "Poppins", sans-serif; font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; } .sl-iv-x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.16); background: transparent; color: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sl-iv-x:hover { background: rgba(255,255,255,0.1); color: #fff; } .sl-iv-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 28px; } .sl-iv-img { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; } .sl-iv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.42); color: #fff; display: flex; align-items: center; justify-content: center; } .sl-iv-nav:hover { background: rgba(255,255,255,0.16); } .sl-iv-nav:disabled { opacity: 0.25; } .sl-iv-nav.prev { left: 22px; } .sl-iv-nav.next { right: 22px; } .sl-iv-rail { flex: 0 0 auto; display: flex; gap: 10px; padding: 16px 22px 22px; overflow-x: auto; justify-content: center; border-top: 1px solid rgba(255,255,255,0.08); } .sl-iv-thumb { width: 74px; height: 74px; border-radius: 10px; background-size: cover; background-position: center; background-color: #1a1c1f; border: 2px solid transparent; padding: 0; opacity: 0.5; flex-shrink: 0; cursor: pointer; } .sl-iv-thumb:hover { opacity: 0.85; } .sl-iv-thumb.on { opacity: 1; border-color: var(--bs-brand); } @media (max-width: 575.98px) { .sl-iv-nav { width: 40px; height: 40px; } .sl-iv-thumb { width: 58px; height: 58px; } } /* ---- 15d. 전체 상품문의 목록 페이지 (itemqalist) ---- */ .sl-qa-stat { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--bs-line); border-radius: 16px; background: #fff; overflow: hidden; } .sl-qa-stat > div { padding: 18px 22px; } .sl-qa-stat > div + div { border-left: 1px solid var(--bs-line-2); } .sl-qa-stat-num { font-family: "Poppins", sans-serif; font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--bs-ink); } .sl-qa-item + .sl-qa-item { border-top: 1px solid var(--bs-line-2); } .sl-qa-row { display: grid; grid-template-columns: 56px 1fr 96px 96px 88px 28px; align-items: center; gap: 14px; padding: 14px 20px; width: 100%; background: none; border: 0; text-align: left; cursor: pointer; } .sl-qa-row:hover { background: var(--bs-surface); } .sl-qa-head { background: var(--bs-surface); border-bottom: 1px solid var(--bs-line); font-size: 11.5px; font-weight: 600; color: var(--bs-ink-2); padding: 11px 20px; cursor: default; } .sl-qa-head:hover { background: var(--bs-surface); } .sl-qa-thumb { width: 56px; height: 56px; border-radius: 10px; border: 1px solid var(--bs-line); object-fit: cover; background: var(--bs-surface); } .sl-qa-goods { display: block; font-size: 11.5px; color: var(--bs-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-qa-subject { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 3px; } .sl-qa-title { font-size: 13.5px; font-weight: 500; color: var(--bs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-qa-row:hover .sl-qa-title { color: var(--bs-brand); } .sl-qa-lock { color: var(--bs-muted-2); flex-shrink: 0; display: flex; } .sl-qa-writer { font-size: 12px; color: var(--bs-ink-2); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-qa-date { font-family: "Poppins", sans-serif; font-size: 11.5px; color: var(--bs-muted); text-align: center; } .sl-qa-caret { display: flex; justify-content: center; color: var(--bs-muted-2); transition: transform 0.18s ease; } .sl-qa-caret.on { transform: rotate(180deg); color: var(--bs-brand); } .sl-qa-panel { border-top: 1px dashed var(--bs-line); background: var(--bs-surface); padding: 20px 24px; display: grid; gap: 14px; } .sl-qa-block { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; } .sl-qa-mark { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; flex-shrink: 0; } .sl-qa-mark.q { background: var(--bs-ink); color: #fff; } .sl-qa-mark.a { background: var(--bs-brand); color: #fff; } .sl-qa-mark.wait { background: var(--bs-line-2); color: var(--bs-muted); } .sl-qa-text { font-size: 12.5px; line-height: 1.8; color: var(--bs-ink-2); margin: 0; text-wrap: pretty; } .sl-qa-text img { max-width: min(100%, 360px); height: auto; border-radius: 8px; margin-top: 8px; display: block; } .sl-qa-text p { margin: 0 0 6px; } .sl-qa-text p:last-child { margin-bottom: 0; } .sl-qa-answer { background: #fff; border: 1px solid var(--bs-line); border-radius: 12px; padding: 14px 16px; } .sl-qa-secret { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bs-muted); } @media (max-width: 767.98px) { .sl-qa-stat { grid-template-columns: 1fr; } .sl-qa-stat > div + div { border-left: 0; border-top: 1px solid var(--bs-line-2); } .sl-qa-head { display: none; } .sl-qa-row { grid-template-columns: 56px 1fr 24px; row-gap: 6px; } .sl-qa-row > .sl-qa-writer, .sl-qa-row > .sl-qa-date { grid-column: 2 / 3; text-align: left; } .sl-qa-row > .sl-qa-state { grid-column: 2 / -1; text-align: left; } } /* ---- 15e. 개인결제 목록 (personalpay) ---- */ .sl-pp-note { border: 1px solid var(--bs-line); border-radius: 14px; background: var(--bs-surface); padding: 16px 20px; font-size: 12px; line-height: 1.85; color: var(--bs-ink-2); } .sl-pp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .sl-pp-card { display: flex; flex-direction: column; border: 1px solid var(--bs-line); border-radius: 16px; background: #fff; overflow: hidden; } .sl-pp-card:hover { border-color: var(--bs-brand-line); } .sl-pp-visual { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--bs-surface); border-bottom: 1px solid var(--bs-line-2); } .sl-pp-mark { color: var(--bs-ink-3); opacity: 0.55; } .sl-pp-mark-label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--bs-ink-3); opacity: 0.7; } .sl-pp-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; } .sl-pp-name { font-size: 13px; font-weight: 600; color: var(--bs-ink); text-decoration: none; } .sl-pp-price { font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 600; color: var(--bs-ink); } .sl-pp-desc { font-size: 11.5px; line-height: 1.6; color: var(--bs-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sl-pp-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--bs-muted); } .sl-pp-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--bs-line); } @media (max-width: 1399.98px) { .sl-pp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .sl-pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .sl-pp-grid { grid-template-columns: 1fr; } } /* ---- 15f. 개인결제 결제폼 (personalpayform, .sl-ppform 스코프) ---- */ @media (min-width: 1200px) { .sl-ppform .sl-col-l { flex: 0 0 auto; width: 58.333%; } .sl-ppform .sl-col-r { flex: 0 0 auto; width: 37.5%; } } .sl-ppform .sl-pp-head { display: grid; grid-template-columns: 78px 1fr; gap: 16px; align-items: center; } .sl-ppform .sl-pp-mark { width: 78px; height: 78px; border-radius: 14px; background: var(--bs-surface); border: 1px solid var(--bs-line-2); display: flex; align-items: center; justify-content: center; color: var(--bs-ink-3); opacity: 0.65; } .sl-ppform .sl-pp-title { font-size: 15px; font-weight: 600; color: var(--bs-ink); margin: 0; } .sl-ppform .sl-pp-info { display: grid; grid-template-columns: 96px 1fr; gap: 10px 16px; font-size: 12.5px; padding: 16px 0 0; margin-top: 16px; border-top: 1px dashed var(--bs-line); } .sl-ppform .sl-pp-key { color: var(--bs-muted); } .sl-ppform .sl-pp-val { color: var(--bs-ink-2); } /* 코어 제출버튼(#display_pay_button, kcp/orderform.3.php) BS5 재스타일 — 주문서(#wb_submit_slot)·개인결제(.sl-ppform) 공용, 결제하기:취소 = 2:1 */ .sl-ppform #display_pay_button, #wb_submit_slot #display_pay_button { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; } .sl-ppform #display_pay_button .btn_submit, #wb_submit_slot #display_pay_button .btn_submit { width: 100%; padding: 0.9rem 1rem; border: 0; border-radius: 12px; background: var(--bs-brand); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; } .sl-ppform #display_pay_button .btn_submit:hover, #wb_submit_slot #display_pay_button .btn_submit:hover { background: #a83a23; } .sl-ppform #display_pay_button .btn_submit:disabled, #wb_submit_slot #display_pay_button .btn_submit:disabled { opacity: 0.5; cursor: not-allowed; } .sl-ppform #display_pay_button .btn01, #wb_submit_slot #display_pay_button .btn01 { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.9rem 1rem; border: 1px solid var(--bs-line); border-radius: 12px; background: #fff; color: var(--bs-ink-2); font-size: 13px; text-decoration: none; } .sl-ppform #display_pay_button .btn01:hover, #wb_submit_slot #display_pay_button .btn01:hover { border-color: #d8d5cf; color: var(--bs-ink); } .sl-ppform #display_pay_process, #wb_submit_slot #display_pay_process { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--bs-muted); } /* ---- 15g. 현금영수증 발행 (taxsave — iframe 모달 콘텐츠) + 주문내역 목록 버튼 ---- */ .sl-cr-btn { border: 1px solid var(--bs-line); background: #fff; border-radius: 7px; padding: 4px 9px; font-size: 10.5px; color: var(--bs-ink-2); white-space: nowrap; cursor: pointer; } .sl-cr-btn:hover { border-color: var(--bs-brand); color: var(--bs-brand); } /* 목록 모달(iframe 프레임) */ .sl-cr-modal .modal-content { border: 0; border-radius: 18px; overflow: hidden; } .sl-cr-modal .modal-body { padding: 0; } .sl-cr-modal iframe { display: block; width: 100%; height: 74vh; max-height: 680px; border: 0; background: #fff; } /* taxsave 페이지(iframe 내부) 콘텐츠 카드 */ .wb-taxsave-body { margin: 0; background: #fff; } .sl-cr-card { display: flex; flex-direction: column; min-height: 100vh; } .sl-cr-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--bs-line-2); } .sl-cr-title { font-size: 15px; font-weight: 600; color: var(--bs-ink); margin: 0 0 3px; } .sl-cr-sub { font-size: 11.5px; color: var(--bs-muted); } .sl-cr-scroll { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px; display: grid; gap: 20px; } .sl-cr-sec-title { font-size: 12px; font-weight: 700; color: var(--bs-ink); letter-spacing: 0.02em; margin: 0 0 10px; } .sl-cr-list { display: grid; grid-template-columns: 100px 1fr; gap: 9px 12px; font-size: 12px; align-items: center; } .sl-cr-key { color: var(--bs-muted); } .sl-cr-val { color: var(--bs-ink-2); word-break: break-all; } .sl-cr-val.num { font-family: "Poppins", sans-serif; font-weight: 600; color: var(--bs-ink); } .sl-cr-uses { display: flex; gap: 8px; } .sl-cr-use { display: flex; align-items: center; gap: 8px; border: 1px solid var(--bs-line); border-radius: 9px; padding: 9px 14px; font-size: 12px; cursor: pointer; margin: 0; } .sl-cr-use.on { border-color: var(--bs-brand); background: var(--bs-brand-soft); font-weight: 600; } .sl-cr-amounts { border: 1px solid var(--bs-line); border-radius: 12px; background: var(--bs-surface); padding: 14px 16px; } .sl-cr-note { font-size: 11px; color: var(--bs-muted); line-height: 1.75; } .sl-cr-foot { padding: 16px 24px 20px; border-top: 1px solid var(--bs-line-2); display: grid; grid-template-columns: 2fr 1fr; gap: 8px; flex-shrink: 0; } /* 현금영수증 등록/변경 결과 (kcp/pp_cli_result → 테마 kcp_result.php) */ .sl-kr-hero { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--bs-brand-line); background: var(--bs-brand-soft); border-radius: 14px; padding: 16px 18px; } .sl-kr-hero.is-fail { border-color: #f0d5d0; background: #fdf3f1; } .sl-kr-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--bs-brand); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sl-kr-hero.is-fail .sl-kr-mark { background: #c92a2a; } .sl-kr-box { border: 1px solid var(--bs-line); border-radius: 12px; overflow: hidden; } .sl-kr-box .sl-money-row { padding: 11px 16px; } /* .sl-pop-foot(2fr 1fr)가 이 규칙보다 뒤에 있으므로 복합선택자로 순서에 상관없이 이기게 한다 */ .sl-pop-foot.sl-kr-foot { grid-template-columns: 1fr; } /* ---- 15i. 디지털 상품 다운로드 (주문상세 우측 전용 카드 — 결제확인 시에만 렌더) ---- */ .sl-dn-card { border: 1px solid var(--bs-brand-line); border-radius: 16px; overflow: hidden; background: #fff; } .sl-dn-head { display: flex; align-items: center; gap: 11px; padding: 15px 18px; background: var(--bs-brand-soft); border-bottom: 1px solid var(--bs-brand-line); } .sl-dn-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--bs-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .sl-dn-body { padding: 8px; display: grid; gap: 6px; } .sl-dn-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 11px 12px; border-radius: 11px; text-decoration: none; border: 1px solid transparent; } .sl-dn-row:hover { background: var(--bs-surface); border-color: var(--bs-line); } .sl-dn-file { font-size: 12.5px; font-weight: 600; color: var(--bs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-dn-meta { font-size: 11px; color: var(--bs-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-dn-go { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--bs-brand-line); color: var(--bs-brand); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .sl-dn-row:hover .sl-dn-go { background: var(--bs-brand); border-color: var(--bs-brand); color: #fff; } .sl-dn-foot { padding: 10px 16px 13px; border-top: 1px solid var(--bs-line-2); font-size: 11px; color: var(--bs-muted); line-height: 1.7; } /* 주문서 디지털 상품 사전 고지 */ .sl-dg-notice { border: 1px solid var(--bs-brand-line); background: var(--bs-brand-soft); border-radius: 12px; padding: 14px 17px; } .sl-dg-notice-t { font-size: 12px; font-weight: 700; color: var(--bs-brand); margin-bottom: 8px; } .sl-dg-notice-l { margin: 0; padding-left: 16px; font-size: 11.5px; color: var(--bs-ink-3); line-height: 1.9; } .sl-dg-notice-l strong { color: var(--bs-ink); font-weight: 600; } .sl-dg-notice-l a { color: var(--bs-brand); text-decoration: underline; } /* ---- 15h. 팝업창 공용 셸(.sl-pop, head.sub.php 단독 창) 사용처: 상품추천(itemrecommend), 재입고알림(itemstocksms) ---- */ /* 부모 페이지의 가운데 모달(iframe 프레임) — 새창 팝업 대체 */ .sl-pop-modal .modal-dialog { max-width: 560px; } .sl-pop-modal .modal-content { border: 0; border-radius: 18px; overflow: hidden; } .sl-pop-modal .modal-body { padding: 0; } .sl-pop-modal iframe { display: block; width: 100%; height: 76vh; max-height: 640px; border: 0; background: #fff; } /* iframe 내부 문서 */ .wb-pop-body { margin: 0; background: #fff; } /* height(=100vh) 여야 본문만 내부 스크롤되고 하단 버튼이 항상 보인다. min-height 로 두면 내용이 길 때 문서 전체가 늘어나 버튼이 화면 밖으로 밀린다. */ .sl-pop { display: flex; flex-direction: column; height: 100vh; max-width: 560px; margin: 0 auto; } .sl-pop > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .sl-pop-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--bs-line-2); flex-shrink: 0; } .sl-pop-title { font-size: 15px; font-weight: 600; color: var(--bs-ink); margin: 0 0 3px; } .sl-pop-sub { font-size: 11.5px; color: var(--bs-muted); margin: 0; line-height: 1.7; } .sl-pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 24px; display: grid; gap: 16px; align-content: start; } .sl-pop-foot { padding: 16px 24px 20px; border-top: 1px solid var(--bs-line-2); display: grid; grid-template-columns: 2fr 1fr; gap: 8px; flex-shrink: 0; } .sl-pop-foot .btn { padding: 0.72rem 1rem; } /* 상품 추천하기 */ .sl-pop-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--bs-line); border-radius: 12px; background: var(--bs-surface); padding: 12px 14px; } .sl-pop-thumb { width: 46px; height: 46px; border-radius: 9px; overflow: hidden; border: 1px solid var(--bs-line); background: #fff; flex-shrink: 0; } .sl-pop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-pop-name { font-size: 13px; font-weight: 600; color: var(--bs-ink); letter-spacing: -0.01em; line-height: 1.45; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-pop-badge { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--bs-muted); background: #fff; border: 1px solid var(--bs-line); border-radius: 5px; padding: 2px 6px; } /* 상품 추천하기 */ .sl-rec-textarea { min-height: 104px; resize: vertical; line-height: 1.7; } /* 재입고 알림(SMS) */ .sl-sms-terms { border: 1px solid var(--bs-line); border-radius: 12px; overflow: hidden; } .sl-sms-terms .sl-terms-box { max-height: 150px; padding: 14px 16px; line-height: 1.85; } .sl-sms-agree { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--bs-ink-2); cursor: pointer; margin: 0; line-height: 1.6; } /* 메일 보내기(formmail) */ .sl-fm-types { display: flex; gap: 8px; flex-wrap: wrap; } .sl-fm-type { display: flex; align-items: center; gap: 7px; border: 1px solid var(--bs-line); border-radius: 9px; padding: 8px 13px; font-size: 12px; cursor: pointer; margin: 0; } .sl-fm-type:has(input:checked) { border-color: var(--bs-brand); background: var(--bs-brand-soft); font-weight: 600; } .sl-fm-textarea { min-height: 132px; resize: vertical; line-height: 1.7; } .sl-fm-file { padding: 8px 12px; font-size: 11.5px; } .sl-fm-file::file-selector-button { border: 1px solid var(--bs-line); background: var(--bs-surface); border-radius: 7px; padding: 4px 10px; margin-right: 10px; font-size: 11px; color: var(--bs-ink-2); cursor: pointer; } .sl-fm-captcha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } /* 코어 captcha_html() 의 자동등록방지 — 바로 위에 라벨을 따로 두므로 숨긴다 */ .sl-fm-captcha legend { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sl-fm-captcha input[type="text"] { border: 1px solid var(--bs-line); border-radius: 9px; padding: 8px 12px; font-size: 12px; max-width: 150px; } /* -------------------------------------------------------------------------- 16. Cart page -------------------------------------------------------------------------- */ .sl-cart-head { display: grid; grid-template-columns: 26px minmax(280px, 1fr) 56px 84px 60px 72px 96px; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: 12px; font-size: 11.5px; font-weight: 600; color: var(--bs-ink-2); } .sl-cart-row { display: grid; grid-template-columns: 26px minmax(280px, 1fr) 56px 84px 60px 72px 96px; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--bs-line); border-radius: 14px; } .sl-cart-row + .sl-cart-row { margin-top: 10px; } .sl-cart-prod { display: flex; gap: 14px; min-width: 0; } .sl-cart-thumb { width: 76px; height: 76px; border-radius: 11px; overflow: hidden; border: 1px solid var(--bs-line); background: var(--bs-surface); flex-shrink: 0; } .sl-cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-cart-name { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.45; margin: 0; } .sl-cart-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; } .sl-opt-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: 6px; padding: 4px 8px; font-size: 11px; white-space: nowrap; } .sl-opt-chip-key { color: var(--bs-muted); } .sl-opt-chip-val { color: var(--bs-ink); font-weight: 500; } .sl-opt-chip-add { color: var(--bs-brand); font-weight: 600; font-family: "Poppins", sans-serif; font-size: 10px; } .sl-opt-chip.extra { background: #fdf6f3; border-color: var(--bs-brand-line); } .sl-opt-more { border: 1px dashed var(--bs-line); background: transparent; border-radius: 6px; padding: 4px 8px; font-size: 11px; color: var(--bs-muted); cursor: pointer; white-space: nowrap; } .sl-opt-more:hover { color: var(--bs-brand); border-color: var(--bs-brand-line); } .sl-cart-cell { font-size: 12.5px; text-align: center; } .sl-cart-num { font-family: "Poppins", sans-serif; font-weight: 600; letter-spacing: -0.02em; } .sl-cart-sum { font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; text-align: right; } .sl-cart-pay { font-size: 11px; padding: 3px 8px; border-radius: 5px; background: var(--bs-brand-tint); color: var(--bs-brand); font-weight: 600; white-space: nowrap; } .sl-cart-empty { border: 1px solid var(--bs-line); border-radius: 16px; padding: 72px 20px; text-align: center; } .sl-sum-card { border: 1px solid var(--bs-line); border-radius: 16px; overflow: hidden; position: sticky; top: 24px; } .sl-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; font-size: 12.5px; } .sl-sum-row + .sl-sum-row { border-top: 1px solid var(--bs-line-2); } .sl-sum-total { background: var(--bs-brand-soft); border-top: 1px solid var(--bs-brand-line); padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .sl-sum-total-val { font-family: "Poppins", sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: var(--bs-brand); } .sl-free-bar { height: 5px; border-radius: 999px; background: var(--bs-line); overflow: hidden; margin-top: 8px; } .sl-free-fill { height: 100%; background: var(--bs-brand); border-radius: 999px; } @media (max-width: 1399.98px) { .sl-cart-head { display: none; } .sl-cart-row { grid-template-columns: 26px 1fr; row-gap: 14px; } .sl-cart-row > .sl-cart-cell, .sl-cart-row > .sl-cart-sum { grid-column: 2; text-align: left; display: flex; align-items: center; gap: 8px; } .sl-cart-row > .sl-cart-cell::before { content: attr(data-label); font-size: 11px; color: var(--bs-muted); width: 52px; flex-shrink: 0; } .sl-cart-row > .sl-cart-sum::before { content: "소계"; font-size: 11px; color: var(--bs-muted); width: 52px; flex-shrink: 0; font-family: "IBM Plex Sans KR", sans-serif; font-weight: 400; } } /* -------------------------------------------------------------------------- 17. Option edit modal (cart) -------------------------------------------------------------------------- */ .sl-modal-back { position: fixed; inset: 0; z-index: 1050; background: rgba(20,19,15,.42); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; } .sl-modal { width: 100%; max-width: 480px; max-height: 88vh; background: #fff; border-radius: 18px; border: 1px solid var(--bs-line); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(20,19,15,.18); } .sl-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--bs-line-2); } .sl-modal-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .sl-modal-body { padding: 20px 22px; overflow-y: auto; } .sl-modal-foot { padding: 16px 22px; border-top: 1px solid var(--bs-line-2); display: flex; align-items: center; gap: 10px; } .sl-modal-x { border: 0; background: transparent; color: var(--bs-muted-2); font-size: 18px; line-height: 1; padding: 2px 4px; cursor: pointer; } .sl-modal-x:hover { color: var(--bs-ink); } .sl-modal-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0 0; margin-top: 16px; border-top: 1px solid var(--bs-line); } /* -------------------------------------------------------------------------- 18. Order form page -------------------------------------------------------------------------- */ .sl-od-row { display: grid; grid-template-columns: minmax(240px, 1fr) 56px 84px 96px 60px 72px; align-items: center; gap: 10px; padding: 14px 16px; } .sl-od-row + .sl-od-row { border-top: 1px solid var(--bs-line-2); } .sl-od-head { background: var(--bs-surface); border-bottom: 1px solid var(--bs-line); font-size: 11.5px; font-weight: 600; color: var(--bs-ink-2); padding: 11px 16px; } .sl-od-prod { display: flex; gap: 12px; min-width: 0; } .sl-od-thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--bs-line); background: var(--bs-surface); flex-shrink: 0; } .sl-od-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-radio-card { display: flex; align-items: center; gap: 9px; border: 1px solid var(--bs-line); border-radius: 10px; padding: 11px 14px; font-size: 12.5px; cursor: pointer; flex: 1; min-width: 150px; } .sl-radio-card.on { border-color: var(--bs-brand); background: var(--bs-brand-soft); font-weight: 600; } .form-select.sl-input { border-radius: 10px; border-color: var(--bs-line); background-color: var(--bs-surface); font-size: 13px; padding: 0.66rem 2rem 0.66rem 0.85rem; color: var(--bs-ink); } .form-select.sl-input:focus { background-color: #fff; border-color: #e0cec7; box-shadow: 0 0 0 3px rgba(196,71,44,.09); } textarea.sl-input { min-height: 84px; resize: vertical; } .sl-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; } .sl-pay-opt { display: flex; align-items: center; gap: 9px; border: 1px solid var(--bs-line); border-radius: 10px; padding: 13px 14px; font-size: 12.5px; cursor: pointer; } .sl-pay-opt.on { border-color: var(--bs-brand); background: var(--bs-brand-soft); font-weight: 600; } .sl-pay-note { font-size: 11.5px; color: var(--bs-ink-3); background: var(--bs-surface); border-radius: 10px; padding: 12px 14px; line-height: 1.8; } @media (max-width: 767.98px) { .sl-od-head { display: none; } .sl-od-row { grid-template-columns: 1fr; row-gap: 10px; } .sl-od-row > .sl-cart-cell, .sl-od-row > .sl-cart-sum { text-align: left; display: flex; align-items: center; gap: 8px; } .sl-od-row > .sl-cart-cell::before { content: attr(data-label); font-size: 11px; color: var(--bs-muted); width: 52px; flex-shrink: 0; } .sl-od-row > .sl-cart-sum::before { content: "소계"; font-size: 11px; color: var(--bs-muted); width: 52px; flex-shrink: 0; font-family: "IBM Plex Sans KR", sans-serif; font-weight: 400; } } /* -------------------------------------------------------------------------- 19. Order complete / detail page -------------------------------------------------------------------------- */ .sl-done-hero { border: 1px solid var(--bs-brand-line); background: var(--bs-brand-soft); border-radius: 18px; padding: 34px 30px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .sl-done-mark { width: 54px; height: 54px; border-radius: 999px; background: var(--bs-brand); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sl-ordno { font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; } .sl-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 4px; } .sl-track-step { text-align: center; position: relative; padding-top: 26px; font-size: 11.5px; color: var(--bs-muted); } .sl-track-step::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--bs-line); } .sl-track-step:first-child::before { left: 50%; } .sl-track-step:last-child::before { right: 50%; } .sl-track-dot { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 999px; background: #fff; border: 2px solid var(--bs-line); } .sl-track-step.on { color: var(--bs-brand); font-weight: 600; } .sl-track-step.on .sl-track-dot { border-color: var(--bs-brand); background: var(--bs-brand); } .sl-track-step.on::before { background: var(--bs-brand-line); } .sl-track-desc { font-size: 11px; color: var(--bs-muted-2); margin-top: 3px; } .sl-dl { display: grid; grid-template-columns: 92px 1fr; row-gap: 11px; column-gap: 14px; font-size: 12.5px; margin: 0; } .sl-dl dt { color: var(--bs-muted); font-weight: 500; } .sl-dl dd { margin: 0; color: var(--bs-ink); } .sl-money-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; font-size: 12.5px; } .sl-money-row + .sl-money-row { border-top: 1px solid var(--bs-line-2); } .sl-state-tag { font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 5px; background: var(--bs-brand-tint); color: var(--bs-brand); white-space: nowrap; } .sl-state-tag.is-cancel { background: #fdeaea; color: #c92a2a; } /* 주문취소 상태 히어로/진행상태 */ .sl-done-hero.is-cancel { border-color: #f0d2d2; background: #fdf3f3; } .sl-done-hero.is-cancel .sl-done-mark { background: #e03131; } .wb-track-cancel { display: flex; align-items: center; gap: 13px; padding: 12px 2px 2px; } .wb-track-cancel-mark { width: 34px; height: 34px; border-radius: 999px; background: #fdeaea; border: 1px solid #f3d3d3; color: #e03131; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sl-guide { border: 1px solid var(--bs-line); border-radius: 14px; padding: 16px 18px; font-size: 12px; color: var(--bs-ink-3); line-height: 1.95; } .sl-bank-box { background: #fff; border: 1px dashed var(--bs-brand-line); border-radius: 12px; padding: 14px 16px; } .sl-cancel-box { border: 1px solid var(--bs-line); border-radius: 14px; padding: 16px 18px; margin-top: 12px; } /* -------------------------------------------------------------------------- 20. My page -------------------------------------------------------------------------- */ .sl-my-card { border: 1px solid var(--bs-line); border-radius: 16px; background: #fff; } .sl-my-profile { border: 1px solid var(--bs-brand-line); background: var(--bs-brand-soft); border-radius: 16px; padding: 24px 22px; } .sl-my-avatar { width: 64px; height: 64px; border-radius: 999px; background: #fff; border: 1px solid var(--bs-brand-line); display: flex; align-items: center; justify-content: center; color: var(--bs-brand); flex-shrink: 0; } .sl-my-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 20px; } .sl-my-stat { background: #fff; border: 1px solid var(--bs-brand-line); border-radius: 11px; padding: 12px 13px; text-decoration: none; display: block; } .sl-my-stat:hover { border-color: var(--bs-brand); } .sl-my-stat-k { font-size: 11px; color: var(--bs-muted); display: block; } .sl-my-stat-v { font-family: "Poppins", sans-serif; font-size: 19px; font-weight: 600; color: var(--bs-ink); letter-spacing: -0.02em; } .sl-my-stat-u { font-size: 11px; color: var(--bs-muted-2); margin-left: 2px; } .sl-my-nav { display: flex; flex-direction: column; margin-top: 12px; } .sl-my-nav a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; font-size: 12.5px; color: var(--bs-ink-2); text-decoration: none; } .sl-my-nav a + a { border-top: 1px solid var(--bs-line-2); } .sl-my-nav a:hover { background: var(--bs-surface); color: var(--bs-brand); } .sl-my-nav a.on { color: var(--bs-brand); font-weight: 600; background: var(--bs-brand-soft); } .sl-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--bs-line); } .sl-sec-title { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -0.01em; } .sl-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sl-info-cell { padding: 16px 20px; border-bottom: 1px solid var(--bs-line-2); } .sl-info-cell:nth-child(odd) { border-right: 1px solid var(--bs-line-2); } .sl-info-k { font-size: 11px; color: var(--bs-muted); display: block; } .sl-info-v { font-size: 12.5px; color: var(--bs-ink); margin-top: 6px; word-break: break-all; } .sl-info-v.none { color: var(--bs-muted-2); } .sl-ord-row { display: grid; grid-template-columns: 168px 1fr 60px 110px 110px 96px; align-items: center; gap: 10px; padding: 14px 20px; font-size: 12.5px; } .sl-ord-row + .sl-ord-row { border-top: 1px solid var(--bs-line-2); } .sl-ord-head { background: var(--bs-surface); font-size: 11.5px; font-weight: 600; color: var(--bs-ink-2); padding: 11px 20px; border-bottom: 1px solid var(--bs-line); } .sl-ordlink { font-family: "Poppins", sans-serif; font-weight: 600; color: var(--bs-brand); text-decoration: none; } .sl-ordlink:hover { text-decoration: underline; } .sl-wish-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 20px; } .sl-wish-card { text-decoration: none; display: block; } .sl-wish-img { aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--bs-line); background: var(--bs-surface); display: block; } .sl-wish-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-wish-name { font-size: 12px; color: var(--bs-ink); margin: 9px 0 0; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sl-wish-price { font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600; margin-top: 4px; color: var(--bs-ink); } @media (max-width: 1199.98px) { .sl-wish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .sl-ord-head { display: none; } .sl-ord-row { grid-template-columns: 1fr; row-gap: 8px; } .sl-ord-row > span[data-label]::before { content: attr(data-label); font-size: 11px; color: var(--bs-muted); margin-right: 8px; } .sl-ord-row > span[data-label] { text-align: left !important; } } @media (max-width: 575.98px) { .sl-info-grid { grid-template-columns: 1fr; } .sl-info-cell:nth-child(odd) { border-right: 0; } } /* -------------------------------------------------------------------------- 21. Wishlist page -------------------------------------------------------------------------- */ .btn-sl-danger { --bs-btn-color: var(--bs-brand); --bs-btn-bg: #fff; --bs-btn-border-color: var(--bs-brand-line); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-brand); --bs-btn-hover-border-color: var(--bs-brand); --bs-btn-active-color: #fff; --bs-btn-active-bg: #ad3d25; --bs-btn-active-border-color: #ad3d25; --bs-btn-disabled-color: var(--bs-muted-2); --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--bs-line); } .sl-wl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid var(--bs-line); border-radius: 14px; padding: 12px 16px; background: #fff; } .sl-wl-bar .btn { --bs-btn-font-size: 12.5px; --bs-btn-font-weight: 500; --bs-btn-padding-x: 1rem; --bs-btn-padding-y: 0.5rem; } /* 마이페이지 우측 컬럼 안에 들어가므로 컨테이너 폭 기준으로 자동 조정 */ .sl-wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; } .sl-wl-card { border: 1px solid var(--bs-line); border-radius: 16px; background: #fff; overflow: hidden; position: relative; transition: border-color .16s ease, box-shadow .16s ease; } .sl-wl-card:hover { border-color: #e2d3cc; box-shadow: 0 10px 26px -20px rgba(60, 30, 20, .3); } .sl-wl-card.on { border-color: var(--bs-brand); } .sl-wl-figure { display: block; aspect-ratio: 1; background: var(--bs-surface); position: relative; } .sl-wl-figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-wl-check { position: absolute; top: 10px; left: 10px; z-index: 2; } .sl-wl-del { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--bs-line); background: rgba(255,255,255,.92); color: var(--bs-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; } .sl-wl-del:hover { color: var(--bs-brand); border-color: var(--bs-brand-line); background: #fff; } .sl-wl-body { padding: 14px 16px 16px; } .sl-wl-name { font-size: 13px; font-weight: 500; color: var(--bs-ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sl-wl-price { font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; color: var(--bs-ink); } .sl-wl-date { font-size: 11px; color: var(--bs-muted-2); margin-top: 8px; } .sl-wl-acts { display: flex; gap: 6px; margin-top: 12px; } .sl-wl-acts .btn { --bs-btn-font-size: 12.5px; --bs-btn-font-weight: 500; --bs-btn-padding-x: 0.85rem; --bs-btn-padding-y: 0.5rem; } .sl-wl-soldout { position: absolute; inset: 0; background: rgba(255,255,255,.74); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--bs-ink-2); letter-spacing: 0.02em; } @media (max-width: 767.98px) { .sl-wl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } } /* -------------------------------------------------------------------------- 22. Point history page -------------------------------------------------------------------------- */ .sl-pt-hero { border: 1px solid var(--bs-brand-line); background: var(--bs-brand-soft); border-radius: 16px; padding: 22px 24px; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 18px; align-items: center; } .sl-pt-hero-cell + .sl-pt-hero-cell { border-left: 1px solid var(--bs-brand-line); padding-left: 18px; } .sl-pt-k { font-size: 11.5px; color: var(--bs-muted); display: block; } .sl-pt-v { font-family: "Poppins", sans-serif; font-weight: 600; letter-spacing: -0.03em; color: var(--bs-ink); margin-top: 5px; } .sl-pt-row { display: grid; grid-template-columns: 1fr 150px 110px 110px; align-items: center; gap: 12px; padding: 15px 20px; } .sl-pt-row + .sl-pt-row { border-top: 1px solid var(--bs-line-2); } .sl-pt-head { background: var(--bs-surface); border-bottom: 1px solid var(--bs-line); font-size: 11.5px; font-weight: 600; color: var(--bs-ink-2); padding: 11px 20px; } .sl-pt-foot { display: grid; grid-template-columns: 1fr 150px 110px 110px; gap: 12px; padding: 14px 20px; background: var(--bs-ink); color: #fff; font-size: 12.5px; font-weight: 600; border-radius: 0 0 15px 15px; } .sl-pt-desc { font-size: 12.5px; color: var(--bs-ink); font-weight: 500; } .sl-pt-sub { font-size: 11px; color: var(--bs-muted-2); margin-top: 4px; } .sl-pt-num { font-family: "Poppins", sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; text-align: right; } .sl-pt-plus { color: var(--bs-brand); } .sl-pt-minus { color: var(--bs-ink-2); } .sl-pt-exp { font-size: 11px; color: var(--bs-muted-2); text-align: right; } @media (max-width: 991.98px) { .sl-pt-hero { grid-template-columns: repeat(2, 1fr); } .sl-pt-hero-cell + .sl-pt-hero-cell { border-left: 0; padding-left: 0; } } @media (max-width: 767.98px) { .sl-pt-head { display: none; } .sl-pt-row, .sl-pt-foot { grid-template-columns: 1fr auto; row-gap: 6px; } .sl-pt-row > div:nth-child(4) .sl-pt-exp, .sl-pt-foot > span:nth-child(2) { display: none; } } /* -------------------------------------------------------------------------- 23. Order inquiry (list) page — 단일 전체폭 페이지 -------------------------------------------------------------------------- */ .sl-oh-row { display: grid; grid-template-columns: 150px 1fr 58px 108px 108px 108px 92px; align-items: center; gap: 10px; padding: 14px 20px; font-size: 12.5px; } .sl-oh-row + .sl-oh-row { border-top: 1px solid var(--bs-line-2); } .sl-oh-head { background: var(--bs-surface); font-size: 11.5px; font-weight: 600; color: var(--bs-ink-2); padding: 11px 20px; border-bottom: 1px solid var(--bs-line); } .sl-oh-no { font-family: "Poppins", sans-serif; font-size: 12.5px; font-weight: 600; color: var(--bs-ink); } .sl-oh-no:hover { color: var(--bs-brand); text-decoration: underline; } .sl-oh-goods { display: flex; align-items: center; gap: 12px; min-width: 0; } .sl-oh-thumb { flex-shrink: 0; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--bs-surface); border: 1px solid var(--bs-line); } .sl-oh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-oh-title { font-size: 12.5px; color: var(--bs-ink); font-weight: 500; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sl-oh-date { font-size: 11px; color: var(--bs-muted-2); margin-top: 4px; } .sl-oh-num { font-family: "Poppins", sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: -0.02em; text-align: right; color: var(--bs-ink); } /* 상태 태그 (.sl-badge-state 위에 얹음) — 디지털: 입금확인중 / 처리중 / 제공완료 / 취소 */ .sl-tag-wait { background: var(--bs-surface); color: var(--bs-muted); border: 1px solid var(--bs-line); } .sl-tag-proc { background: var(--bs-brand-soft); color: var(--bs-brand); border: 1px solid var(--bs-brand-line); } .sl-tag-done { background: var(--bs-brand-tint); color: var(--bs-brand); } .sl-tag-cancel { background: #fff; color: var(--bs-muted-2); border: 1px solid var(--bs-line); } /* -------------------------------------------------------------------------- 23. 쿠폰 보관함 (coupon.php) — 티켓형 카드 -------------------------------------------------------------------------- */ .sl-cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; } .sl-cp { display: grid; grid-template-columns: 154px 1fr; border: 1px solid var(--bs-line); border-radius: 14px; background: #fff; overflow: hidden; } .sl-cp-amt { background: var(--bs-brand-soft); border-right: 1px dashed var(--bs-brand-line); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 12px; text-align: center; } .sl-cp-val { font-family: "Poppins", sans-serif; font-size: 27px; font-weight: 600; letter-spacing: -0.04em; color: var(--bs-brand); line-height: 1.1; } .sl-cp-unit { font-size: 13px; font-weight: 500; margin-left: 1px; } .sl-cp-type { font-size: 10.5px; color: var(--bs-muted); margin-top: 7px; } .sl-cp-body { padding: 17px 18px; display: flex; flex-direction: column; gap: 7px; min-width: 0; } .sl-cp-name { font-size: 13px; font-weight: 600; color: var(--bs-ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sl-cp-meta { font-size: 11px; color: var(--bs-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sl-cp-date { font-family: "Poppins", sans-serif; font-size: 11.5px; color: var(--bs-ink-3); } .sl-cp-min { font-size: 11px; color: var(--bs-muted-2); } .sl-cp-soon { border-color: var(--bs-brand-line); } @media (max-width: 575.98px) { .sl-cp { grid-template-columns: 118px 1fr; } .sl-cp-val { font-size: 22px; } } /* -------------------------------------------------------------------------- 24. 쿠폰 받기 / 쿠폰존 (couponzone.php) — 다운로드 티켓 카드 -------------------------------------------------------------------------- */ .sl-sec-lead { border-left: 3px solid var(--bs-brand); padding-left: 14px; } .sl-dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .sl-dc { border: 1px solid var(--bs-line); border-radius: 16px; background: #fff; overflow: hidden; display: flex; flex-direction: column; } .sl-dc-top { position: relative; padding: 22px 22px 26px; color: #fff; overflow: hidden; } .sl-dc-brand { background: linear-gradient(122deg, #c4472c 0%, #a83a22 100%); } .sl-dc-ink { background: linear-gradient(122deg, #2c3239 0%, #171b20 100%); } .sl-dc-top::after { content: ""; position: absolute; top: -40%; right: -18%; width: 74%; height: 190%; background: rgba(255, 255, 255, .07); transform: rotate(22deg); } .sl-dc-wm { font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; opacity: .92; } .sl-dc-sub { font-size: 9.5px; letter-spacing: .2em; opacity: .62; margin-top: 3px; } .sl-dc-val { font-family: "Poppins", sans-serif; font-size: 40px; font-weight: 600; letter-spacing: -.045em; line-height: 1; margin-top: 20px; } .sl-dc-val small { font-size: 17px; font-weight: 500; margin-left: 2px; } .sl-dc-kind { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; opacity: .82; margin-top: 12px; } .sl-dc-cut { border-top: 1px dashed rgba(255, 255, 255, .42); margin-top: 16px; } .sl-dc-body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .sl-dc-name { font-size: 13px; font-weight: 600; color: var(--bs-ink); margin: 0; } .sl-dc-meta { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--bs-muted); } .sl-dc-meta b { color: var(--bs-ink-3); font-weight: 500; } .sl-dc-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; } .sl-dc-foot .btn { --bs-btn-font-size: 12.5px; --bs-btn-padding-y: 0.55rem; --bs-btn-padding-x: 1rem; } .sl-dc-foot .btn.disabled, .sl-dc-foot .btn:disabled { opacity: .5; } /* -------------------------------------------------------------------------- 25. 쪽지함 모달 (memo) — 팝업 대신 인페이지 모달 -------------------------------------------------------------------------- */ .wb-memo-modal { border: 1px solid var(--bs-line); border-radius: 18px; } .wb-memo-modal .modal-header { border-bottom: 1px solid var(--bs-line); padding: 20px 24px; align-items: flex-start; } .wb-memo-modal .modal-body { padding: 18px 24px 24px; } .wb-memo-modal .btn-close { margin-top: 2px; } .sl-mm-tabs { display: flex; align-items: center; border-bottom: 1px solid var(--bs-line); } .sl-mm-tab { border: 0; background: transparent; padding: 9px 2px; font-size: 13px; font-weight: 600; color: var(--bs-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; } .sl-mm-tab + .sl-mm-tab { margin-left: 18px; } .sl-mm-tab:hover { color: var(--bs-ink-2); } .sl-mm-tab.on { color: var(--bs-ink); border-bottom-color: var(--bs-brand); } .sl-mm-tab-n { font-family: "Poppins", sans-serif; font-size: 10.5px; font-weight: 600; color: var(--bs-brand); background: var(--bs-brand-tint); border-radius: 999px; padding: 1px 7px; } .sl-mm-row { position: relative; display: grid; grid-template-columns: 40px 1fr 26px; gap: 12px; align-items: start; padding: 14px 8px; border-bottom: 1px solid var(--bs-line-2); cursor: pointer; } .sl-mm-row:last-child { border-bottom: 0; } .sl-mm-row:hover { background: var(--bs-surface); } .sl-mm-row.unread { background: #fdf7f5; } .sl-mm-av { width: 40px; height: 40px; border-radius: 999px; background: var(--bs-brand-soft); color: var(--bs-brand); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; flex-shrink: 0; } .sl-mm-top { display: flex; align-items: center; gap: 7px; } .sl-mm-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--bs-brand); flex-shrink: 0; } .sl-mm-who { border: 0; background: transparent; padding: 0; font-size: 13px; font-weight: 600; color: var(--bs-ink); cursor: pointer; } .sl-mm-who:hover { color: var(--bs-brand); text-decoration: underline; } .sl-mm-time { font-family: "Poppins", sans-serif; font-size: 11px; color: var(--bs-muted-2); margin-left: auto; white-space: nowrap; } .sl-mm-text { font-size: 12.5px; color: var(--bs-ink-2); margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-mm-del { border: 0; background: transparent; color: var(--bs-muted-2); font-size: 13px; cursor: pointer; line-height: 1; padding: 5px; border-radius: 6px; align-self: center; } .sl-mm-del:hover { color: var(--bs-brand); background: var(--bs-brand-soft); } .sl-mm-open { padding: 16px 16px 16px 64px; } .sl-mm-quote { background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: 12px; padding: 14px 16px; font-size: 12.5px; line-height: 1.85; color: var(--bs-ink); white-space: pre-wrap; word-break: break-word; } .sl-mm-menu { position: absolute; top: 100%; left: 0; z-index: 5; margin-top: 5px; background: #fff; border: 1px solid var(--bs-line); border-radius: 10px; box-shadow: 0 12px 28px rgba(20,19,15,.14); padding: 5px; min-width: 132px; display: flex; flex-direction: column; } .sl-mm-menu button { border: 0; background: transparent; text-align: left; padding: 7px 10px; font-size: 12.5px; color: var(--bs-ink-2); border-radius: 7px; cursor: pointer; } .sl-mm-menu button:hover { background: var(--bs-surface); color: var(--bs-ink); } /* 프로필 드롭다운 쪽지 배지 */ .wb-user-menu .wb-memo-badge { margin-left: auto; font-family: "Poppins", sans-serif; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--bs-brand); border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; } /* -------------------------------------------------------------------------- 26. 자주 묻는 질문 (faq.php) — 히어로 검색 + 분류칩 + 아코디언 -------------------------------------------------------------------------- */ .sl-faq-hero { border: 1px solid var(--bs-brand-line); background: var(--bs-brand-soft); border-radius: 18px; padding: 40px 30px 42px; text-align: center; } .sl-faq-search { display: flex; gap: 8px; max-width: 470px; margin: 20px auto 0; } .sl-faq-cats { display: flex; gap: 7px; flex-wrap: wrap; } .sl-faq-cat { border: 1px solid var(--bs-line); background: #fff; border-radius: 999px; padding: 8px 17px; font-size: 12.5px; color: var(--bs-ink-2); cursor: pointer; transition: all .14s ease; } .sl-faq-cat:hover { border-color: var(--bs-brand-line); color: var(--bs-brand); } .sl-faq-cat.on { background: var(--bs-brand); border-color: var(--bs-brand); color: #fff; font-weight: 600; } .sl-faq-cat-n { font-family: "Poppins", sans-serif; font-size: 11px; margin-left: 6px; opacity: .7; } .sl-faq-item { border-bottom: 1px solid var(--bs-line-2); } .sl-faq-item:last-child { border-bottom: 0; } .sl-faq-q { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: 0; padding: 20px 4px; cursor: pointer; } .sl-faq-mark { font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 600; color: var(--bs-brand); line-height: 1; flex-shrink: 0; width: 18px; } .sl-faq-title { font-size: 14px; font-weight: 500; color: var(--bs-ink); flex: 1; letter-spacing: -.01em; } .sl-faq-item.on .sl-faq-title { color: var(--bs-brand); font-weight: 600; } .sl-faq-sign { width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--bs-line); color: var(--bs-muted); font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sl-faq-item.on .sl-faq-sign { background: var(--bs-brand); border-color: var(--bs-brand); color: #fff; } .sl-faq-a { display: flex; gap: 14px; padding: 0 4px 22px; } .sl-faq-a-mark { font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 600; color: var(--bs-muted-2); line-height: 1; flex-shrink: 0; width: 18px; } .sl-faq-body { background: var(--bs-surface); border-radius: 12px; padding: 17px 19px; font-size: 12.5px; line-height: 2; color: var(--bs-ink-3); flex: 1; } .sl-faq-tag { display: inline-block; font-size: 10.5px; color: var(--bs-muted); border: 1px solid var(--bs-line); border-radius: 5px; padding: 2px 7px; margin-right: 5px; } @media (max-width: 575.98px) { .sl-faq-hero { padding: 28px 18px 30px; } .sl-faq-search { flex-direction: column; } } @media (max-width: 991.98px) { /* 입금액·미입금액 열 숨김 → 남는 5개(번호·상품·상품수·주문금액·상태)에 맞춘 5열 */ .sl-oh-row, .sl-oh-head { grid-template-columns: 122px 1fr 52px 104px 88px; } .sl-oh-row > span:nth-child(5), .sl-oh-row > span:nth-child(6), .sl-oh-head > span:nth-child(5), .sl-oh-head > span:nth-child(6) { display: none; } } @media (max-width: 767.98px) { .sl-oh-head { display: none; } .sl-oh-row { grid-template-columns: 1fr; row-gap: 8px; padding: 16px; } .sl-oh-row > span:nth-child(5), .sl-oh-row > span:nth-child(6) { display: flex; } .sl-oh-row > span[data-label] { display: flex; justify-content: space-between; align-items: center; text-align: right !important; } .sl-oh-row > span[data-label]::before { content: attr(data-label); color: var(--bs-muted); font-size: 11px; font-weight: 500; } } /* -------------------------------------------------------------------------- 27. 설치의뢰 / 1:1문의 게시판 (qa) — list / view / write -------------------------------------------------------------------------- */ .sl-bw-sec, .sl-bv-sec { border: 1px solid var(--bs-line); border-radius: 16px; background: #fff; } .sl-bw-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 15px 22px; border-bottom: 1px solid var(--bs-line); } .sl-bw-num { font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 600; color: var(--bs-brand); background: var(--bs-brand-tint); border-radius: 5px; padding: 3px 8px; } .sl-bw-title { font-size: 13.5px; font-weight: 600; margin: 0; letter-spacing: -.01em; } .sl-bw-body { padding: 22px; } .sl-bw-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .sl-bw-actions .btn { --bs-btn-padding-x: 1.9rem; --bs-btn-padding-y: 0.72rem; --bs-btn-font-size: 13px; } .sl-ed-shell { border: 1px solid var(--bs-line); border-radius: 12px; overflow: hidden; background: #fff; } .sl-ed-shell .qa_content_wrap, .sl-ed-shell textarea { width: 100%; } .sl-ed-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--bs-line); padding: 10px 14px; background: #fff; } .sl-file-row { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--bs-line); border-radius: 12px; padding: 13px 16px; background: var(--bs-surface); } .sl-file-row + .sl-file-row { margin-top: 8px; } .sl-file-ico { width: 34px; height: 34px; border-radius: 9px; background: #fff; border: 1px solid var(--bs-line); color: var(--bs-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sl-file-row input[type="file"] { font-size: 12px; color: var(--bs-ink-3); min-width: 0; } .sl-file-del { font-size: 11.5px; color: var(--bs-muted); margin-left: auto; white-space: nowrap; } .sl-bv-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--bs-line); } .sl-bv-cat { display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--bs-brand); background: var(--bs-brand-tint); border-radius: 5px; padding: 4px 9px; vertical-align: 3px; margin-right: 9px; } .sl-bv-title { font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--bs-ink); display: inline; } .sl-bv-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 15px; font-size: 11.5px; color: var(--bs-muted); } .sl-bv-meta-i { display: flex; align-items: center; gap: 5px; } .sl-bv-tools { display: flex; gap: 6px; margin-left: auto; position: relative; } .sl-bv-tool { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--bs-line); background: #fff; color: var(--bs-muted); display: flex; align-items: center; justify-content: center; } .sl-bv-tool:hover { color: var(--bs-brand); border-color: var(--bs-brand-line); } .sl-bv-body { padding: 26px 24px 30px; font-size: 13px; line-height: 2.05; color: var(--bs-ink-3); } .sl-bv-body img { max-width: 100%; height: auto; } .sl-bv-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; } .sl-bv-shot { border: 1px solid var(--bs-line); border-radius: 12px; overflow: hidden; background: var(--bs-surface); aspect-ratio: 4 / 3; } .sl-bv-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-att { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--bs-line-2); padding: 13px 24px; font-size: 12.5px; } .sl-att-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--bs-surface); border: 1px solid var(--bs-line); color: var(--bs-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sl-att-name { color: var(--bs-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-att-size { font-family: "Poppins", sans-serif; font-size: 11px; color: var(--bs-muted-2); } .sl-bv-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .sl-bv-navlink { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--bs-ink-2); text-decoration: none; border: 1px solid var(--bs-line); border-radius: 11px; padding: 11px 16px; background: #fff; max-width: 48%; } .sl-bv-navlink:hover { border-color: var(--bs-brand-line); color: var(--bs-brand); } .sl-bv-navk { font-size: 11px; color: var(--bs-muted-2); flex-shrink: 0; } .sl-bv-navt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-ans { border: 1px solid var(--bs-brand-line); background: var(--bs-brand-soft); border-radius: 16px; padding: 20px 22px; } .sl-ans-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #fff; background: var(--bs-brand); border-radius: 999px; padding: 5px 12px; } .sl-ans-body { font-size: 12.5px; color: var(--bs-ink-3); line-height: 2; margin-top: 14px; } .sl-ans-body img { max-width: 100%; height: auto; } .sl-rel-row { display: grid; grid-template-columns: 1fr 96px 88px; align-items: center; gap: 12px; padding: 13px 20px; text-decoration: none; } .sl-rel-row + .sl-rel-row { border-top: 1px solid var(--bs-line-2); } .sl-rel-row:hover { background: var(--bs-surface); } .sl-rel-head { background: var(--bs-surface); border-bottom: 1px solid var(--bs-line); font-size: 11.5px; font-weight: 600; color: var(--bs-ink-2); padding: 11px 20px; } .sl-rel-head:hover { background: var(--bs-surface); } .sl-rel-t { font-size: 12.5px; color: var(--bs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-bl-cats { display: flex; gap: 7px; flex-wrap: wrap; } .sl-bl-cat { border: 1px solid var(--bs-line); background: #fff; border-radius: 999px; padding: 8px 18px; font-size: 12.5px; color: var(--bs-ink-2); text-decoration: none; display: inline-block; } .sl-bl-cat:hover { border-color: var(--bs-brand-line); color: var(--bs-brand); } .sl-bl-cat.on { background: var(--bs-brand); border-color: var(--bs-brand); color: #fff; font-weight: 600; } .sl-bl-tool { width: 33px; height: 33px; border-radius: 9px; border: 1px solid var(--bs-line); background: #fff; color: var(--bs-muted); display: flex; align-items: center; justify-content: center; } .sl-bl-tool:hover { color: var(--bs-brand); border-color: var(--bs-brand-line); } .sl-bl-row { display: grid; grid-template-columns: 34px 54px 1fr 96px 90px 92px; align-items: center; gap: 12px; padding: 14px 20px; } .sl-bl-row + .sl-bl-row { border-top: 1px solid var(--bs-line-2); } .sl-bl-row:hover { background: var(--bs-surface); } .sl-bl-head { background: var(--bs-surface); border-bottom: 1px solid var(--bs-line); font-size: 11.5px; font-weight: 600; color: var(--bs-ink-2); padding: 11px 20px; } .sl-bl-head:hover { background: var(--bs-surface); } .sl-bl-no { font-family: "Poppins", sans-serif; font-size: 12px; color: var(--bs-muted); text-align: center; } .sl-bl-subject { display: flex; align-items: center; gap: 8px; min-width: 0; } .sl-bl-link { font-size: 13px; color: var(--bs-ink); text-decoration: none; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-bl-link:hover { color: var(--bs-brand); text-decoration: underline; } .sl-cat-chip { font-size: 10px; font-weight: 600; color: var(--bs-brand); background: var(--bs-brand-tint); border-radius: 4px; padding: 3px 7px; flex-shrink: 0; } .sl-bl-clip { color: var(--bs-muted-2); flex-shrink: 0; display: inline-flex; } .sl-bl-writer { font-size: 12px; color: var(--bs-ink-2); white-space: nowrap; text-align: center; overflow: visible; } .sl-bl-writer .sv_wrap { max-width: 100%; } .sl-bl-writer .sv_member, .sl-bl-writer .sv_guest { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .sl-bl-date { font-family: "Poppins", sans-serif; font-size: 11.5px; color: var(--bs-muted); text-align: center; } /* ---- 27b. 전체 게시물 (bbs/new.php — 최고관리자 전용) ---- */ .sl-nw-sch { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr) 120px; gap: 12px; align-items: end; } .sl-nw-sch-btn .btn { padding: 0.62rem 1rem; } .sl-nw-row { display: grid; grid-template-columns: 34px 120px 130px 1fr 110px 84px; align-items: center; gap: 12px; padding: 13px 20px; } .sl-nw-row + .sl-nw-row { border-top: 1px solid var(--bs-line-2); } .sl-nw-row:hover { background: var(--bs-surface); } .sl-nw-head { background: var(--bs-surface); border-bottom: 1px solid var(--bs-line); font-size: 11.5px; font-weight: 600; color: var(--bs-ink-2); padding: 11px 20px; } .sl-nw-head:hover { background: var(--bs-surface); } .sl-nw-meta { font-size: 11.5px; color: var(--bs-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-nw-meta a { color: var(--bs-ink-3); text-decoration: none; } .sl-nw-meta a:hover { color: var(--bs-brand); text-decoration: underline; } .sl-nw-cm { flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--bs-brand); background: #fdeee8; border: 1px solid #f4d8cd; border-radius: 5px; padding: 2px 6px; } @media (max-width: 991.98px) { .sl-nw-sch { grid-template-columns: 1fr 1fr; } .sl-nw-sch > :nth-child(3), .sl-nw-sch-btn { grid-column: 1 / -1; } .sl-nw-head { display: none; } .sl-nw-row { grid-template-columns: 34px 1fr; row-gap: 6px; } .sl-nw-row > .sl-bl-subject { grid-column: 2; } .sl-nw-row > .sl-nw-meta, .sl-nw-row > .sl-bl-writer, .sl-nw-row > .sl-bl-date { grid-column: 2; text-align: left; } } .sl-bl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; } /* 카드 코너: overflow:hidden 없이도 헤더/마지막행이 라운드 안에 들어오도록. (overflow 를 없앤 이유는 작성자명 사이드뷰 드롭다운이 카드 밖으로 나와야 하기 때문) */ .sl-bl-card > .sl-bl-head { border-top-left-radius: 15px; border-top-right-radius: 15px; } .sl-bl-card > .sl-bl-row:last-child, .sl-bl-card > .sl-empty { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; } /* --- 댓글(view_comment) — 시안 board_view.html 의 sl-cm-* 이식 --- */ .sl-cm-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--bs-line); } .sl-cm-h { font-size: 14px; font-weight: 600; color: var(--bs-ink); margin: 0; letter-spacing: -.01em; } .sl-cm-n { font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600; color: var(--bs-brand); margin-left: 6px; } .sl-cm-item { display: grid; grid-template-columns: 36px 1fr; gap: 13px; padding: 20px 0; border-bottom: 1px solid var(--bs-line-2); } .sl-cm-item.reply { padding-left: 48px; background: linear-gradient(90deg, var(--bs-surface) 0 3px, transparent 3px); } .sl-cm-av { width: 36px; height: 36px; border-radius: 999px; background: var(--bs-brand-tint); color: var(--bs-brand); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .sl-cm-av img { width: 100%; height: 100%; object-fit: cover; } .sl-cm-av.admin { background: var(--bs-ink); color: #fff; } .sl-cm-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .sl-cm-top .sv_wrap { position: relative; display: inline-block; } .sl-cm-top .sv_member, .sl-cm-top .sv_guest { font-size: 12.5px; font-weight: 600; color: var(--bs-ink); } .sl-cm-badge { font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 5px; background: var(--bs-brand-tint); color: var(--bs-brand); } .sl-cm-badge.writer { background: var(--bs-ink); color: #fff; } .sl-cm-badge.plain { background: var(--bs-surface); color: var(--bs-muted); border: 1px solid var(--bs-line); } .sl-cm-time { font-family: "Poppins", sans-serif; font-size: 11px; color: var(--bs-muted-2); } .sl-cm-text { font-size: 13px; line-height: 1.95; color: var(--bs-ink-3); margin: 8px 0 0; white-space: pre-line; word-break: break-word; } .sl-cm-text.secret { color: var(--bs-muted-2); } .sl-cm-text img { max-width: 100%; height: auto; } .sl-cm-acts { display: flex; align-items: center; gap: 4px; margin-top: 10px; } .sl-cm-act { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; font-size: 11.5px; color: var(--bs-muted); padding: 5px 9px; border-radius: 7px; text-decoration: none; cursor: pointer; } .sl-cm-act:hover { background: var(--bs-surface); color: var(--bs-ink-2); } .sl-cm-mount { display: block; } .sl-cm-mount:not(:empty) { margin-top: 12px; } .sl-cm-form { border: 1px solid var(--bs-line); border-radius: 16px; background: #fff; overflow: hidden; } .sl-cm-form-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 18px; background: var(--bs-surface); border-bottom: 1px solid var(--bs-line); } .sl-cm-form-body { padding: 18px; } .sl-cm-ta { border: 1px solid var(--bs-line); border-radius: 12px; padding: 14px 15px; font-size: 13px; line-height: 1.9; min-height: 108px; resize: vertical; width: 100%; color: var(--bs-ink); font-family: "IBM Plex Sans KR", sans-serif; } .sl-cm-ta::placeholder { color: var(--bs-muted-2); } .sl-cm-ta:focus { outline: 0; border-color: #e0cec7; box-shadow: 0 0 0 3px rgba(196,71,44,.09); } .sl-cm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--bs-line-2); padding-top: 15px; margin-top: 15px; } .sl-cm-empty { text-align: center; padding: 52px 20px; color: var(--bs-muted-2); font-size: 12.5px; } .sl-cm-empty-ico { width: 46px; height: 46px; border-radius: 999px; background: var(--bs-surface); color: var(--bs-muted-2); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } /* 자동등록방지: 나머지 톤은 webinidea.css #captcha_* 재사용, 댓글쪽(._comment) fieldset 만 보정 */ .sl-cm-form #captcha { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; border: 0; margin: 0; padding: 0; } .sl-cm-form #captcha legend { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); } @media (max-width: 767.98px) { .sl-cm-item.reply { padding-left: 20px; } .sl-bv-shots { grid-template-columns: 1fr; } .sl-bv-navlink { max-width: 100%; width: 100%; } .sl-rel-head, .sl-bl-head { display: none; } .sl-rel-row { grid-template-columns: 1fr auto; row-gap: 6px; } .sl-rel-row > span:nth-child(2) { display: none; } .sl-bl-row { grid-template-columns: 34px 1fr auto; row-gap: 7px; } .sl-bl-row > .sl-bl-no { display: none; } .sl-bl-row > .sl-bl-subject { grid-column: 2 / -1; } .sl-bl-row > .sl-bl-writer, .sl-bl-row > .sl-bl-date { grid-column: 2 / 3; text-align: left; } } /* -------------------------------------------------------------------------- 28. 상품 검색 결과 (search) -------------------------------------------------------------------------- */ .sl-sq-bar { display: flex; align-items: center; gap: 8px; } .sl-sq-input { position: relative; flex: 1; min-width: 0; } .sl-sq-input .form-control { padding-left: 42px; height: 52px; font-size: 15px; } .sl-sq-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--bs-muted-2); display: flex; pointer-events: none; } .sl-sq-clear { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 999px; border: 0; background: var(--bs-line); color: var(--bs-ink-2); font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .sl-sq-clear:hover { background: var(--bs-ink); color: #fff; } .sl-sq-go { height: 52px; padding: 0 30px; font-size: 14px; flex-shrink: 0; } .sl-sq-help { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--bs-line); background: #fff; color: var(--bs-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; } .sl-sq-help:hover { color: var(--bs-brand); border-color: var(--bs-brand-line); } .sl-filter { border: 1px solid var(--bs-line); border-radius: 14px; background: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; } .sl-filter-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .sl-filter-line + .sl-filter-line { border-top: 1px solid var(--bs-line-2); padding-top: 14px; } .sl-filter-k { font-size: 11px; font-weight: 600; color: var(--bs-muted); letter-spacing: .02em; min-width: 54px; flex-shrink: 0; } .sl-fchk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--bs-ink-2); margin: 0; cursor: pointer; } .sl-price-in { width: 116px; } .sl-price-in .form-control { text-align: right; font-family: "Poppins", sans-serif; font-size: 12.5px; } .sl-chip.on { background: var(--bs-brand); border-color: var(--bs-brand); color: #fff; font-weight: 600; } .sl-chip-n { font-family: "Poppins", sans-serif; font-size: 11px; margin-left: 5px; opacity: .72; } .sl-hl { background: var(--bs-brand-tint); color: var(--bs-brand); border-radius: 3px; padding: 0 2px; font-weight: 700; } .sl-kw { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--bs-line); border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 12.5px; color: var(--bs-ink-2); background: #fff; } .sl-kw button.sl-kw-word { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; cursor: pointer; } .sl-kw button.sl-kw-word:hover { color: var(--bs-brand); } .sl-kw-x { width: 18px; height: 18px; border-radius: 999px; border: 0; background: var(--bs-line); color: var(--bs-ink-2); font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .sl-kw-x:hover { background: var(--bs-brand); color: #fff; } .sl-hot { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--bs-ink-2); text-decoration: none; padding: 9px 0; } .sl-hot + .sl-hot { border-top: 1px solid var(--bs-line-2); } .sl-hot:hover { color: var(--bs-brand); } .sl-hot-n { font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; color: var(--bs-brand); width: 16px; flex-shrink: 0; } /* -------------------------------------------------------------------------- 29. 전체 게시판 검색 (bbs/search.php) -------------------------------------------------------------------------- */ .sl-bs-panel { border: 1px solid var(--bs-line); border-radius: 16px; background: var(--bs-surface); padding: 18px 20px; } .sl-bs-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sl-bs-sel { width: 150px; flex-shrink: 0; } .sl-bs-q { flex: 1; min-width: 200px; position: relative; } .sl-bs-q .form-control { padding-left: 40px; } .sl-bs-q-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bs-muted-2); display: flex; pointer-events: none; } .sl-bs-go { flex-shrink: 0; padding-left: 26px; padding-right: 26px; } .sl-bs-op { display: flex; border: 1px solid var(--bs-line); border-radius: 10px; overflow: hidden; background: #fff; flex-shrink: 0; } .sl-bs-op button { border: 0; background: #fff; font-family: "Poppins", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--bs-muted); padding: 10px 17px; cursor: pointer; } .sl-bs-op button + button { border-left: 1px solid var(--bs-line); } .sl-bs-op button.on { background: var(--bs-brand); color: #fff; } .sl-bs-sum { border: 1px solid var(--bs-brand-line); background: var(--bs-brand-soft); border-radius: 14px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .sl-bs-sum-t { font-size: 14px; font-weight: 600; color: var(--bs-ink); margin: 0; } .sl-bs-sum-m { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--bs-ink-3); flex-wrap: wrap; } .sl-bs-sum-m b { font-family: "Poppins", sans-serif; color: var(--bs-brand); font-weight: 600; } .sl-bs-tabs { display: flex; gap: 7px; flex-wrap: wrap; } .sl-bs-tab { border: 1px solid var(--bs-line); background: #fff; border-radius: 999px; padding: 9px 20px; font-size: 12.5px; color: var(--bs-ink-2); text-decoration: none; display: inline-block; } .sl-bs-tab:hover { border-color: var(--bs-brand-line); color: var(--bs-brand); } .sl-bs-tab.on { background: var(--bs-brand); border-color: var(--bs-brand); color: #fff; font-weight: 600; } .sl-bs-tab-n { font-family: "Poppins", sans-serif; font-size: 11px; margin-left: 6px; opacity: .74; } .sl-bs-group { border-top: 1px solid var(--bs-line); padding-top: 20px; } .sl-bs-group + .sl-bs-group { margin-top: 26px; } .sl-bs-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .sl-bs-group-t { font-size: 13.5px; font-weight: 600; color: var(--bs-brand); margin: 0; } .sl-bs-group-t a { color: inherit; text-decoration: none; } .sl-bs-item { padding: 20px 0; border-bottom: 1px solid var(--bs-line-2); } .sl-bs-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sl-bs-title a { font-size: 14.5px; font-weight: 600; color: var(--bs-ink); text-decoration: none; letter-spacing: -.01em; } .sl-bs-title a:hover { color: var(--bs-brand); text-decoration: underline; } .sl-bs-cmt { display: inline-flex; align-items: center; gap: 4px; font-family: "Poppins", sans-serif; font-size: 10.5px; font-weight: 600; color: var(--bs-brand); background: var(--bs-brand-tint); border-radius: 5px; padding: 3px 7px; } .sl-bs-excerpt { font-size: 12.5px; line-height: 1.95; color: var(--bs-ink-3); margin: 9px 0 0; } .sl-bs-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--bs-muted); } .sl-bs-foot-i { display: flex; align-items: center; gap: 5px; } .sl-more { font-size: 12px; color: var(--bs-brand); background: none; border: 0; padding: 0; text-decoration: none; } .sl-more:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 30. 스크랩 — BS5 모달 (게시글 보기 위 오버레이, 쪽지함 모달과 동일 방식) -------------------------------------------------------------------------- */ .sl-scrap-modal { border: 1px solid var(--bs-line); border-radius: 18px; } .sl-scrap-modal .modal-header { border-bottom: 1px solid var(--bs-line); padding: 18px 22px; } .sl-scrap-modal .modal-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--bs-ink); display: flex; align-items: center; gap: 8px; margin: 0; } .sl-scrap-modal .modal-title svg { color: var(--bs-brand); } .sl-scrap-modal .modal-body { padding: 20px 22px; } .sl-scrap-modal .modal-footer { border-top: 1px solid var(--bs-line); padding: 13px 22px; background: var(--bs-surface); border-radius: 0 0 17px 17px; } .sl-scrap-modal .sl-cm-ta { min-height: 92px; } .sl-scrap-subject { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.6; color: var(--bs-ink); background: var(--bs-surface); border: 1px solid var(--bs-line-2); border-radius: 11px; padding: 12px 14px; margin-bottom: 16px; } .sl-scrap-subject .sl-cat-chip { flex-shrink: 0; } /* -------------------------------------------------------------------------- 31. 비밀번호 찾기 / 재설정 (password_lost / password_reset) -------------------------------------------------------------------------- */ .sl-pf-wrap { min-height: 100vh; background: var(--bs-surface); display: flex; align-items: center; justify-content: center; padding: 56px 20px; } .sl-pf-card { width: 100%; max-width: 520px; background: #fff; border: 1px solid var(--bs-line); border-radius: 20px; padding: 40px 40px 34px; } .sl-pf-mark { width: 46px; height: 46px; border-radius: 13px; background: var(--bs-brand-soft); border: 1px solid var(--bs-brand-line); color: var(--bs-brand); display: flex; align-items: center; justify-content: center; } .sl-pf-title { font-size: 21px; font-weight: 600; letter-spacing: -.03em; color: var(--bs-ink); margin: 16px 0 0; } .sl-pf-lead { font-size: 12.5px; line-height: 1.95; color: var(--bs-ink-3); margin: 10px 0 0; } .sl-pf-in { height: 50px; font-size: 14px; } .sl-pf-go { height: 52px; font-size: 14px; width: 100%; } .sl-pf-links { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; font-size: 12px; } .sl-pf-links a { color: var(--bs-muted); text-decoration: none; } .sl-pf-links a:hover { color: var(--bs-brand); text-decoration: underline; } .sl-pf-sep { color: var(--bs-line); } .sl-pf-idbox { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: 11px; padding: 13px 16px; } .sl-pf-cert { display: grid; gap: 8px; margin-top: 6px; } /* -------------------------------------------------------------------------- 32. 회원 프로필 (profile) -------------------------------------------------------------------------- */ .sl-mp-wrap { min-height: 100vh; background: var(--bs-surface); display: flex; align-items: center; justify-content: center; padding: 48px 20px; } .sl-mp-card { width: 100%; max-width: 560px; background: #fff; border: 1px solid var(--bs-line); border-radius: 20px; overflow: hidden; } .sl-mp-hero { background: var(--bs-brand-soft); border-bottom: 1px solid var(--bs-brand-line); padding: 32px 32px 26px; text-align: center; } .sl-mp-av { width: 82px; height: 82px; border-radius: 999px; background: #fff; border: 1px solid var(--bs-brand-line); color: var(--bs-brand); display: flex; align-items: center; justify-content: center; margin: 0 auto; overflow: hidden; } .sl-mp-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; } .sl-mp-nick { font-size: 19px; font-weight: 600; letter-spacing: -.03em; color: var(--bs-ink); margin: 14px 0 0; } .sl-mp-id { font-family: "Poppins", sans-serif; font-size: 11.5px; color: var(--bs-muted); margin-top: 5px; } .sl-mp-lvl { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--bs-brand); border-radius: 999px; padding: 4px 11px; margin-top: 12px; } .sl-mp-stats { display: grid; grid-template-columns: repeat(2, 1fr); } .sl-mp-stat { padding: 18px 24px; border-bottom: 1px solid var(--bs-line-2); } .sl-mp-stat:nth-child(odd) { border-right: 1px solid var(--bs-line-2); } .sl-mp-k { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--bs-muted); } .sl-mp-v { font-size: 14px; color: var(--bs-ink); margin-top: 7px; font-weight: 500; } .sl-mp-v.num { font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.02em; } .sl-mp-v .unit { font-size: 11px; font-weight: 500; color: var(--bs-muted); margin-left: 3px; } .sl-mp-v .sub { font-size: 11px; color: var(--bs-muted-2); margin-left: 5px; font-family: "IBM Plex Sans KR", sans-serif; font-weight: 400; } .sl-mp-v a { color: var(--bs-brand); } .sl-mp-sec { padding: 22px 24px; } .sl-mp-sec-t { font-size: 12.5px; font-weight: 600; color: var(--bs-ink); margin: 0 0 10px; display: flex; align-items: center; gap: 7px; } .sl-mp-greet { font-size: 12.5px; line-height: 2; color: var(--bs-ink-3); background: var(--bs-surface); border-radius: 12px; padding: 15px 17px; margin: 0; white-space: pre-line; } .sl-mp-greet.none { color: var(--bs-muted-2); } .sl-mp-acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 24px 24px; } .sl-mp-acts .btn { flex: 1; min-width: 128px; --bs-btn-font-size: 12.5px; --bs-btn-padding-y: 0.62rem; } /* -------------------------------------------------------------------------- 33. 비밀글 비밀번호 확인 (password / 게시판 비밀글·수정·삭제) -------------------------------------------------------------------------- */ .sl-sp-wrap { min-height: 100vh; background: var(--bs-surface); display: flex; align-items: center; justify-content: center; padding: 52px 20px; } .sl-sp-card { width: 100%; max-width: 470px; background: #fff; border: 1px solid var(--bs-line); border-radius: 20px; padding: 40px 38px 34px; text-align: center; } .sl-sp-lock { width: 54px; height: 54px; border-radius: 999px; background: var(--bs-brand-soft); border: 1px solid var(--bs-brand-line); color: var(--bs-brand); display: flex; align-items: center; justify-content: center; margin: 0 auto; } .sl-sp-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: var(--bs-brand); font-family: "Poppins", sans-serif; margin-top: 18px; } .sl-sp-title { font-size: 20px; font-weight: 600; letter-spacing: -.03em; color: var(--bs-ink); margin: 8px 0 0; word-break: break-all; } .sl-sp-lead { font-size: 12.5px; line-height: 1.95; color: var(--bs-ink-3); margin: 12px 0 0; } .sl-sp-line { border: 0; border-top: 1px solid var(--bs-line); margin: 26px 0 24px; } .sl-sp-in { height: 50px; font-size: 14px; text-align: center; letter-spacing: .16em; } .sl-sp-in::placeholder { letter-spacing: 0; } .sl-sp-go { height: 50px; font-size: 14px; width: 100%; } .sl-sp-err { font-size: 11.5px; color: var(--bs-brand); margin-top: 9px; } .sl-sp-note { display: flex; align-items: flex-start; gap: 9px; text-align: left; background: var(--bs-surface); border-radius: 12px; padding: 13px 15px; margin-top: 22px; font-size: 11.5px; line-height: 1.85; color: var(--bs-muted); } .sl-sp-links { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; font-size: 12px; } .sl-sp-links a { color: var(--bs-muted); text-decoration: none; } .sl-sp-links a:hover { color: var(--bs-brand); text-decoration: underline; } .sl-sp-sep { color: var(--bs-line); } /* 18-b. 주문서 재설계 — 주문상품 4열 테이블(sl-odf-*) · 요약 래퍼 · 할인 2열 */ .sl-odf-row { display: grid; grid-template-columns: minmax(240px,1fr) 92px 110px 76px; align-items: center; gap: 12px; padding: 14px 16px; } .sl-odf-row + .sl-odf-row { border-top: 1px solid var(--bs-line-2); } .sl-odf-head { background: var(--bs-surface); border-bottom: 1px solid var(--bs-line); font-size: 11.5px; font-weight: 600; color: var(--bs-ink-2); padding: 11px 16px; } .sl-odf-prod { display: flex; gap: 12px; min-width: 0; } .sl-odf-thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--bs-line); background: var(--bs-surface); flex-shrink: 0; } .sl-odf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-sum-wrap { position: sticky; top: 24px; } .sl-sum-wrap .sl-sum-card { position: static; top: auto; } .sl-disc-row { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 12px; } @media (max-width: 767.98px) { .sl-odf-head { display: none; } .sl-odf-row { grid-template-columns: 1fr; row-gap: 10px; } .sl-odf-row > .sl-cart-cell, .sl-odf-row > .sl-cart-sum { text-align: left !important; justify-content: flex-start !important; display: flex; align-items: center; gap: 8px; } .sl-odf-row > .sl-cart-cell::before { content: attr(data-label); font-size: 11px; color: var(--bs-muted); width: 52px; flex-shrink: 0; } .sl-odf-row > .sl-cart-sum::before { content: "소계"; font-size: 11px; color: var(--bs-muted); width: 52px; flex-shrink: 0; font-weight: 400; } } @media (max-width: 575.98px) { .sl-disc-row { grid-template-columns: 1fr; } } @media (min-width: 1200px) { .wb-order .sl-col-l { flex: 0 0 auto; width: 60%; } .wb-order .sl-col-r { flex: 0 0 auto; width: 40%; } } /* -------------------------------------------------------------------------- 34. 내용 페이지 (content — 이용약관 / 개인정보 처리방침 / 회사소개) -------------------------------------------------------------------------- */ .sl-doc { border: 1px solid var(--bs-line); border-radius: 16px; background: #fff; padding: 32px 34px; } .sl-doc-body { font-size: 13.5px; line-height: 1.95; color: var(--bs-ink-2); word-break: keep-all; overflow-wrap: anywhere; } .sl-doc-body > *:first-child { margin-top: 0; } .sl-doc-body > *:last-child { margin-bottom: 0; } .sl-doc-body h1, .sl-doc-body h2 { font-size: 17px; font-weight: 600; color: var(--bs-ink); margin: 30px 0 12px; letter-spacing: -0.01em; line-height: 1.4; } .sl-doc-body h3, .sl-doc-body h4 { font-size: 14.5px; font-weight: 600; color: var(--bs-ink); margin: 22px 0 10px; } .sl-doc-body p { margin: 0 0 14px; } .sl-doc-body ul, .sl-doc-body ol { margin: 0 0 14px; padding-left: 20px; } .sl-doc-body li { margin: 5px 0; } .sl-doc-body a { color: var(--bs-brand); text-decoration: underline; } .sl-doc-body strong, .sl-doc-body b { color: var(--bs-ink); font-weight: 600; } .sl-doc-body hr { border: 0; border-top: 1px solid var(--bs-line); margin: 26px 0; } .sl-doc-body img { max-width: 100%; height: auto; border-radius: 8px; } .sl-doc-body blockquote { margin: 14px 0; padding: 12px 16px; background: var(--bs-surface); border-left: 3px solid var(--bs-brand-line); border-radius: 8px; color: var(--bs-ink-2); } .sl-doc-tblwrap, .sl-doc-body { } .sl-doc-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 12.5px; } .sl-doc-body th, .sl-doc-body td { border: 1px solid var(--bs-line-2); padding: 9px 12px; text-align: left; vertical-align: top; } .sl-doc-body th { background: var(--bs-surface); font-weight: 600; color: var(--bs-ink); } @media (max-width: 575.98px) { .sl-doc { padding: 22px 18px; } }