/*! Theme Name: PSTN Theme URI: https://www.pstnmall.com/ Description: Lightweight standalone PSTN wellness catalogue theme with native WordPress controls and the PSTN Product Catalog plugin. Author: PSTN Version: 2.4.4 Requires at least: 6.5 Requires PHP: 8.0 Text Domain: pstn-theme */ :root { /* 콘텐츠 폭 기준선 — 이벤트 배너(1440)를 전 페이지 공통 기준으로 쓴다. gutter는 화면이 좁아졌을 때 유지할 최소 좌우 여백. */ --pstn-container: 1440px; --pstn-shell-gutter: 32px; --pstn-container-box: calc(var(--pstn-container) + var(--pstn-shell-gutter) * 2); --pstn-blue: #1469c8; --pstn-deep-blue: #0b3f78; --pstn-black: #15202b; --pstn-gray: #66736f; --pstn-hairline: #e5ebe7; --pstn-sage: #91b9a8; --pstn-mint: #dcefe8; --pstn-coral: #ff8278; --pstn-cream: #fbf7ef; --pstn-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --pstn-color-text: #15202b; --pstn-color-text-muted: #66736f; --pstn-color-accent: #1469c8; --pstn-color-accent-strong: #0b3f78; --pstn-color-line: #e5ebe7; --pstn-color-surface: #fff; --pstn-color-surface-soft: #f7f8f7; --pstn-color-surface-warm: #fbf7ef; --pstn-type-eyebrow: 12px; --pstn-type-section-title: clamp(29px, 3vw, 42px); --pstn-type-section-max: clamp(34px, 3vw, 46px); /* 대형 섹션 타이틀 상한 */ --pstn-type-page-hero: clamp(44px, 4.5vw, 58px); /* 페이지 히어로 타이틀 */ --pstn-type-lead: 18px; /* 리드 문단 */ --pstn-type-lead-hero: clamp(20px, 1.8vw, 26px); /* 히어로 리드 */ --pstn-type-body: 16px; --pstn-leading-body: 1.65; --pstn-space-section: clamp(104px, 9vw, 144px); --pstn-space-section-compact: clamp(72px, 6vw, 96px); --pstn-gutter: clamp(20px, 4.4vw, 64px); --pstn-radius-sm: 8px; --pstn-radius-md: 10px; --pstn-radius-round: 999px; --pstn-shadow-subtle: 0 10px 30px rgba(20, 52, 62, .07); --pstn-promotion-height: 30px; --pstn-header-height: 112px; --pstn-chrome-height: 142px; } html { scroll-behavior: smooth; } body.pstn-theme { margin: 0; color: var(--pstn-color-text); background: var(--pstn-color-surface); font-family: var(--pstn-font); font-size: var(--pstn-type-body); font-weight: 400; line-height: var(--pstn-leading-body); overflow-x: hidden; word-break: keep-all; overflow-wrap: break-word; } body.pstn-theme.is-menu-open { overflow: hidden; } .pstn-theme *, .pstn-theme *::before, .pstn-theme *::after { box-sizing: border-box; } .pstn-theme a { color: inherit; text-decoration: none; } .pstn-theme button, .pstn-theme input, .pstn-theme select, .pstn-theme textarea { font: inherit; } .pstn-theme button { border: 0; cursor: pointer; } .pstn-theme img { max-width: 100%; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pstn-skip-link { position: fixed; z-index: 100000; top: 8px; left: 12px; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border-radius: var(--pstn-radius-sm); background: var(--pstn-color-text); color: #fff !important; font-size: 14px; font-weight: 700; } .pstn-skip-link:focus { width: auto; height: auto; min-height: 44px; padding: 0 18px; display: flex; align-items: center; overflow: visible; clip: auto; clip-path: none; } body.admin-bar .pstn-skip-link { top: 40px; } .pstn-promotion { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; height: var(--pstn-promotion-height); display: grid; place-items: center; background: linear-gradient(rgba(8,38,62,.24), rgba(8,38,62,.24)), linear-gradient(90deg, var(--pstn-promotion-start, #267cc4), var(--pstn-promotion-end, #31a39d)); color: var(--pstn-promotion-color, #fff); font-size: 14px; font-weight: 600; } .pstn-promotion a { display: block; width: 100%; text-align: center; line-height: var(--pstn-promotion-height); } body.pstn-promotion-hidden .pstn-header { top: 0; } body.pstn-promotion-hidden #pstn-clone { padding-top: var(--pstn-header-height); } body.admin-bar .pstn-promotion { top: 32px; } body.admin-bar .pstn-header { top: 62px; } body.admin-bar.pstn-promotion-hidden .pstn-header { top: 32px; } .pstn-header { position: fixed; top: var(--pstn-promotion-height); left: 0; right: 0; z-index: 1000; height: var(--pstn-header-height); background: var(--pstn-color-surface); border-bottom: 1px solid var(--pstn-color-line); transition: height .25s ease, box-shadow .25s ease; } .pstn-header.is-scrolled { box-shadow: 0 8px 25px rgba(0,0,0,.06); } .pstn-header__inner { width: 100%; max-width: var(--pstn-container-box); height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: clamp(20px, 2vw, 42px); } .pstn-logo { min-height: 44px; width: 114px; flex: 0 0 auto; display: flex; align-items: center; } .pstn-logo img { display: block; width: 114px; height: auto; } .pstn-search { position: relative; width: clamp(260px, 20vw, 372px); flex: 0 1 372px; } .pstn-search input[type="search"] { position: relative; z-index: 2; width: 100%; height: 44px; padding: 0 52px 0 20px; border: 1px solid var(--pstn-color-accent); border-radius: var(--pstn-radius-round); outline: 0; color: var(--pstn-color-text); background: var(--pstn-color-surface); font-size: 14px; } .pstn-search input[type="search"]:focus-visible { outline: 2px solid var(--pstn-color-accent); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(20,105,200,.12); } .pstn-search input[type="search"]::placeholder { color: #888; opacity: 1; } .pstn-search__rolling { position: absolute; z-index: 1; top: 0; right: 52px; left: 20px; height: 44px; overflow: hidden; color: #77827e; font-size: 14px; line-height: 44px; pointer-events: none; } .pstn-search__rolling span { position: absolute; inset: 0; overflow: hidden; opacity: 0; transform: translateY(100%); text-overflow: ellipsis; white-space: nowrap; transition: transform .38s cubic-bezier(.22,.75,.25,1), opacity .28s ease; } .pstn-search__rolling span.is-active { opacity: 1; transform: translateY(0); } .pstn-search__rolling span.is-leaving { opacity: 0; transform: translateY(-100%); } .pstn-search:focus-within .pstn-search__rolling { opacity: 0; } .pstn-search button { position: absolute; z-index: 3; top: 0; right: 8px; width: 44px; height: 44px; padding: 9px; display: grid; place-items: center; border-radius: 50%; background: transparent; color: var(--pstn-color-accent); opacity: 1; visibility: visible; transition: color .18s ease, background-color .18s ease; } .pstn-search button svg { display: block; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; opacity: 1; visibility: visible; } .pstn-search button:hover, .pstn-search button:focus-visible { color: var(--pstn-deep-blue); background: rgba(20,105,200,.08); } .pstn-search button:focus-visible { outline: 2px solid var(--pstn-blue); outline-offset: 1px; } /* 로고·검색창 다음의 남는 공간을 왼쪽에 두고 메뉴 덩어리를 오른쪽 끝선에 붙인다. (메뉴 항목 사이 간격은 기존 그대로) */ .pstn-nav { display: flex; flex: 1 1 auto; align-items: stretch; align-self: stretch; justify-content: flex-end; white-space: nowrap; } .pstn-nav__list { height: 100%; margin: 0; padding: 0; display: flex; align-items: stretch; justify-content: center; gap: clamp(18px, 2vw, 40px); list-style: none; } .pstn-nav__item { display: flex; align-items: stretch; } .pstn-nav__item > a { height: 100%; display: flex; align-items: center; font-weight: 600; font-size: 15px; transition: color .2s ease; } .pstn-nav__item > a:hover, .pstn-nav__item > a:focus-visible, .pstn-nav__dropdown:hover > a, .pstn-nav__dropdown:focus-within > a, .pstn-nav__item.current-menu-item > a, .pstn-nav__item.current-menu-ancestor > a { color: var(--pstn-deep-blue); } .pstn-nav__dropdown { position: relative; } .pstn-nav__dropdown > a:focus-visible { outline: 0; box-shadow: inset 0 -3px var(--pstn-blue); } .pstn-nav__dropdown > .pstn-nav__submenu { position: absolute; z-index: 30; top: calc(100% - 1px); left: 50%; min-width: 182px; margin: 0; padding: 12px; display: grid; gap: 3px; transform: translate(-50%, 8px); border: 1px solid #e5ebe7; border-top: 0; border-radius: 0 0 13px 13px; background: rgba(255,255,255,.985); box-shadow: 0 18px 38px rgba(20,52,62,.11); opacity: 0; visibility: hidden; pointer-events: none; list-style: none; transition: opacity .18s ease, transform .22s ease, visibility .18s ease; } .pstn-nav__dropdown:hover > .pstn-nav__submenu, .pstn-nav__dropdown:focus-within > .pstn-nav__submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } /* While the page scrolls, hover-opened dropdowns are muted until the pointer moves again (hover state is not re-evaluated during scroll, so menus used to stay pinned open). Keyboard :focus-within menus stay visible on purpose. */ .pstn-nav.is-scroll-muted .pstn-nav__dropdown:hover:not(:focus-within) > .pstn-nav__submenu { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px); } .pstn-nav__dropdown > .pstn-nav__submenu a { min-height: 44px; padding: 0 13px; display: flex; align-items: center; border-radius: var(--pstn-radius-sm); color: #33443f; font-size: 13px; text-align: left; font-weight: 550; transition: color .18s ease, background-color .18s ease; } .pstn-nav__dropdown > .pstn-nav__submenu a:hover, .pstn-nav__dropdown > .pstn-nav__submenu a:focus-visible, .pstn-nav__dropdown > .pstn-nav__submenu a[aria-current="page"] { color: var(--pstn-deep-blue); background: #f1f6f2; outline: 0; } .pstn-nav__dropdown.pstn-menu-brand > .pstn-nav__submenu { min-width: 240px; } .pstn-nav__product { display: flex; align-items: stretch; } .pstn-nav__product > .pstn-nav__submenu { display: none; } .pstn-nav__product-toggle { height: 100%; padding: 0; display: flex; align-items: center; border: 0; background: transparent; color: #111; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: color .2s ease; } .pstn-nav__product-toggle:hover, .pstn-nav__product.is-open .pstn-nav__product-toggle { color: var(--pstn-deep-blue); } .pstn-nav__product-toggle:focus-visible { outline: 0; box-shadow: inset 0 -3px var(--pstn-blue); } .pstn-product-mega { position: absolute; z-index: 20; top: 100%; left: 50%; width: min(var(--pstn-container), calc(100vw - var(--pstn-shell-gutter) * 2)); max-height: calc(100vh - 142px); padding: 32px; display: grid; grid-template-columns: 220px minmax(0, 1fr) 242px; gap: 30px; overflow-y: auto; overscroll-behavior: contain; transform: translate(-50%, 10px); border: 1px solid #e5ebe7; border-top: 0; background: rgba(255,255,255,.985); box-shadow: 0 22px 50px rgba(20,52,62,.12); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .24s ease, visibility .2s ease; white-space: normal; } body.admin-bar .pstn-product-mega { max-height: calc(100vh - 174px); } .pstn-nav__product.is-open .pstn-product-mega { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; } .pstn-product-mega__intro { padding: 8px 24px 8px 4px; border-right: 1px solid #e8ece9; } .pstn-product-mega__intro > span, .pstn-product-mega__pharmacy > span { display: block; margin-bottom: 15px; color: var(--pstn-blue); font-size: 12px; font-weight: 800; letter-spacing: .14em; } .pstn-product-mega__intro > strong { display: block; color: #162731; font-size: 22px; line-height: 1.4; letter-spacing: -.035em; } .pstn-product-mega__intro > p { margin: 18px 0 0 !important; color: var(--pstn-color-text-muted) !important; font-size: 12px; line-height: 1.7; } .pstn-product-mega__browse { min-width: 0; display: grid; align-content: start; gap: 21px; } /* 21px: 성분별 제목 밑줄이 왼쪽 인트로 목록의 윗줄과 같은 y에 오도록 맞춘 값 */ .pstn-product-mega__quick { margin-top: 20px; padding-top: 11px; display: flex; flex-direction: column; border-top: 1px solid #dde4df; } .pstn-product-mega__quick a { min-height: 32px; padding: 4px 2px; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; transition: color .2s ease; } .pstn-product-mega__quick a::after { content: "→"; color: #9aa7a2; font-size: 12px; transition: color .2s ease, transform .2s ease; } .pstn-product-mega__quick a:hover { outline: 0; } .pstn-product-mega__quick a:focus-visible { outline: 2px solid var(--pstn-color-accent); outline-offset: 3px; } .pstn-product-mega__quick strong { color: #1b2b32; font-size: 13px; transition: color .2s ease, transform .2s ease; } .pstn-product-mega__quick a:hover strong, .pstn-product-mega__quick a:focus-visible strong { color: var(--pstn-blue); transform: translateX(2px); } .pstn-product-mega__quick a:hover::after, .pstn-product-mega__quick a:focus-visible::after { color: var(--pstn-blue); transform: translateX(2px); } .pstn-product-mega__quick span { display: none; color: #737f7b; font-size: 12px; } .pstn-product-mega__concerns { margin-top: 0; } .pstn-product-mega__ingredients { margin-top: 0; } .pstn-product-mega__section-title { padding-bottom: 11px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dde4df; } .pstn-product-mega__section-title > strong { color: #152a34; font-size: 14px; } .pstn-product-mega__section-title > a { min-height: 32px; display: inline-flex; align-items: center; color: var(--pstn-blue); font-size: 12px; font-weight: 650; } .pstn-product-mega__groups { padding-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .pstn-product-mega__groups > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .pstn-product-mega__groups > div > strong { margin-bottom: 2px; color: #65736e; font-size: 12px; font-weight: 700; } .pstn-product-mega__groups a { position: relative; min-height: 32px; display: inline-flex; align-items: center; color: #26363c; font-size: 12px; line-height: 1.4; transition: color .2s ease, transform .2s ease; } .pstn-product-mega__groups a:hover, .pstn-product-mega__groups a:focus-visible { color: var(--pstn-blue); transform: translateX(2px); } .pstn-product-mega__groups.is-flat { padding-top: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 14px; } .pstn-product-mega__groups.is-flat a { min-height: 28px; } .pstn-product-mega__pharmacy { min-height: 100%; padding: 27px 24px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: #fff; background: linear-gradient(180deg,rgba(12,44,66,.08),rgba(10,43,62,.84)), url("assets/images/pstn/about-pharmacy-800.webp") center/cover no-repeat; } .pstn-product-mega__pharmacy > span { margin-bottom: auto; color: rgba(255,255,255,.85); } .pstn-product-mega__pharmacy > strong { color: #fff; font-size: 17px; line-height: 1.55; letter-spacing: -.025em; } .pstn-product-mega__pharmacy > small { margin-top: 15px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.45); color: #fff; font-size: 12px; font-weight: 700; } .pstn-mobile-drawer { position: fixed; z-index: 1200; top: 0; left: 0; bottom: 0; width: min(84vw, 390px); padding: 70px 34px 40px; transform: translateX(-102%); visibility: hidden; pointer-events: none; background: var(--pstn-cream); transition: transform .35s cubic-bezier(.4,0,.2,1), visibility 0s linear .35s; overflow-y: auto; } .pstn-mobile-drawer.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; transition-delay: 0s; } .pstn-mobile-drawer__close { position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: transparent; font-size: 34px; font-weight: 200; } .pstn-mobile-drawer nav { padding: 34px 0; } .pstn-mobile-menu, .pstn-mobile-menu ul { margin: 0; padding: 0; list-style: none; } .pstn-mobile-menu { display: grid; gap: 24px; } .pstn-mobile-menu a { min-height: 44px; display: flex; align-items: center; font-size: 20px; font-weight: 600; line-height: 1.35; transition: color .2s ease; } .pstn-mobile-menu a:hover, .pstn-mobile-menu a:focus-visible { color: var(--pstn-deep-blue); } .pstn-mobile-menu__item.current-menu-item > a, .pstn-mobile-menu__item.current-menu-ancestor > a { color: var(--pstn-deep-blue); } .pstn-mobile-menu__submenu, .pstn-mobile-menu__catalog { margin-top: 13px !important; display: grid; gap: 10px; } .pstn-mobile-menu__submenu a, .pstn-mobile-menu__catalog a { min-height: 44px; padding: 8px 0 8px 14px; color: #43534d; font-size: 15px; font-weight: 550; line-height: 1.45; } .pstn-mobile-drawer__label { margin: 2px 0 -12px; color: #6b7873; font-size: 12px; font-weight: 750; letter-spacing: .12em; } .pstn-mobile-drawer nav .pstn-mobile-drawer__sub { padding-left: 14px; color: #43534d; font-size: 16px; font-weight: 550; } .pstn-mobile-drawer__social { display: flex; gap: 12px; } .pstn-mobile-drawer__social a { width: 44px; height: 44px; display: grid; place-items: center; } .pstn-mobile-drawer__social img { width: 26px; height: 26px; object-fit: contain; } .pstn-mobile-drawer-backdrop { position: fixed; z-index: 1190; inset: 0; background: rgba(0,0,0,.35); opacity: 0; visibility: hidden; transition: .3s ease; } .pstn-mobile-drawer-backdrop.is-open { opacity: 1; visibility: visible; } #pstn-clone { padding-top: var(--pstn-chrome-height); background: var(--pstn-color-surface); } #pstn-clone [id] { scroll-margin-top: calc(var(--pstn-chrome-height) + 24px); } body.pstn-promotion-hidden #pstn-clone [id] { scroll-margin-top: calc(var(--pstn-header-height) + 24px); } #pstn-clone ul { list-style: none; padding: 0; margin: 0; } #pstn-clone h1, #pstn-clone h2, #pstn-clone h3, #pstn-clone p { margin-top: 0; padding: 0; color: inherit; font-family: var(--pstn-font); } .pstn-hero { position: relative; max-width: 1920px; height: 688px; margin: clamp(28px, 3vw, 42px) auto 0; overflow: hidden; background: var(--pstn-color-surface); } .pstn-hero__viewport { position: relative; width: 100%; height: 100%; overflow: hidden; cursor: grab; touch-action: pan-y pinch-zoom; } .pstn-hero__track { position: absolute; top: 0; left: 0; height: 688px; display: flex; gap: 0; will-change: transform; transition: transform .3s ease; } .pstn-hero.is-dragging .pstn-hero__viewport { cursor: grabbing; } .pstn-hero.is-dragging .pstn-hero__track { transition: none !important; } .pstn-hero__track.is-jumping { transition: none !important; } .pstn-hero__track.is-jumping .pstn-hero__slide, .pstn-hero__track.is-jumping .pstn-hero__slide::after, .pstn-hero__track.is-jumping .pstn-hero__slide > a::before, .pstn-hero__track.is-jumping .pstn-hero__copy, .pstn-hero__track.is-jumping .pstn-hero__mobile-more, .pstn-hero__track.is-jumping .pstn-hero__copy > * { transition: none !important; } .pstn-hero__slide { position: relative; flex: 0 0 391px; width: 391px; height: 688px; margin-right: -10px; transform: translateY(-36px) scale(.8952); transform-origin: center; border-radius: 15px; overflow: hidden; box-shadow: 0 18px 55px rgba(33,58,49,.08); transition: transform .5s cubic-bezier(.18,.89,.32,1) .15s, opacity .35s; } .pstn-hero__slide.is-prev { transform: translate(-10px, -36px) scale(.8952); } .pstn-hero__slide.is-next { transform: translate(10px, -36px) scale(.8952); } .pstn-hero__slide::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; background: rgba(0,0,0,.4); pointer-events: none; transition: opacity .35s; } .pstn-hero__slide.is-active { z-index: 3; transform: scale(1); } .pstn-hero__slide.is-active::after { opacity: 0; } .pstn-hero__slide a, .pstn-hero__slide picture { display: block; width: 100%; height: 100%; } .pstn-hero__slide > a { position: relative; } .pstn-hero__slide > a::before { content: ""; position: absolute; z-index: 1; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease; } .pstn-hero__slide.tone-light > a::before { background: linear-gradient(to top, rgba(7,12,18,.74) 0%, rgba(7,12,18,.4) 34%, rgba(7,12,18,0) 68%); } .pstn-hero__slide.tone-dark > a::before { background: linear-gradient(to top, rgba(255,255,255,.78) 0%, rgba(255,255,255,.42) 35%, rgba(255,255,255,0) 68%); } .pstn-hero__slide.has-copy.is-active > a::before { opacity: 1; } .pstn-hero__slide img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; -webkit-user-drag: none; user-select: none; } .pstn-hero__copy { position: absolute; z-index: 2; bottom: 50px; left: 0; width: 100%; padding: 0 34px; } .pstn-hero__copy > * { opacity: 0; visibility: hidden; transform: translateY(10px); transition: none; } .pstn-hero.is-copy-ready .pstn-hero__slide.is-active .pstn-hero__copy > * { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .6s ease, transform .6s ease, visibility .6s ease; } .pstn-hero.is-copy-ready .pstn-hero__slide.is-active .pstn-hero__headline { transition-delay: .2s; } .pstn-hero.is-copy-ready .pstn-hero__slide.is-active .pstn-hero__copy > p:not(.pstn-hero__headline) { transition-delay: .4s; } .pstn-hero__headline { margin: 0 0 15px !important; font-size: 30px; line-height: 1.3; font-weight: 700; letter-spacing: -.2px; word-break: keep-all; overflow-wrap: normal; text-wrap: balance; } .pstn-hero__copy > p:not(.pstn-hero__headline) { margin: 0 !important; font-size: 16px; line-height: 1.5; font-weight: 500; letter-spacing: -.6px; } .pstn-hero__slide.tone-light { color: #fff; } .pstn-hero__slide.tone-dark { color: #111; } .pstn-hero__badge { width: fit-content; min-height: 26px; margin-bottom: 15px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 60px; font-size: 13px; font-weight: 650; letter-spacing: -.4px; } .pstn-hero__slide.tone-light .pstn-hero__badge { background: rgba(16,20,24,.78); color: #fff; } .pstn-hero__slide.tone-dark .pstn-hero__badge { background: rgba(255,255,255,.9); color: #222; } .pstn-hero__mobile-more { display: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: none; } .pstn-hero.is-copy-ready .pstn-hero__slide.is-active .pstn-hero__mobile-more { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .6s ease .6s, transform .6s ease .6s, visibility .6s ease .6s; } .pstn-hero__controls { position: absolute; z-index: 5; left: calc(50% + 57px); bottom: 30px; display: flex; align-items: center; gap: 20px; } .pstn-hero__controls > button { position: relative; width: 44px; height: 44px; padding: 0; /* grid로 두면 버튼 안의 숨은 ‹ 텍스트가 두 번째 줄을 만들어 화살표가 위로 밀린다. flex로 한 줄에 두어 세로 중앙에 오게 한다. */ display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 0; line-height: 1; filter: drop-shadow(0 1px 5px rgba(0,0,0,.48)); transition: opacity .2s ease, transform .2s ease, background-color .2s ease; } .pstn-hero__controls > button::before { content: ""; width: 12px; height: 12px; border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor; } .pstn-hero__controls > button[data-hero-prev]::before { transform: rotate(45deg); } .pstn-hero__controls > button[data-hero-next]::before { transform: rotate(-135deg); } .pstn-hero__controls > button:hover { opacity: .68; transform: translateX(-2px); } .pstn-hero__controls > button[data-hero-next]:hover { transform: translateX(2px); } .pstn-hero__controls > button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .pstn-hero--card.is-tone-dark .pstn-hero__controls > button { color: #18211e; filter: drop-shadow(0 1px 5px rgba(255,255,255,.68)); } /* Card hero polish: controls live under the deck (not over the copy), side cards get a quiet unified grade. */ @media (min-width: 768px) { .pstn-hero--card { height: 744px; } .pstn-hero--card .pstn-hero__viewport { height: 688px; } /* 카드 아래 빈 띠에 두면 히어로 밖에 떨어져 보인다. 카피 아래 남는 50px 안쪽으로 올린다. 다만 조작 장치일 뿐이라 사진을 가리지 않게 거의 드러나지 않는 밝기로 두고, 포인터를 올리면 또렷해지도록 한다. 배경판 없이 흰 획 + 옅은 그림자로만 읽힌다. */ .pstn-hero--card .pstn-hero__controls { left: 50%; right: auto; bottom: 59px; gap: 0; padding: 0; background: transparent; opacity: .32; transform: translateX(-50%); transition: opacity .25s ease; } .pstn-hero--card .pstn-hero__controls:hover, .pstn-hero--card .pstn-hero__controls:focus-within { opacity: 1; } /* 12px 정사각형을 45도 돌리면 잉크 높이가 17px이 되어 13px 숫자 옆에서 혼자 커 보인다. 9px로 줄이면 잉크 높이가 12.7px이라 숫자와 한 줄로 읽힌다. 또 회전 때문에 잉크 중심이 버튼 중심에서 약 3px 바깥으로 밀리므로 그만큼 되돌린다. */ .pstn-hero--card .pstn-hero__controls > button::before { width: 9px; height: 9px; } .pstn-hero--card .pstn-hero__controls > button[data-hero-prev]::before { transform: translateX(3px) rotate(45deg); } .pstn-hero--card .pstn-hero__controls > button[data-hero-next]::before { transform: translateX(-3px) rotate(-135deg); } .pstn-hero--card .pstn-hero__controls > button, .pstn-hero--card.is-tone-dark .pstn-hero__controls > button { color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45)); } .pstn-hero--card .pstn-hero__controls > button:hover { color: #fff; opacity: .68; } .pstn-hero--card .pstn-hero__controls .pstn-hero__fraction { position: static; min-width: 44px; height: auto; padding: 0; display: flex; background: transparent; color: #fff; font-size: 13px; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); } .pstn-hero--card .pstn-hero__slide:not(.is-active) img { filter: saturate(.84) brightness(.97); transition: filter .5s ease; } } .pstn-hero__dots { display: flex; align-items: center; gap: 0; } .pstn-hero > .pstn-hero__controls .pstn-hero__dots { display: none; } .pstn-hero__dots button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 0; background: transparent; } .pstn-hero__dots button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9aa7a2; transition: width .2s, border-radius .2s, background .2s; } .pstn-hero__dots button.is-active::before { width: 22px; border-radius: 4px; background: var(--pstn-color-text); } .pstn-hero.is-autoplaying .pstn-hero__dots button.is-active::before { background: var(--pstn-color-accent); animation: pstn-hero-progress var(--hero-autoplay-delay) linear; transform-origin: left; } @keyframes pstn-hero-progress { from { opacity: .42; } to { opacity: 1; } } /* Full-width hero: shares the same slides, copy timing and admin data as the card layout. */ .pstn-hero--full { width: 100%; max-width: none; height: 650px; margin-top: 0; } .pstn-hero--full .pstn-hero__track { position: relative; width: 100%; height: 100%; transform: none !important; transition: none; } .pstn-hero--full .pstn-hero__slide, .pstn-hero--full .pstn-hero__slide.is-prev, .pstn-hero--full .pstn-hero__slide.is-next { position: absolute; inset: 0; width: 100%; height: 100%; flex: none; margin-right: 0; transform: none; border-radius: 0; box-shadow: none; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s ease; } .pstn-hero--full .pstn-hero__slide.is-active { z-index: 2; opacity: 1; visibility: visible; } .pstn-hero--full .pstn-hero__slide::after { display: none; } .pstn-hero--full .pstn-hero__slide img { border-radius: 0; } .pstn-hero--full .pstn-hero__slide > a::before { display: none; } .pstn-hero--full .pstn-hero__slide.is-brand-dialogue > a::before { display: block; opacity: 1; background: linear-gradient(90deg, rgba(247,250,249,.72) 0%, rgba(247,250,249,.38) 30%, rgba(247,250,249,0) 58%); } .pstn-hero--full .pstn-hero__copy { top: 50%; bottom: auto; left: 50%; width: min(1200px, calc(100% - 96px)); padding: 0; transform: translate(-50%, -50%); } .pstn-hero--full .pstn-hero__copy > * { max-width: 540px; } .pstn-hero--full .pstn-hero__headline { margin-bottom: 17px !important; font-size: 33px; line-height: 1.3; letter-spacing: -.03em; } .pstn-hero--full .pstn-hero__copy > p:not(.pstn-hero__headline) { max-width: 500px; font-size: 17px; line-height: 1.55; letter-spacing: -.035em; } .pstn-hero--full .pstn-hero__controls { inset: 0; display: block; pointer-events: none; } .pstn-hero--full .pstn-hero__controls > button { position: absolute; top: 50%; width: 44px; height: 44px; display: grid; transform: translateY(-50%); pointer-events: auto; filter: drop-shadow(0 1px 5px rgba(0,0,0,.2)); } .pstn-hero--full .pstn-hero__controls > button::before { width: 14px; height: 14px; } .pstn-hero--full .pstn-hero__controls > button[data-hero-prev] { left: 40px; } .pstn-hero--full .pstn-hero__controls > button[data-hero-next] { right: 40px; } .pstn-hero--full .pstn-hero__controls > button:hover { transform: translate(-2px, -50%); } .pstn-hero--full .pstn-hero__controls > button[data-hero-next]:hover { transform: translate(2px, -50%); } .pstn-hero--full > .pstn-hero__controls .pstn-hero__dots { position: absolute; left: 50%; bottom: 50px; display: flex; transform: translateX(-50%); pointer-events: auto; } .pstn-hero--full .pstn-hero__dots button.is-active::before { width: 25px; } .pstn-hero--full.is-tone-dark .pstn-hero__controls > button { color: #151515; } .pstn-hero--full.is-tone-light .pstn-hero__controls > button { color: #fff; } .pstn-hero--full.is-tone-dark .pstn-hero__dots button::before { background: rgba(17,17,17,.42); } .pstn-hero--full.is-tone-dark .pstn-hero__dots button.is-active::before, .pstn-hero--full.is-tone-dark.is-autoplaying .pstn-hero__dots button.is-active::before { background: var(--pstn-color-text); } .pstn-hero--full.is-tone-light .pstn-hero__dots button::before { background: rgba(255,255,255,.68); } .pstn-hero--full.is-tone-light .pstn-hero__dots button.is-active::before, .pstn-hero--full.is-tone-light.is-autoplaying .pstn-hero__dots button.is-active::before { background: #fff; } .pstn-hero__fraction { position: absolute; right: 16px; bottom: 16px; min-width: 58px; height: 26px; padding: 0 10px; display: none; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; background: rgba(20,20,20,.65); color: #fff; font-size: 12px; line-height: 1; pointer-events: none; } .pstn-hero__fraction b { font: inherit; font-weight: 650; } .pstn-hero__fraction i { font-style: normal; opacity: .55; } .pstn-quick { margin: var(--pstn-space-section-compact) 0 var(--pstn-space-section); } .pstn-quick ul { width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); margin: 0 auto !important; display: flex; justify-content: center; gap: 20px; } .pstn-quick a { display: block; text-align: center; } .pstn-quick-icon { position: relative; width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden; border-radius: var(--pstn-radius-round); background: var(--pstn-color-surface-soft); color: var(--pstn-color-accent-strong); box-shadow: inset 0 0 0 1px rgba(18,44,76,.05); transition: transform .25s ease, background .25s ease, box-shadow .25s ease; } .pstn-quick a:hover .pstn-quick-icon { transform: translateY(-4px); background: #eceff3; } .pstn-quick__label { display: block; margin-top: 18px; font-size: 15px; font-weight: 600; } .pstn-quick-icon img { display: block; } .pstn-quick-logo { width: 62px; height: auto; } .pstn-quick-products { position: absolute; inset: 0; display: block; } .pstn-quick-products img { position: absolute; width: 48px; height: 48px; object-fit: cover; object-position: center 18%; border: 2px solid rgba(255,255,255,.84); border-radius: 12px; box-shadow: 0 3px 10px rgba(0,55,130,.1); mix-blend-mode: multiply; } .pstn-quick-products img:nth-child(1) { left: 7px; top: 15px; transform: rotate(-8deg); } .pstn-quick-products img:nth-child(2) { right: 6px; top: 11px; transform: rotate(8deg); } .pstn-quick-products img:nth-child(3) { left: 25px; bottom: 5px; } .pstn-quick-product-image { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(27,55,72,.1)); mix-blend-mode: multiply; } .pstn-quick-wordmark { color: #8d9793; font-family: var(--pstn-font); font-size: 20px; font-weight: 600; letter-spacing: .02em; } .pstn-quick-story { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; } .pstn-quick-icon.is-pharmacy { color: #147965; } .pstn-quick-icon.is-instagram { color: #1d69d5; } .pstn-quick-icon svg { width: 59px; height: 59px; } .pstn-section { width: 100%; } .pstn-section-title { text-align: center; } .pstn-section-title span { display: block; margin-bottom: 10px; color: var(--pstn-color-accent); font-family: var(--pstn-font); font-size: var(--pstn-type-eyebrow); line-height: 1.3; font-style: normal; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; } .pstn-section-title h2 { margin-bottom: 0 !important; color: var(--pstn-color-text); font-size: var(--pstn-type-section-title); line-height: 1.25; font-weight: 650; letter-spacing: -.04em; word-break: keep-all; text-wrap: balance; } .pstn-products { padding: 0; text-align: center; overflow: hidden; } .pstn-products__viewport { width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); margin: 58px auto 0; overflow: hidden; touch-action: pan-y; container-type: inline-size; } .pstn-products__viewport::-webkit-scrollbar { display: none; } .pstn-products__grid { width: max-content; min-width: max-content; display: flex; gap: 20px; padding-left: 0 !important; text-align: left; will-change: transform; transition: transform .55s cubic-bezier(.22,.75,.25,1); } .pstn-products__grid.is-jumping { transition: none !important; } .pstn-product-card { width: calc((100cqw - 60px) / 4); flex: 0 0 calc((100cqw - 60px) / 4); vertical-align: top; } .pstn-product-card__link { display: block; } [data-step-clone] { user-select: none; } .pstn-product-card__image { position: relative; height: auto; aspect-ratio: 1; display: block; overflow: hidden; border-radius: var(--pstn-radius-md); } .pstn-product-card__image > img { transition: opacity .3s, transform .4s; } .pstn-product-card__link:hover .pstn-product-card__image > img:first-of-type { transform: translateX(-50%) scale(1.018); } /* Clean catalogue cards: preserve the exact product render on a quiet surface. */ .pstn-product-visual { --pstn-thumb-cutout-width: 96%; --pstn-thumb-cutout-top: 2%; --pstn-thumb-cutout-clip: inset(0); isolation: isolate; background: #f7f8f7; box-shadow: inset 0 0 0 1px rgba(23,51,45,.045); } .pstn-product-visual::before, .pstn-product-visual::after { display: none !important; } .pstn-product-visual > img { position: absolute; z-index: 1; top: var(--pstn-thumb-cutout-top); left: 50%; width: var(--pstn-thumb-cutout-width); max-width: none; height: auto; display: block; object-fit: contain; clip-path: var(--pstn-thumb-cutout-clip); filter: drop-shadow(0 12px 16px rgba(19,39,57,.075)); transform: translateX(-50%); transform-origin: center center; } .pstn-product-visual.is-legacy-captioned { --pstn-thumb-cutout-width: 100%; --pstn-thumb-cutout-top: 8%; --pstn-thumb-cutout-clip: inset(0 0 25% 0); } .pstn-product-visual.is-flat-artwork > img { top: 21%; width: 82%; height: auto; clip-path: none; border-radius: 10px; box-shadow: 0 16px 34px rgba(16,37,59,.12); filter: none; } .pstn-product-visual.is-tall-legacy { --pstn-thumb-cutout-width: 162%; --pstn-thumb-cutout-top: -10%; --pstn-thumb-cutout-clip: inset(0 0 25% 0); } /* Per-product canvas calibration: sources ship with uneven whitespace, so boxes rendered at 50-73% of tile width against the 78% norm. Zoom factors below were measured from the live grid (content bbox vs tile, 2026-08); top offsets keep the artwork optically centred. */ .pstn-product-visual.is-zoom-103 { --pstn-thumb-cutout-width: 103%; --pstn-thumb-cutout-top: -1.5%; } .pstn-product-visual.is-zoom-108 { --pstn-thumb-cutout-width: 108%; --pstn-thumb-cutout-top: -4%; } .pstn-product-visual.is-zoom-112 { --pstn-thumb-cutout-width: 112%; --pstn-thumb-cutout-top: -3%; } .pstn-product-visual.is-zoom-121 { --pstn-thumb-cutout-width: 121%; --pstn-thumb-cutout-top: -10.5%; } .pstn-product-visual.is-zoom-125 { --pstn-thumb-cutout-width: 125%; --pstn-thumb-cutout-top: -12.5%; } .pstn-product-visual.is-zoom-150 { --pstn-thumb-cutout-width: 150%; --pstn-thumb-cutout-top: -19%; } /* Match the visible box height to standard catalogue renders while preserving each source canvas. */ .pstn-catalog-card.post-87 .pstn-product-visual, .pstn-product-visual.is-height-normalized-hm1 { --pstn-thumb-cutout-width: 88.7%; --pstn-thumb-cutout-top: 4.8%; } .pstn-catalog-card.post-129 .pstn-product-visual, .pstn-product-visual.is-height-normalized-hm5 { --pstn-thumb-cutout-width: 86.5%; --pstn-thumb-cutout-top: 6.1%; } .pstn-catalog-card.post-53 .pstn-product-visual, .pstn-product-visual.is-height-normalized-hm8 { --pstn-thumb-cutout-width: 87.7%; --pstn-thumb-cutout-top: 5.5%; } /* Centre the visible artwork, not the transparent source canvas. */ .pstn-catalog-card.post-81 .pstn-product-visual > img { left: 55.3%; } .pstn-catalog-card.post-65 .pstn-product-visual > img { left: 54.4%; } .pstn-product-visual.is-hm6-clean { --pstn-thumb-cutout-width: 120%; --pstn-thumb-cutout-top: -5%; --pstn-thumb-cutout-clip: inset(20% 28.2% 32.5% 19.5%); } .pstn-motion-ready .pstn-products .pstn-products__viewport { opacity: 0; transform: translate3d(0, 72px, 0); transition: opacity .62s ease .08s, transform .78s cubic-bezier(.18,.89,.32,1) .08s; } .pstn-motion-ready .pstn-products.is-revealed .pstn-products__viewport { opacity: 1; transform: translate3d(0, 0, 0); } .pstn-product-card__text { display: block; padding-top: 22px; } .pstn-product-card__text h3 { margin-bottom: 0 !important; font-size: 18px; line-height: 1.45; font-weight: 650; } .pstn-monthly-products__price del { margin-right: 6px; color: #999; font-weight: 400; } .pstn-monthly-products__price ins { text-decoration: none; } .pstn-more-link { position: relative; margin-top: 80px; padding: 14px 92px 14px 0; display: inline-block; border-bottom: 1px solid #111; font-size: 15px; font-weight: 500; } .pstn-more-link::before, .pstn-more-link::after { content: ""; position: absolute; top: 50%; right: 0; width: 20px; height: 1px; background: #111; } .pstn-more-link::after { transform: rotate(90deg); } .pstn-more-link { transition: color .2s ease, border-color .2s ease; } .pstn-more-link:hover, .pstn-more-link:focus-visible { color: var(--pstn-color-accent-strong); border-color: var(--pstn-color-accent-strong); } .pstn-more-link:hover::before, .pstn-more-link:hover::after, .pstn-more-link:focus-visible::before, .pstn-more-link:focus-visible::after { background: var(--pstn-color-accent-strong); } .pstn-step-carousel__controls { width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); margin: 20px auto 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; } .pstn-step-carousel__controls[hidden] { display: none; } /* 히어로처럼 끌어서 넘길 수 있다는 걸 커서로 알린다. 기능은 이미 있는데 안내가 없어 조작 가능한 영역인지 알 수 없었다. */ [data-step-viewport] { cursor: grab; } [data-step-viewport]:active { cursor: grabbing; } .pstn-step-carousel__controls button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--pstn-color-line); border-radius: var(--pstn-radius-round); background: var(--pstn-color-surface); color: var(--pstn-color-text); font-size: 25px; line-height: 1; transition: color .18s ease, border-color .18s ease, background-color .18s ease; } .pstn-step-carousel__controls button:hover, .pstn-step-carousel__controls button:focus-visible { border-color: var(--pstn-color-accent); background: #f3f7fb; color: var(--pstn-color-accent-strong); } .pstn-step-carousel__status { min-width: 58px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--pstn-color-text-muted); font-size: 12px; line-height: 1; } .pstn-step-carousel__status b { color: inherit; font: inherit; font-weight: 650; } .pstn-step-carousel__status i { font-style: normal; opacity: .45; } [data-step-viewport]:focus-visible { outline: 2px solid var(--pstn-color-accent); outline-offset: 4px; } .pstn-event { position: relative; margin-top: var(--pstn-space-section); overflow: hidden; } .pstn-event__viewport { width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); margin: 0 auto; overflow: hidden; touch-action: pan-y; } .pstn-event__track { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); will-change: transform; transition: transform .42s cubic-bezier(.22,.75,.25,1); } .pstn-event__track.is-jumping { transition: none !important; } .pstn-event a { position: relative; min-width: 0; overflow: hidden; } .pstn-event a { display: block; width: auto; } .pstn-event a[data-event-clone] { display: none; } .pstn-event img { width: 100%; aspect-ratio: 16/9; display: block; object-fit: cover; transition: transform .5s ease; } .pstn-event a:hover img { transform: scale(1.015); } .pstn-event span { position: absolute; left: 7%; top: 50%; bottom: auto; transform: translateY(-50%); color: #1c2d32; font-size: 17px; line-height: 1.55; } .pstn-event span small { display: block; margin-bottom: 10px; color: var(--pstn-color-accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; } .pstn-event span strong { display: block; margin-bottom: 18px; font-size: clamp(24px, 2.1vw, 35px); line-height: 1.3; letter-spacing: -.04em; } .pstn-event__dots { display: none; } .pstn-monthly-products { margin-top: var(--pstn-space-section); } .pstn-monthly-products__layout { width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); margin: 52px auto 0; display: grid; grid-template-columns: minmax(420px, 726px) minmax(500px, 1fr); gap: 20px; align-items: center; } .pstn-monthly-products__video { height: 492px; overflow: hidden; background: #eee; } .pstn-monthly-products__video video, .pstn-monthly-products__video > img { width: 100%; height: 100%; display: block; object-fit: cover; } .pstn-monthly-product-visual { position: relative; display: block; border-radius: var(--pstn-radius-md); color: inherit; text-decoration: none; } .pstn-monthly-product-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,32,50,.62), rgba(6,32,50,.2) 34%, transparent 62%); pointer-events: none; } .pstn-monthly-product-visual > div { position: absolute; z-index: 2; left: 35px; right: 28px; bottom: 30px; color: #fff; } .pstn-monthly-product-visual small { display: inline-flex; margin-bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .16em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .pstn-monthly-product-visual strong { display: block; color: #fff; font-size: 25px; line-height: 1.4; letter-spacing: -.02em; word-break: keep-all; text-shadow: 0 2px 18px rgba(6,32,50,.45); } .pstn-monthly-products__layout > ul { height: 492px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ccd3da transparent; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), rgba(0,0,0,.32)); mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), rgba(0,0,0,.32)); } .pstn-monthly-products__layout > ul::-webkit-scrollbar { width: 6px; } .pstn-monthly-products__layout > ul::-webkit-scrollbar-thumb { border-radius: 3px; background: #ccd3da; } .pstn-monthly-products__layout > ul::-webkit-scrollbar-track { background: transparent; } .pstn-monthly-products__layout li a { display: flex; align-items: center; } .pstn-monthly-products__layout li a > span { position: relative; width: 236px; height: 236px; flex: 0 0 236px; display: grid; place-items: center; overflow: hidden; background: #f5f5f5; } .pstn-monthly-products__layout li img { width: 86%; height: 86%; object-fit: contain; animation: pstn-float 1.2s ease-in-out infinite alternate; } @keyframes pstn-float { from { transform: translateY(-6px); } to { transform: translateY(2px); } } .pstn-monthly-products__layout li div { min-height: 246px; flex: 1; padding: 25px 22px 25px 30px; display: flex; flex-wrap: wrap; align-content: center; gap: 0 14px; border-bottom: 1px solid #eee; } /* li로 스코프: 광역 small/strong 규칙이 왼쪽 대표 비주얼의 흰색 오버레이 카피를 덮던 문제 방지 */ .pstn-monthly-products__layout li small { width: 100%; color: #777; font-size: 13px; } .pstn-monthly-products__layout h3 { width: 100%; margin: 10px 0 0 !important; font-size: 20px; font-weight: 650; transition: color .2s ease; } .pstn-monthly-products__layout li a:hover h3, .pstn-monthly-products__layout li a:focus-visible h3 { color: var(--pstn-blue); } .pstn-monthly-products__layout p { width: 100%; margin: 20px 0 18px !important; color: #6b7680 !important; font-size: 14px; line-height: 1.65; letter-spacing: -.01em; word-break: keep-all; } .pstn-monthly-products__layout .pstn-monthly-products__price { margin: 12px 0 0 !important; color: #111 !important; font-size: 15px; font-weight: 700; } .pstn-monthly-products__layout del { color: #999; font-size: 16px; } .pstn-monthly-products__layout li strong { color: var(--pstn-blue); font-size: 15px; } .pstn-brand-story { width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); margin: var(--pstn-space-section) auto 0; padding: clamp(52px, 6vw, 84px) 0 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(56px, 8vw, 124px); align-items: start; border-top: 1px solid var(--pstn-color-line); background: transparent; } .pstn-brand-story__intro > span { display: block; margin-bottom: 18px; color: var(--pstn-color-accent); font-family: var(--pstn-font); font-size: var(--pstn-type-eyebrow); font-style: normal; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; } .pstn-brand-story__intro h2 { margin: 0; color: var(--pstn-color-text); font-size: clamp(38px, 4vw, 58px); line-height: 1.18; font-weight: 600; letter-spacing: -.055em; word-break: keep-all; } .pstn-brand-story__lead { margin-top: 24px; display: block; color: #243b45; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; letter-spacing: -.035em; word-break: keep-all; } .pstn-brand-story__intro p { max-width: 590px; margin: 28px 0 0; color: var(--pstn-color-text-muted); font-size: 16px; line-height: 1.75; } /* 오른쪽 목록의 첫 줄을 왼쪽 eyebrow가 아니라 h2 윗줄에 맞춘다. */ .pstn-brand-story__values { padding-top: 10px; display: grid; border-bottom: 1px solid var(--pstn-color-line); } .pstn-brand-story__values article { min-height: 0; padding: 24px 0; display: grid; grid-template-columns: 48px minmax(118px, .45fr) minmax(0, 1fr); gap: 18px; align-items: start; border-top: 1px solid var(--pstn-color-line); background: transparent; } .pstn-brand-story__values em { color: var(--pstn-color-accent); font-family: var(--pstn-font); font-size: 12px; font-style: normal; font-weight: 750; letter-spacing: .08em; } .pstn-brand-story__values strong { color: var(--pstn-color-accent-strong); font-size: 14px; line-height: 1.5; letter-spacing: .04em; } .pstn-brand-story__values p { margin: 0 !important; color: var(--pstn-color-text-muted) !important; font-size: 14px; line-height: 1.65; } .pstn-brand-film { position: relative; margin-top: var(--pstn-space-section-compact); min-height: 0; overflow: hidden; background: #10253b; } .pstn-brand-film video { width: 100%; height: min(72vw, 820px); min-height: 560px; display: block; object-fit: cover; } .pstn-brand-film::after { display: none; } .pstn-brand-film a { position: absolute; z-index: 2; left: 50%; bottom: 70px; min-width: 280px; padding: 18px 90px 18px 0; transform: translateX(-50%); border-bottom: 1px solid #fff; color: #fff; font-size: 19px; } .pstn-brand-film a::after { content: ""; position: absolute; top: 50%; right: 8px; width: 12px; height: 12px; transform: translateY(-50%) rotate(-45deg); border-right: 1px solid #fff; border-bottom: 1px solid #fff; } .pstn-youtube-wrap { position: relative; width: 100%; margin: 0; aspect-ratio: 16/9; overflow: hidden; background: #10253b; } .pstn-youtube-wrap iframe { position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; display: block; border: 0; transform: translate(-50%, -50%); pointer-events: none; } .pstn-youtube-shield { position: absolute; z-index: 2; inset: 0; background: transparent; cursor: default; } .pstn-global { margin-top: var(--pstn-space-section); } .pstn-global__viewport { width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); margin: 70px auto 0; overflow: hidden; touch-action: pan-y; container-type: inline-size; } .pstn-global__viewport::-webkit-scrollbar { display: none; } .pstn-global ul { width: max-content; min-width: max-content; display: flex; gap: 20px; will-change: transform; transition: transform .3s ease; } .pstn-global ul.is-jumping { transition: none !important; } .pstn-global li { position: relative; width: calc((100cqw - 60px) / 4); aspect-ratio: 328/549; flex: 0 0 calc((100cqw - 60px) / 4); overflow: hidden; border-radius: var(--pstn-radius-md); background: #eee; } .pstn-global li img, .pstn-global li video { width: 100%; height: 100%; display: block; object-fit: cover; } .pstn-global li video { position: absolute; inset: 0; background: #101b1f; } .pstn-home-partners { width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); margin: var(--pstn-space-section) auto 0; overflow: hidden; } .pstn-home-partners .pstn-product-intro__partners { border-top: 0; } .pstn-home-partners .pstn-product-intro__partners-heading h2 { margin: 13px 0 0 !important; color: #18242d; font-size: clamp(23px, 2.5vw, 35px); font-weight: 650; line-height: 1.35; letter-spacing: -.04em; word-break: keep-all; } .pstn-instagram { margin: var(--pstn-space-section) 0 var(--pstn-space-section); } .pstn-instagram ul { width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); margin: 55px auto 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .pstn-instagram li { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #f5f5f5; } .pstn-instagram li > a, .pstn-instagram li > a > img { width: 100%; height: 100%; display: block; } .pstn-instagram li > a > img { object-fit: cover; transition: transform .4s ease; } .pstn-instagram li:hover > a > img { transform: scale(1.035); } .pstn-instagram .is-video-tile::after { content: "▶"; position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.42); color: #fff; font-size: 10px; pointer-events: none; backdrop-filter: blur(6px); } .pstn-instagram .is-brand-tile span { position: absolute; left: 50%; bottom: 8%; width: 48%; padding: 12px 18px; transform: translateX(-50%); border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 8px 24px rgba(18,67,99,.12); backdrop-filter: blur(8px); } .pstn-instagram .is-brand-tile span img { width: 100%; height: auto; display: block; } .pstn-footer { background: var(--pstn-color-surface-soft); color: var(--pstn-color-text); border-top: 1px solid var(--pstn-color-line); } .pstn-footer__inner { width: min(var(--pstn-container-box), 100%); margin: 0 auto; padding: 72px var(--pstn-shell-gutter) 80px; display: grid; grid-template-columns: 1.35fr .8fr .9fr; gap: 56px; } .pstn-footer__company > img { width: 145px; margin-bottom: 35px; filter: none; } .pstn-footer p { margin: 7px 0; color: #666; font-size: 13px; line-height: 1.55; } .pstn-footer__cs h2 { margin: 0 0 12px; color: #222; font-size: 17px; text-transform: uppercase; } .pstn-footer__cs strong { display: block; margin-bottom: 26px; color: #222; font-size: 24px; } .pstn-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13px; } .pstn-footer__menu { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; list-style: none; } .pstn-footer__menu .menu-item { margin: 0; padding: 0; list-style: none; } .pstn-footer__menu a { min-height: 44px; display: inline-flex; align-items: center; transition: color .18s ease; } .pstn-footer__menu a:hover, .pstn-footer__menu a:focus-visible { color: var(--pstn-color-accent-strong); } .pstn-footer__social { margin-top: 25px; display: flex; gap: 12px; } .pstn-footer__social a { width: 44px; height: 44px; display: grid; place-items: center; } .pstn-footer__social img { width: 25px; height: 25px; object-fit: contain; filter: none; opacity: .75; } .pstn-mobile-bottom-nav, .pstn-recent-products, .pstn-recent-products-backdrop { display: none; } .pstn-to-top { position: fixed; z-index: 500; right: 22px; bottom: 24px; width: 48px; height: 48px; padding: 0; border-radius: 50%; background: transparent; opacity: 0; visibility: hidden; transition: .25s; } .pstn-to-top.is-visible { opacity: 1; visibility: visible; } .pstn-to-top img { width: 100%; display: block; } @media (max-width: 1500px) { .pstn-header__inner { gap: 23px; } .pstn-nav__list { gap: 21px; } .pstn-monthly-products { margin-top: var(--pstn-space-section); } } @media (max-width: 1180px) { :root { --pstn-header-height: 86px; --pstn-chrome-height: 116px; } .pstn-header { height: var(--pstn-header-height); } .pstn-header__inner { padding: 0 22px; } .pstn-logo { width: 105px; } .pstn-logo img { width: 105px; } .pstn-search { display: none; } .pstn-nav__list { gap: 12px; } .pstn-nav__item > a, .pstn-nav__product-toggle { font-size: 13px; } .pstn-product-mega { width: calc(100vw - 44px); padding: 25px; grid-template-columns: minmax(0, 1fr) 190px; grid-template-areas: "intro pharmacy" "browse pharmacy"; column-gap: 22px; row-gap: 16px; } .pstn-product-mega__intro { grid-area: intro; padding: 0 0 16px; border-right: 0; border-bottom: 1px solid #dde4df; } .pstn-product-mega__intro > span, .pstn-product-mega__intro > strong, .pstn-product-mega__intro > p { display: none; } .pstn-product-mega__intro .pstn-product-mega__quick { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; } .pstn-product-mega__intro .pstn-product-mega__quick a { min-height: 48px; padding: 5px 16px; flex-direction: column; align-items: flex-start; justify-content: center; } .pstn-product-mega__intro .pstn-product-mega__quick a + a { border-left: 1px solid #e5eae7; } .pstn-product-mega__intro .pstn-product-mega__quick a:first-child { padding-left: 0; } .pstn-product-mega__intro .pstn-product-mega__quick a::after { display: none; } .pstn-product-mega__intro .pstn-product-mega__quick span { margin-top: 4px; display: block; } .pstn-product-mega__browse { grid-area: browse; } .pstn-product-mega__pharmacy { grid-area: pharmacy; } .pstn-product-mega__pharmacy { min-height: 300px; } #pstn-clone { padding-top: var(--pstn-chrome-height); } body.pstn-promotion-hidden #pstn-clone { padding-top: var(--pstn-header-height); } .pstn-products__grid { gap: 10px; } .pstn-quick ul { gap: 16px; } .pstn-quick-icon { width: 84px; height: 84px; } .pstn-product-card { width: 29.5vw; flex-basis: 29.5vw; } .pstn-global ul { gap: 15px; } .pstn-global li { width: 29.5vw; flex-basis: 29.5vw; } .pstn-monthly-products__layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; } .pstn-monthly-products__video { width: 100%; height: clamp(420px, 48vw, 492px); aspect-ratio: auto; } .pstn-monthly-products__layout > ul { height: clamp(420px, 48vw, 492px); margin-top: 0 !important; overflow-y: auto; } .pstn-monthly-products__layout li a > span { width: clamp(150px, 38%, 210px); height: auto; min-height: 190px; flex-basis: clamp(150px, 38%, 210px); } .pstn-monthly-products__layout li div { min-height: 190px; padding: 20px 18px 20px 22px; } } @media (max-width: 900px) { body.pstn-theme { padding-bottom: calc(62px + env(safe-area-inset-bottom)); } .pstn-nav { display: none; } .pstn-search { margin-left: auto; } .pstn-footer__inner { grid-template-columns: 1fr 1fr; } .pstn-footer__links { grid-column: 1 / -1; } .pstn-footer__menu { flex-direction: row; flex-wrap: wrap; } .pstn-quick { margin: 48px 0 var(--pstn-space-section-compact); overflow: visible; } .pstn-quick ul { width: 100%; min-width: 0; padding: 0 15px !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: normal; gap: 26px 8px; } .pstn-quick li { min-width: 0; } .pstn-quick-icon { width: clamp(58px, 17vw, 66px); height: clamp(58px, 17vw, 66px); margin: 0 auto; } .pstn-quick__label { margin-top: 10px; font-size: 12px; } .pstn-quick-logo { width: 45px; height: auto; } .pstn-quick-icon svg { width: 43px; height: 43px; } .pstn-mobile-bottom-nav { position: fixed; z-index: 1100; right: 0; bottom: 0; left: 0; width: 100%; height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; background: #fff; filter: drop-shadow(0 -5px 5px rgba(0,0,0,.05)); } .pstn-mobile-bottom-nav > a, .pstn-mobile-bottom-nav > button { min-width: 0; height: 62px; padding: 7px 2px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 0; background: transparent; color: var(--pstn-color-text-muted); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: -.04em; text-decoration: none; cursor: pointer; transition: color .18s ease; } .pstn-mobile-bottom-nav > a:hover, .pstn-mobile-bottom-nav > button:hover { color: var(--pstn-color-accent-strong); } .pstn-mobile-bottom-nav > .is-current, .pstn-mobile-bottom-nav > [aria-current="page"], .pstn-mobile-bottom-nav > button[aria-expanded="true"] { color: #222; } .pstn-mobile-bottom-nav > a:focus-visible, .pstn-mobile-bottom-nav > button:focus-visible { outline: 2px solid var(--pstn-blue); outline-offset: -4px; } .pstn-mobile-bottom-nav > a > span:last-child, .pstn-mobile-bottom-nav > button > span:last-child { white-space: nowrap; word-break: keep-all; } .pstn-mobile-bottom-nav__icon { width: 28px; height: 26px; display: grid; place-items: center; color: currentColor; } .pstn-mobile-bottom-nav__icon svg { width: 25px; height: 25px; display: block; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .pstn-recent-products-backdrop { position: fixed; z-index: 1080; inset: 0 0 calc(62px + env(safe-area-inset-bottom)); display: block; background: rgba(17,29,35,.25); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility .22s ease; } .pstn-recent-products-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .pstn-recent-products { position: fixed; z-index: 1090; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); left: 50%; width: min(100%, 480px); max-height: min(62vh, 520px); padding: 24px 20px 20px; display: block; overflow-y: auto; border-radius: var(--pstn-radius-md) var(--pstn-radius-md) 0 0; background: var(--pstn-color-surface); box-shadow: var(--pstn-shadow-subtle); transform: translate(-50%, calc(100% + 24px)); visibility: hidden; transition: transform .28s cubic-bezier(.22,.75,.25,1), visibility 0s linear .28s; } .pstn-recent-products.is-open { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; } .pstn-recent-products header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .pstn-recent-products header span { display: block; margin-bottom: 5px; color: var(--pstn-color-accent); font-size: 12px; font-weight: 750; letter-spacing: .12em; } .pstn-recent-products h2 { margin: 0 !important; color: #18242a; font-size: 21px; line-height: 1.3; letter-spacing: -.035em; } .pstn-recent-products header button { position: relative; width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; background: #f3f5f4; } .pstn-recent-products header button::before, .pstn-recent-products header button::after { content: ""; position: absolute; top: 21px; left: 14px; width: 16px; height: 1px; background: #4f5b57; } .pstn-recent-products header button::before { transform: rotate(45deg); } .pstn-recent-products header button::after { transform: rotate(-45deg); } .pstn-recent-products ul { margin: 20px 0 0 !important; padding: 0 !important; display: grid; gap: 10px; list-style: none; } .pstn-recent-products li { border-bottom: 1px solid #edf0ee; } .pstn-recent-products li a { min-height: 78px; padding: 8px 0 10px; display: flex; align-items: center; gap: 13px; } .pstn-recent-products li img { width: 64px; height: 64px; flex: 0 0 64px; object-fit: contain; border-radius: 10px; background: #f7f8f7; } .pstn-recent-products li span { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .pstn-recent-products li strong { overflow: hidden; color: #1d2a2f; font-size: 13px; font-weight: 650; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .pstn-recent-products li small { color: var(--pstn-color-text-muted); font-size: 12px; } .pstn-recent-products__empty { margin: 34px 0 28px !important; color: var(--pstn-color-text-muted) !important; font-size: 13px; text-align: center; } .pstn-recent-products__empty[hidden] { display: none; } .pstn-recent-products__all { min-height: 44px; margin-top: 18px; display: flex; align-items: center; justify-content: center; border: 1px solid #dce3df; color: #344640; font-size: 12px; font-weight: 650; } body.is-recent-products-open { overflow: hidden; } .pstn-to-top { bottom: calc(74px + env(safe-area-inset-bottom)); } } @media (min-width: 768px) and (max-width: 1399px) { .pstn-hero__copy { padding-right: 30px; padding-left: 30px; } .pstn-hero__headline { font-size: 28px; } .pstn-hero__copy > p:not(.pstn-hero__headline) { font-size: 15px; } } @media (min-width: 768px) and (max-width: 1024px) { .pstn-hero--full { height: clamp(560px, calc(100svh - 142px), 720px); aspect-ratio: auto; } .pstn-hero--full .pstn-hero__copy { top: 50%; bottom: auto; left: 50%; width: min(1200px, calc(100% - 96px)); padding: 0; transform: translate(-50%, -50%); } .pstn-hero--full .pstn-hero__headline { font-size: clamp(30px, 3.7vw, 38px); } .pstn-hero--full .pstn-hero__copy > p:not(.pstn-hero__headline) { font-size: clamp(16px, 2vw, 19px); } .pstn-hero--full .pstn-hero__controls > button, .pstn-hero--full > .pstn-hero__controls .pstn-hero__dots { display: none; } .pstn-hero--full .pstn-hero__fraction { display: flex; } } /* PSTN's dedicated product catalogue. */ .pstn-catalog, .pstn-product-detail { padding-top: 142px; background: #fff; color: #111; } body.pstn-promotion-hidden .pstn-catalog, body.pstn-promotion-hidden .pstn-product-detail { padding-top: 112px; } .pstn-catalog *, .pstn-product-detail * { box-sizing: border-box; } .pstn-catalog ul, .pstn-product-detail ul { margin: 0; padding: 0; list-style: none; } .pstn-catalog-heading { width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); margin: 0 auto; padding: 78px 0 0; text-align: center; } .pstn-catalog-heading h1 { margin: 0 !important; color: #111; font-family: var(--pstn-font); font-size: 32px; line-height: 1.2; font-weight: 700; } .pstn-catalog-heading > p { margin: 12px 0 0 !important; color: #999 !important; font-size: 18px; line-height: 1.4; } .pstn-catalog-tabs { margin-top: 42px; display: flex; justify-content: center; align-items: center; gap: 34px; } .pstn-catalog-tabs a { position: relative; padding: 0 0 8px; color: #999; font-size: 15px; font-weight: 500; } .pstn-catalog-tabs a::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; transform: scaleX(0); background: #111; transition: transform .2s ease; } .pstn-catalog-tabs a:hover, .pstn-catalog-tabs a.is-active { color: #111; } .pstn-catalog-tabs a.is-active::after { transform: scaleX(1); } .pstn-catalog-concerns { margin: 18px auto 0; padding: 15px 18px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 10px; border-radius: 12px; background: #f7f8f7; } .pstn-catalog-concerns a { padding: 7px 12px; border-radius: 999px; color: #69716e; font-size: 12px; line-height: 1; } .pstn-catalog-concerns a:hover, .pstn-catalog-concerns a.is-active { background: #fff; color: var(--pstn-deep-blue); box-shadow: 0 3px 12px rgba(14,70,112,.08); } .pstn-catalog-visual { position: relative; width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); min-height: 390px; margin: 48px auto 0; padding: 58px 7%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr); align-items: center; overflow: hidden; background: linear-gradient(120deg, #e6f2ec 0%, #f8f7ee 58%, #edf5f7 100%); } .pstn-catalog-visual.is-copy-only { grid-template-columns: minmax(0, 780px); } .pstn-catalog-visual::before { content: ""; position: absolute; right: -8%; bottom: -48%; width: 520px; height: 520px; border: 1px solid rgba(20,105,200,.12); border-radius: 50%; } .pstn-catalog-visual > div:first-child { position: relative; z-index: 2; } .pstn-catalog-visual > div:first-child > span { display: block; margin-bottom: 17px; color: var(--pstn-blue); font-size: 12px; font-weight: 800; letter-spacing: .15em; } .pstn-catalog-visual h2 { margin: 0 !important; color: #102a36; font-size: var(--pstn-type-section-max, clamp(34px, 3vw, 46px)); line-height: 1.22; font-weight: 650; letter-spacing: -.045em; } .pstn-catalog-visual p { margin: 18px 0 25px !important; color: #66736f !important; font-size: 15px; line-height: 1.65; } .pstn-catalog-visual > div:first-child > a { display: inline-flex; align-items: center; gap: 28px; min-height: 52px; padding: 0 24px; background: #102a36; color: #fff; font-size: 14px; font-weight: 700; transition: .2s ease; } .pstn-catalog-visual > div:first-child > a:hover { background: var(--pstn-blue); transform: translateY(-2px); } .pstn-catalog-visual__products { position: relative; z-index: 1; align-self: stretch; } .pstn-catalog-visual__products img { position: absolute; bottom: -90px; width: 52%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(29,74,83,.15)); } .pstn-catalog-visual__products .is-product-1 { z-index: 3; right: 26%; bottom: -40px; transform: rotate(-4deg); } .pstn-catalog-visual__products .is-product-2 { z-index: 2; right: -2%; transform: rotate(7deg) scale(.88); } .pstn-catalog-visual__products .is-product-3 { z-index: 1; right: 52%; transform: rotate(-10deg) scale(.82); } .pstn-catalog-list { width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); margin: 50px auto 0; padding-bottom: 130px; } .pstn-catalog-toolbar { min-height: 58px; margin-bottom: 30px; padding-bottom: 13px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 380px) max-content; gap: clamp(16px, 3vw, 42px); align-items: center; border-bottom: 1px solid #eee; } .pstn-catalog-toolbar > p { margin: 0 !important; color: #333 !important; font-size: 14px; white-space: nowrap; } .pstn-catalog-search { position: relative; width: 100%; min-width: 0; margin: 0; justify-self: center; } .pstn-catalog-search input[type="search"] { width: 100%; height: 40px; padding: 0 70px 0 16px; border: 1px solid #dfe5e2; border-radius: 999px; outline: 0; color: #243331; background: #fff; font-size: 13px; transition: border-color .18s ease, box-shadow .18s ease; } .pstn-catalog-search input[type="search"]::placeholder { color: #8a9491; opacity: 1; } .pstn-catalog-search input[type="search"]:focus { border-color: var(--pstn-blue); box-shadow: 0 0 0 3px rgba(20,105,200,.1); } .pstn-catalog-search button { position: absolute; top: 3px; right: 4px; width: 34px; height: 34px; padding: 7px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--pstn-blue); } .pstn-catalog-search button:hover, .pstn-catalog-search button:focus-visible { background: rgba(20,105,200,.08); } .pstn-catalog-search button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .pstn-catalog-search__clear { position: absolute; z-index: 2; top: 7px; right: 38px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #7c8784; font-size: 18px; line-height: 1; } .pstn-catalog-search__clear:hover, .pstn-catalog-search__clear:focus-visible { color: #263532; background: #f1f4f3; } .pstn-catalog-toolbar .pstn-catalog-ordering { margin: 0; justify-self: end; } .pstn-catalog-toolbar .pstn-catalog-ordering select { min-width: 126px; height: 34px; padding: 0 28px 0 11px; border: 0; color: #666; background-color: transparent; font-size: 13px; outline: 0; } .pstn-catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 86px 20px; } .pstn-catalog-grid::before, .pstn-catalog-grid::after { display: none !important; } .pstn-catalog-grid .pstn-catalog-card { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .pstn-catalog-card__image { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 18px; } .pstn-catalog-card__image img { transition: transform .45s cubic-bezier(.2,.7,.2,1); } .pstn-catalog-card__image:hover img { transform: translateX(-50%) scale(1.018); } .pstn-catalog-card__body { padding-top: 19px; } .pstn-catalog-card__title { display: block; } .pstn-catalog-card__title h2 { min-height: 52px; margin: 0 !important; color: #111; font-size: 18px; line-height: 1.45; font-weight: 650; letter-spacing: -.025em; } .pstn-catalog .pstn-pagination { margin-top: 80px; } .pstn-catalog .pstn-pagination ul.page-numbers { display: flex; justify-content: center; gap: 7px; border: 0; } .pstn-catalog .pstn-pagination ul.page-numbers li { border: 0; } .pstn-catalog .pstn-pagination .page-numbers a, .pstn-catalog .pstn-pagination .page-numbers span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #e5e5e5; color: #777; background: #fff; font-size: 13px; } .pstn-catalog .pstn-pagination .page-numbers .current { border-color: #102a36; background: #102a36; color: #fff; } .pstn-catalog-empty { padding: 100px 20px; text-align: center; background: #f8f9f8; } .pstn-catalog-empty h2 { margin: 0 0 12px !important; font-size: 24px; } .pstn-catalog-empty p { margin: 0 0 24px !important; color: #777 !important; } .pstn-catalog-empty a { display: inline-flex; min-height: 46px; padding: 0 24px; align-items: center; background: #102a36; color: #fff; } .pstn-product-detail { min-height: 100vh; padding-bottom: 120px; } .pstn-product-detail__crumb { width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); margin: 0 auto; padding-top: 32px; display: flex; align-items: center; gap: 10px; color: #999; font-size: 12px; } .pstn-product-detail__crumb a:hover { color: #111; } .pstn-product-detail__hero { width: min(var(--pstn-container), calc(100% - var(--pstn-shell-gutter) * 2)); margin: 38px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .82fr); gap: clamp(55px, 7vw, 110px); align-items: center; } .pstn-product-detail__image { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #f8faf8, #edf3ef); } .pstn-product-detail__image > span { position: absolute; z-index: 2; top: 0; left: 0; min-width: 78px; padding: 9px 13px; background: #111; color: #fff; text-align: center; font-size: 12px; letter-spacing: .06em; } .pstn-product-detail__image img { width: 92%; height: 92%; object-fit: contain; } .pstn-product-detail__eyebrow { margin: 0 0 20px !important; color: var(--pstn-blue) !important; font-size: 12px; font-weight: 800; letter-spacing: .14em; } .pstn-product-detail__summary h1 { margin: 0 !important; color: #111; font-size: clamp(32px, 3vw, 48px); line-height: 1.22; font-weight: 600; letter-spacing: -.045em; } .pstn-product-detail__lead { margin: 18px 0 0 !important; color: #6f7774 !important; font-size: 16px; line-height: 1.7; } .pstn-product-detail__tags { margin: 25px 0 30px; display: flex; flex-wrap: wrap; gap: 8px; } .pstn-product-detail__tags a { padding: 8px 12px; border-radius: 999px; background: #f1f5f2; color: #587068; font-size: 12px; } .pstn-product-detail__summary dl { margin: 0 0 28px; padding: 22px 0; display: grid; grid-template-columns: 90px 1fr; gap: 13px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 13px; } .pstn-product-detail__summary dt { color: #999; } .pstn-product-detail__summary dd { margin: 0; color: #333; } .pstn-product-detail__cta { min-height: 60px; display: flex; justify-content: center; align-items: center; gap: 35px; background: #102a36; color: #fff !important; font-size: 15px; font-weight: 700; transition: .2s ease; } .pstn-product-detail__cta:hover { background: var(--pstn-blue); } .pstn-product-detail__notice { margin: 14px 0 0 !important; color: var(--pstn-color-text-muted) !important; font-size: 12px; line-height: 1.6; } .pstn-product-detail__content { width: min(1000px, calc(100% - 64px)); margin: 110px auto 0; padding-top: 55px; border-top: 1px solid #eee; } .pstn-product-detail__content h2 { margin: 0 0 35px !important; font-family: var(--pstn-font); font-size: 30px; font-weight: 700; } .pstn-product-detail__back { width: fit-content; margin: 70px auto 0; display: block; padding-bottom: 5px; border-bottom: 1px solid #111; font-size: 13px; } @media (max-width: 1024px) { .pstn-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 68px 16px; } .pstn-catalog-visual { grid-template-columns: 1fr 390px; } .pstn-product-detail__hero { gap: 45px; } } @media (max-width: 767px) { .pstn-catalog, .pstn-product-detail { padding-top: 105px; padding-bottom: 72px; } body.pstn-promotion-hidden .pstn-catalog, body.pstn-promotion-hidden .pstn-product-detail { padding-top: 75px; } .pstn-catalog-heading { width: auto; margin: 0 15px; padding-top: 43px; } .pstn-catalog-heading h1 { font-size: 27px; } .pstn-catalog-heading > p { margin-top: 9px !important; font-size: 15px; } .pstn-catalog-tabs { margin: 31px -15px 0; padding: 0 15px 8px; justify-content: safe center; gap: 25px; overflow-x: auto; scrollbar-width: none; } .pstn-catalog-tabs::-webkit-scrollbar, .pstn-catalog-concerns::-webkit-scrollbar { display: none; } .pstn-catalog-tabs a { flex: 0 0 auto; font-size: 13px; } .pstn-catalog-concerns { margin: 10px -15px 0; padding: 10px 15px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; border-radius: 0; } .pstn-catalog-concerns a { flex: 0 0 auto; } .pstn-catalog-visual { width: auto; min-height: 340px; margin: 28px 15px 0; padding: 34px 25px 154px; display: block; overflow: hidden; } .pstn-catalog-visual.is-copy-only { min-height: 0; padding-bottom: 34px; } .pstn-catalog-visual h2 { font-size: 29px; } .pstn-catalog-visual p { margin-top: 13px !important; font-size: 12px; } .pstn-catalog-visual > div:first-child > a { min-height: 45px; padding: 0 17px; gap: 20px; font-size: 12px; } .pstn-catalog-visual__products { position: absolute; right: 0; bottom: 0; left: 0; height: 178px; } .pstn-catalog-visual__products img { bottom: -52px; width: 42%; } .pstn-catalog-visual__products .is-product-1 { right: 29%; bottom: -34px; } .pstn-catalog-visual__products .is-product-2 { right: -2%; } .pstn-catalog-visual__products .is-product-3 { right: 60%; } .pstn-catalog-list { width: auto; margin: 34px 15px 0; padding-bottom: 70px; } .pstn-catalog-toolbar { min-height: 54px; margin-bottom: 22px; padding-bottom: 11px; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 7px; } .pstn-catalog-toolbar > p { font-size: 12px; } .pstn-catalog-search input[type="search"] { height: 36px; padding-left: 13px; padding-right: 62px; font-size: 12px; } .pstn-catalog-search button { top: 1px; right: 2px; } .pstn-catalog-search__clear { top: 5px; right: 34px; } .pstn-catalog-toolbar .pstn-catalog-ordering select { min-width: 96px; padding-right: 16px; padding-left: 0; font-size: 12px; } .pstn-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 10px; } .pstn-catalog-card__image { aspect-ratio: 1; } .pstn-catalog-card__body { padding-top: 13px; } .pstn-catalog-card__title h2 { min-height: 42px; font-size: 14px; line-height: 1.45; } .pstn-catalog .pstn-pagination { margin-top: 52px; } .pstn-product-detail__crumb { width: auto; margin: 0 15px; padding-top: 22px; overflow: hidden; white-space: nowrap; } .pstn-product-detail__hero { width: auto; margin: 22px 15px 0; display: block; } .pstn-product-detail__image { aspect-ratio: 1; border-radius: 15px 15px 0 0; } .pstn-product-detail__summary { padding: 30px 3px 0; } .pstn-product-detail__summary h1 { font-size: 29px; } .pstn-product-detail__lead { font-size: 14px; } .pstn-product-detail__content { width: auto; margin: 70px 15px 0; padding-top: 35px; } .pstn-product-detail__content h2 { font-size: 25px; } } @media (max-width: 782px) { body.admin-bar #wpadminbar { position: fixed; } body.admin-bar .pstn-promotion { top: 46px; } body.admin-bar .pstn-header { top: 76px; } body.admin-bar.pstn-promotion-hidden .pstn-header { top: 46px; } body.admin-bar .pstn-skip-link { top: 54px; } } @media (max-width: 767px) { :root { --pstn-header-height: 62px; --pstn-chrome-height: 92px; --pstn-space-section: 80px; --pstn-space-section-compact: 56px; --pstn-type-section-title: 28px; } body.pstn-theme { padding-bottom: calc(62px + env(safe-area-inset-bottom)); } .pstn-promotion { font-size: 12px; } .pstn-header { top: var(--pstn-promotion-height); height: var(--pstn-header-height); } .pstn-header__inner { padding: 0 15px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: center; gap: 0; } .pstn-logo { grid-column: 2; justify-self: center; width: 104px; } .pstn-logo img { width: 104px; } .pstn-search { display: none; } #pstn-clone { padding-top: var(--pstn-chrome-height); } body.pstn-promotion-hidden #pstn-clone { padding-top: var(--pstn-header-height); } .pstn-hero { width: 100%; height: auto; margin: 0; padding-bottom: 0; overflow: hidden; } .pstn-hero__viewport { width: 100%; height: auto; overflow: hidden; } .pstn-hero__track { position: relative; top: 0; width: 100%; height: auto; gap: 0; } .pstn-hero__slide { width: 100%; height: auto; margin-right: 0; aspect-ratio: 750/958; flex: 0 0 100%; transform: none !important; border-radius: var(--pstn-radius-md) var(--pstn-radius-md) 0 0; opacity: 1; } .pstn-hero__slide::after { display: none; } .pstn-hero__slide img { border-radius: var(--pstn-radius-md) var(--pstn-radius-md) 0 0; } .pstn-hero__copy { bottom: 50px; padding: 0 16px; } .pstn-hero__headline { margin-bottom: 10px !important; font-size: 25px; line-height: 1.3; font-weight: 700; letter-spacing: -.3px; } .pstn-hero__copy > p:not(.pstn-hero__headline) { font-size: 15px; line-height: 1.5; font-weight: 500; letter-spacing: -.6px; } .pstn-hero__badge { min-height: 24px; margin-bottom: 12px; padding: 0 10px; font-size: 12px; } .pstn-hero--card .pstn-hero__copy { bottom: 72px; padding-right: 72px; } .pstn-hero--card .pstn-hero__badge, .pstn-hero--card .pstn-hero__copy > p:not(.pstn-hero__headline) { display: none; } .pstn-hero--card .pstn-hero__headline { margin-bottom: 0 !important; font-size: 23px; } .pstn-hero__mobile-more { display: none; } .pstn-hero__mobile-more::after { content: ""; position: absolute; top: 50%; right: 3px; width: 10px; height: 10px; transform: translateY(-50%) rotate(-45deg); border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; } .pstn-hero__controls { left: auto; right: 16px; bottom: 16px; transform: none; } .pstn-hero__controls > button { display: none; } .pstn-hero > .pstn-hero__controls .pstn-hero__dots { display: flex; } .pstn-hero__dots button { width: 32px; height: 32px; } .pstn-hero__dots button::before { width: 5px; height: 5px; } .pstn-hero__dots button.is-active::before { width: 18px; } .pstn-hero--full { height: clamp(580px, calc(125vw + 190px), 680px); aspect-ratio: auto; background: #f7faf9; } .pstn-hero--full .pstn-hero__viewport, .pstn-hero--full .pstn-hero__track { height: 100%; } .pstn-hero--full .pstn-hero__slide, .pstn-hero--full .pstn-hero__slide.is-active { height: 100%; aspect-ratio: auto; border-radius: 0; } .pstn-hero--full .pstn-hero__slide img { border-radius: 0; } .pstn-hero--full .pstn-hero__slide.is-brand-dialogue > a::before { display: none; } .pstn-hero--full .pstn-hero__slide.is-brand-dialogue picture { height: calc(100% - 190px); } .pstn-hero--full .pstn-hero__slide.is-brand-dialogue .pstn-hero__copy { top: auto; bottom: 0; left: 0; width: 100%; height: 190px; padding: 17px 20px 19px; display: flex; flex-direction: column; justify-content: center; transform: none; background: #f7faf9; } .pstn-hero--full .pstn-hero__slide.is-brand-dialogue .pstn-hero__copy > * { max-width: 100%; } .pstn-hero--full .pstn-hero__headline { font-size: 24px; } .pstn-hero--full .pstn-hero__copy > p:not(.pstn-hero__headline) { max-width: 100%; font-size: 14px; } .pstn-hero--full .pstn-hero__controls { inset: 0; height: auto; display: block; } .pstn-hero--full .pstn-hero__controls > button { display: none; } .pstn-hero--full > .pstn-hero__controls .pstn-hero__dots { display: none; } .pstn-hero--full .pstn-hero__fraction { bottom: 206px; display: flex; } .pstn-section-title span { margin-bottom: 8px; font-size: 12px; } .pstn-section-title h2 { font-size: var(--pstn-type-section-title); font-weight: 650; } .pstn-products { padding: 0; } .pstn-products__viewport { width: auto; margin: 35px 15px 0; } .pstn-products__grid { gap: 15px; padding-left: 0 !important; } .pstn-product-card { width: 58vw; flex-basis: 58vw; } .pstn-product-card__image { border-radius: var(--pstn-radius-md); } .pstn-product-card__text { padding: 16px 2px 0; } .pstn-product-card__text h3 { min-height: 0; font-size: 18px; line-height: 1.45; } .pstn-more-link { margin-top: 45px; padding: 10px 45px 10px 0; font-size: 12px; } .pstn-more-link::before, .pstn-more-link::after { width: 12px; } .pstn-step-carousel__controls { width: auto; margin: 16px 15px 0; } .pstn-event { margin-top: var(--pstn-space-section); display: block; overflow: hidden; } .pstn-event__viewport { width: 100%; overflow: hidden; touch-action: pan-y; } .pstn-event__track { width: 100%; display: flex; grid-template-columns: none; will-change: transform; transition: transform .55s cubic-bezier(.22,.75,.25,1); } .pstn-event__track.is-jumping { transition: none !important; } .pstn-event a, .pstn-event a[data-event-clone] { display: block; width: 100%; flex: 0 0 100%; } .pstn-event span { left: 22px; top: 50%; bottom: auto; font-size: 12px; } .pstn-event span small { margin-bottom: 6px; font-size: 12px; } .pstn-event span strong { margin-bottom: 10px; font-size: 16px; } .pstn-event__dots { position: absolute; z-index: 3; right: 8px; bottom: 2px; display: flex; gap: 0; } .pstn-event__dots button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 0; background: transparent; box-shadow: none; } .pstn-event__dots button::before { content: ""; width: 6px; height: 6px; border-radius: var(--pstn-radius-round); background: rgba(255,255,255,.82); box-shadow: 0 0 0 1px rgba(20,55,73,.16); transition: width .2s, background .2s; } .pstn-event__dots button.is-active::before { width: 20px; background: var(--pstn-color-accent); } .pstn-monthly-products { margin-top: var(--pstn-space-section); } .pstn-monthly-products__layout { width: auto; margin: 34px 15px 0; display: block; } .pstn-monthly-products__video { height: auto; aspect-ratio: 1.35; } .pstn-monthly-products__layout > ul { height: auto; margin-top: 24px !important; overflow: visible; } .pstn-monthly-products__layout li a > span { width: 118px; height: 118px; min-height: 0; flex-basis: 118px; } .pstn-monthly-products__layout li div { min-height: 138px; padding: 12px 0 12px 14px; gap: 0 8px; } .pstn-monthly-products__layout li small { font-size: 12px; } .pstn-monthly-products__layout h3 { margin-top: 7px !important; font-size: 15px; } .pstn-monthly-products__layout p { display: none; } .pstn-monthly-products__layout .pstn-monthly-products__price { margin: 9px 0 0 !important; display: block; font-size: 13px; } .pstn-monthly-products__layout del, .pstn-monthly-products__layout li strong { margin-top: 18px; font-size: 12px; } .pstn-monthly-product-visual > div { left: 20px; right: 16px; bottom: 18px; } .pstn-monthly-product-visual strong { font-size: 17px; } .pstn-brand-story { width: auto; margin: var(--pstn-space-section) 15px 0; padding: 42px 0 0; display: block; border-radius: 0; } .pstn-brand-story__intro > span { margin-bottom: 12px; font-size: 12px; } .pstn-brand-story__intro h2 { font-size: 31px; } .pstn-brand-story__lead { margin-top: 20px; font-size: 17px; } .pstn-brand-story__intro p { margin-top: 24px; font-size: 14px; line-height: 1.7; } .pstn-brand-story__values { margin-top: 35px; } .pstn-brand-story__values article { min-height: 0; padding: 20px 0; grid-template-columns: 36px minmax(0, 1fr); gap: 5px 12px; } .pstn-brand-story__values em { grid-row: 1 / 3; } .pstn-brand-story__values strong, .pstn-brand-story__values p { grid-column: 2; } .pstn-brand-film { min-height: 0; margin-top: var(--pstn-space-section); } .pstn-brand-film video { height: 66vw; min-height: 0; } .pstn-brand-film a { bottom: 20px; min-width: 160px; padding: 11px 52px 11px 0; font-size: 12px; } .pstn-youtube-wrap { width: 100%; } .pstn-global { margin-top: var(--pstn-space-section); } .pstn-global__viewport { width: auto; margin: 35px 15px 0; } .pstn-global ul { gap: 10px; } .pstn-global li { width: 63vw; flex-basis: 63vw; border-radius: var(--pstn-radius-md); } .pstn-home-partners { width: auto; margin: var(--pstn-space-section) 15px 0; } .pstn-home-partners .pstn-product-intro__partners-heading h2 { font-size: 24px; } .pstn-instagram { margin: var(--pstn-space-section) 0 var(--pstn-space-section); } .pstn-instagram ul { width: calc(100% - 16px); margin: 30px auto 0 !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .pstn-instagram .is-brand-tile span { width: 62%; padding: 6px 8px; } .pstn-footer__inner { padding: 52px 20px 64px; display: block; } /* 주소는 13px로는 한 줄에 355px가 필요한데 가용폭이 335px뿐이라 두 줄로 접힌다. 라벨을 윗줄로 올려 폭을 전부 내주고 글자를 한 단계 줄여 한 줄에 맞춘다. (320px급 초소형 화면에서는 자연스럽게 두 줄로 접히도록 nowrap은 쓰지 않는다.) */ /* 주소는 좁은 화면에서 두 줄로 둔다. 대신 접히는 위치를 도로명 뒤 쉼표로 고정해 (footer.php의 pstn_footer_address_html) 의도한 줄바꿈처럼 보이게 한다. 글자 크기·자간은 다른 행과 동일하게 유지한다. */ .pstn-footer__info .is-address dd { text-align: right; } /* 하단바: 아이콘과 저작권을 좌우로 벌리면 저작권이 고정된 '맨 위로' 버튼에 가린다. 세로로 쌓아 둘 다 왼쪽 기준선에 맞춘다. */ .pstn-footer .pstn-footer__bottom-end { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; } .pstn-footer__company > img { width: 118px; margin-bottom: 25px; } .pstn-footer__cs { margin-top: 42px; } .pstn-footer__links { margin-top: 32px; gap: 4px 16px; } .pstn-footer__menu { gap: 4px 16px; } .pstn-to-top { right: 15px; bottom: calc(74px + env(safe-area-inset-bottom)); width: 44px; height: 44px; } body.woocommerce-shop .pstn-to-top, body.post-type-archive-product .pstn-to-top, body.tax-product_cat .pstn-to-top { display: none; } } @media (max-width: 1024px) { .pstn-hero--full .pstn-hero__controls > button { display: grid; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; white-space: nowrap; } .pstn-hero--full .pstn-hero__controls > button:focus-visible { width: 44px; height: 44px; overflow: visible; clip: auto; clip-path: none; opacity: 1; border-radius: 50%; background: rgba(18,24,30,.72); color: #fff; } } @media (prefers-reduced-motion: reduce) { .pstn-hero__track, .pstn-hero__slide, .pstn-products__grid, .pstn-global ul, .pstn-event__track, .pstn-search__rolling span, .pstn-motion-ready .pstn-products .pstn-products__viewport { transition: none !important; } .pstn-motion-ready .pstn-products .pstn-products__viewport { opacity: 1; transform: none; } .pstn-hero.is-copy-ready .pstn-hero__slide.is-active .pstn-hero__copy > *, .pstn-hero.is-copy-ready .pstn-hero__slide.is-active .pstn-hero__mobile-more { transition: none !important; } } /* Standalone WordPress fallbacks: pages, archives, search and 404. */ .pstn-content-shell { min-height: 72vh; padding: 206px 32px 120px; background: #fff; } body.pstn-promotion-hidden .pstn-content-shell { padding-top: 176px; } .pstn-content-container { width: 100%; max-width: 1200px; margin: 0 auto; } .pstn-content-container.is-reading-width { max-width: 920px; } .pstn-content-header { max-width: 820px; margin-bottom: 54px; } .pstn-content-eyebrow { margin: 0 0 12px; color: var(--pstn-blue); font-size: 12px; font-weight: 700; letter-spacing: .14em; } .pstn-content-header h1 { margin: 0; color: #111; font-size: clamp(34px, 4.2vw, 58px); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; } .pstn-content-description { margin-top: 18px; color: #66736f; font-size: 17px; line-height: 1.7; } .pstn-content-description p { margin: 0; } .pstn-content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 54px 24px; } .pstn-content-card { min-width: 0; } .pstn-content-card__image { display: grid; aspect-ratio: 4 / 3; overflow: hidden; place-items: center; border-radius: 16px; background: #eef5f2; } .pstn-content-card__image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s cubic-bezier(.22,.75,.25,1); } .pstn-content-card:hover .pstn-content-card__image img { transform: scale(1.035); } .pstn-content-card__placeholder { color: #85a99a; font-family: var(--pstn-font); font-size: 34px; letter-spacing: .08em; } .pstn-content-card__body { padding: 19px 2px 0; } .pstn-content-card__body time { color: #8a9490; font-size: 12px; } .pstn-content-card__body h2 { margin: 9px 0 10px; color: #111; font-size: 21px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; } .pstn-content-card__body h2 a { display: inline; } .pstn-content-card__body p { margin: 0; color: #66736f; font-size: 14px; line-height: 1.65; } .pstn-page-cover { margin: 0 0 44px; overflow: hidden; border-radius: 18px; } .pstn-page-cover img { width: 100%; height: auto; display: block; } .pstn-entry-content { color: #29322f; font-size: 17px; line-height: 1.8; } .pstn-entry-content::after { display: table; clear: both; content: ""; } .pstn-entry-content > :first-child { margin-top: 0; } .pstn-entry-content > :last-child { margin-bottom: 0; } .pstn-entry-content h2, .pstn-entry-content h3, .pstn-entry-content h4 { margin: 2.2em 0 .75em; color: #111; line-height: 1.35; } .pstn-entry-content h2 { font-size: 30px; } .pstn-entry-content h3 { font-size: 24px; } .pstn-entry-content p, .pstn-entry-content ul, .pstn-entry-content ol, .pstn-entry-content blockquote { margin: 0 0 1.4em; } .pstn-entry-content ul, .pstn-entry-content ol { padding-left: 1.4em; } .pstn-entry-content a { color: var(--pstn-deep-blue); text-decoration: underline; text-underline-offset: 3px; } .pstn-entry-content img { height: auto; } .pstn-entry-content table { width: 100%; border-collapse: collapse; } .pstn-entry-content th, .pstn-entry-content td { padding: 12px; border: 1px solid var(--pstn-hairline); text-align: left; } .pstn-entry-content input:not([type="checkbox"]):not([type="radio"]), .pstn-entry-content textarea, .pstn-entry-content select { max-width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #ccd6d1; border-radius: 6px; background: #fff; } .pstn-entry-content button, .pstn-entry-content input[type="submit"] { min-height: 44px; padding: 10px 20px; border-radius: 999px; background: var(--pstn-blue); color: #fff; font-weight: 700; } .pstn-content-empty { padding: 72px 28px; border-radius: 20px; background: #f5f8f6; text-align: center; } .pstn-content-empty h1, .pstn-content-empty h2 { margin: 0; color: #111; font-size: clamp(28px, 4vw, 42px); font-weight: 500; letter-spacing: -.03em; } .pstn-content-empty p { margin: 16px 0 0; color: #66736f; font-size: 15px; line-height: 1.7; } .pstn-content-actions { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .pstn-content-button { display: inline-flex; min-height: 46px; margin-top: 28px; padding: 0 24px; align-items: center; justify-content: center; border: 1px solid var(--pstn-blue); border-radius: 999px; background: var(--pstn-blue); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none !important; transition: transform .2s ease, background .2s ease, color .2s ease; } .pstn-content-actions .pstn-content-button { margin-top: 0; } .pstn-content-button:hover { transform: translateY(-2px); } .pstn-content-button.is-secondary { background: #fff; color: var(--pstn-deep-blue) !important; } .pstn-not-found__code { margin: 0 0 10px !important; color: var(--pstn-blue) !important; font-family: var(--pstn-font); font-size: clamp(54px, 10vw, 92px) !important; line-height: 1 !important; } .navigation.pagination { margin-top: 64px; } .navigation.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; } .navigation.pagination .page-numbers { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pstn-hairline); border-radius: 999px; color: #40504a; font-size: 13px; } .navigation.pagination .page-numbers.current { border-color: var(--pstn-blue); background: var(--pstn-blue); color: #fff; } .pstn-page-links { margin-top: 32px; display: flex; gap: 8px; } .pstn-page-links .post-page-numbers { min-width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--pstn-hairline); border-radius: 50%; text-decoration: none; } .pstn-page-links .current { border-color: var(--pstn-blue); background: var(--pstn-blue); color: #fff; } .pstn-theme :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--pstn-blue); outline-offset: 3px; } @media (max-width: 1180px) { .pstn-content-shell { padding-top: 174px; } body.pstn-promotion-hidden .pstn-content-shell { padding-top: 144px; } .pstn-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .pstn-content-shell { padding: 130px 15px 86px; } body.pstn-promotion-hidden .pstn-content-shell { padding-top: 100px; } .pstn-content-header { margin-bottom: 34px; } .pstn-content-header h1 { font-size: 34px; } .pstn-content-grid { grid-template-columns: 1fr; gap: 42px; } .pstn-content-card__image { border-radius: 12px; } .pstn-page-cover { margin-bottom: 30px; border-radius: 12px; } .pstn-entry-content { font-size: 16px; line-height: 1.75; } .pstn-entry-content h2 { font-size: 25px; } .pstn-entry-content h3 { font-size: 21px; } .pstn-content-empty { padding: 54px 20px; } .navigation.pagination { margin-top: 48px; } } @media (max-width: 359px) { .pstn-hero--card .pstn-hero__headline { font-size: 20px; line-height: 1.32; } } /* ── /products 히어로 — /about 히어로와 같은 처리(사진 배경 + 흰 베일 + 다크 텍스트) ── */ .pstn-catalog-hero { position: relative; overflow: hidden; background: #f4f7f9; } .pstn-catalog-hero__media { position: absolute; z-index: 0; inset: 0; } .pstn-catalog-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; } .pstn-catalog-hero__media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(100deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .74) 40%, rgba(255, 255, 255, .28) 72%, rgba(255, 255, 255, .12) 100%), linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, transparent 32%, rgba(255, 255, 255, .34) 100%); } .pstn-catalog-hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--pstn-container-box); min-height: 700px; /* shared hero ladder: 700 / 590 (<=1180) / 560 (<=1023) - see about/brand heroes */ margin: 0 auto; padding: clamp(96px, 9vw, 150px) 32px clamp(56px, 5vw, 84px); display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) and (max-width: 1180px) { .pstn-catalog-hero__inner { min-height: 590px; } } @media (min-width: 768px) and (max-width: 1023px) { .pstn-catalog-hero__inner { min-height: 560px; } } .pstn-catalog-hero__kicker { margin: 0; color: var(--pstn-deep-blue); font-size: 12px; font-weight: 800; letter-spacing: .18em; } .pstn-catalog-hero h1 { max-width: 760px; margin: 20px 0 0 !important; color: #0b1722; font-family: var(--pstn-font); font-size: var(--pstn-type-page-hero, clamp(44px, 4.5vw, 58px)) !important; font-weight: 700 !important; line-height: 1.32 !important; letter-spacing: -.045em; word-break: keep-all; text-shadow: 0 1px 3px rgba(255, 255, 255, .9), 0 0 24px rgba(255, 255, 255, .8); } /* 히어로 서브 카피 — 메인(h1)보다 좁고 작게 두어 한 덩어리로 읽히지 않게 한다. 사진 위에 얹히므로 h1과 같은 흰색 글로우를 준다. */ .pstn-catalog-hero__lead { max-width: 620px; margin: clamp(22px, 2.1vw, 30px) 0 0 !important; color: #33424c; font-size: var(--pstn-type-lead-hero, clamp(18px, 1.55vw, 23px)) !important; font-weight: 500 !important; line-height: 1.62 !important; letter-spacing: -.03em; word-break: keep-all; text-shadow: 0 1px 3px rgba(255, 255, 255, .95), 0 0 20px rgba(255, 255, 255, .85); } .pstn-catalog-heading.is-under-hero { padding-top: clamp(30px, 3vw, 48px); } @media (max-width: 767px) { .pstn-catalog-hero__inner { min-height: 420px; padding: 74px 15px 40px; } .pstn-catalog-hero h1 { font-size: clamp(23px, 6.4vw, 30px) !important; line-height: 1.38 !important; } .pstn-catalog-hero__lead { margin-top: 14px !important; font-size: 15px !important; line-height: 1.6 !important; } .pstn-catalog-hero__media img { object-position: 50% 40%; } .pstn-catalog-hero__media::after { background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .68) 44%, rgba(255, 255, 255, .3) 78%, rgba(255, 255, 255, .5) 100%); } } /* ── 손글씨 강조 ────────────────────────────────────────────── 손글씨는 '강조구'에만 건다. 문장의 나머지는 원래 서체를 그대로 둔다. 동그라미는 글자 폭에 맞춰 늘어나야 하므로 preserveAspectRatio="none"으로 눌러 쓰고, 선 굵기는 non-scaling-stroke로 고정해 찌그러지지 않게 한다. */ .pstn-hand__mark { position: relative; display: inline-block; margin: 0 .3em; font-family: "Cafe24Shiningstar", var(--pstn-font); /* 주변 본문보다 크게. 이 글꼴은 같은 px에서 고딕보다 작게 보여 보정이 필요하지만, 너무 키우면 문장이 한 줄에 안 들어가 낱글자가 떨어져 나간다. */ font-size: 1.45em; font-weight: 400; line-height: 1; letter-spacing: -.03em; /* 커진 글자의 베이스라인을 주변 문장에 맞춘다. */ vertical-align: -.12em; white-space: nowrap; } /* 줄 첫머리에 오는 경우(문장 시작이거나
직후) 왼쪽 여백을 없애 윗줄 글자와 시작선을 맞춘다. */ .pstn-hand__mark:first-child, br + .pstn-hand__mark { margin-left: 0; } .pstn-hand__circle { position: absolute; /* %는 줄높이에 좌우되므로 글자 크기(em) 기준으로 잡는다. */ top: .43em; left: 50%; width: calc(100% + .5em); height: 1.28em; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; } .pstn-hand__circle path { fill: none; stroke: var(--pstn-color-accent, #1469c8); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .72; /* pathLength=100으로 정규화해 길이와 무관하게 같은 속도로 그려진다. */ stroke-dasharray: 100; stroke-dashoffset: 0; } /* 리빌 모션이 켜진 경우에만 '그려지는' 연출. 꺼져 있으면 처음부터 그려진 상태. */ body.pstn-brand-motion-enabled [data-pstn-brand-reveal] .pstn-hand__circle path, body.pstn-about-motion-enabled [data-pstn-about-reveal] .pstn-hand__circle path { stroke-dashoffset: 100; } body.pstn-brand-motion-enabled [data-pstn-brand-reveal].is-visible .pstn-hand__circle path, body.pstn-about-motion-enabled [data-pstn-about-reveal].is-visible .pstn-hand__circle path { animation: pstn-hand-draw .9s .45s cubic-bezier(.65, 0, .35, 1) forwards; } @keyframes pstn-hand-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .pstn-hand__circle path { stroke-dashoffset: 0 !important; animation: none !important; } } /* ── 푸터 재구성 — 브랜드 / 회사정보 / 고객센터 3단 ── 두 정보 칼럼의 행이 가로로 정확히 맞도록 dt 폭과 행 간격을 동일하게 쓰고, 길어서 줄이 늘어나는 주소만 맨 아래로 내린다. */ .pstn-footer__inner { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.28fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 72px); align-items: start; } @media (min-width: 1024px) { .pstn-footer__inner { width: min(calc(var(--pstn-container-box) - 64px), calc(100% - 64px)); } } .pstn-footer__brand { display: flex; flex-direction: column; align-items: center; text-align: center; } @media (min-width: 1024px) { .pstn-footer__brand { padding-right: max(0px, calc(100% - 182px)); transform: translateX(-4.64px); } } .pstn-footer__brand img { width: auto; max-width: 150px; height: auto; } .pstn-footer__brand .pstn-footer__slogan { margin: 16px 0 0; color: var(--pstn-deep-blue); font-size: 16px; font-weight: 750; letter-spacing: -.02em; } /* 테마의 링크 색 규칙이 흰 글자를 덮어써 대비 3.05까지 떨어지던 문제 → !important 로 고정. */ .pstn-footer .pstn-footer__cta, .pstn-footer .pstn-footer__cta:visited, .pstn-footer .pstn-footer__cta:hover, .pstn-footer .pstn-footer__cta:focus { color: #fff !important; } .pstn-footer__cta { margin-top: 20px; padding: 11px 22px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--pstn-blue); font-size: 13px; font-weight: 600; letter-spacing: -.02em; box-shadow: 0 0 0 rgba(20, 105, 200, 0); transition: box-shadow .22s ease; } /* 호버 시 색·위치 변화 없이 그림자만. */ .pstn-footer__cta:hover { box-shadow: 0 8px 20px rgba(20, 105, 200, .38); } .pstn-footer__info h2 { margin: 0 0 clamp(14px, 1.5vw, 20px); font-size: clamp(15px, 1.3vw, 18px); font-weight: 700; letter-spacing: -.03em; /* 두 칼럼 제목 높이를 같게 맞춰 아래 dl 시작선을 정렬한다. */ line-height: 1.4; } .pstn-footer__info dl { margin: 0; display: grid; row-gap: 9px; } .pstn-footer__info dl > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 12px; align-items: start; /* 한 줄짜리 항목의 높이를 고정해 좌우 칼럼 행이 정확히 맞물리게 한다. */ min-height: 22px; } .pstn-footer__info dt { margin: 0; color: var(--pstn-gray, #6c7a83); font-size: 13px; font-weight: 600; letter-spacing: -.02em; line-height: 22px; } .pstn-footer__info dd { margin: 0; font-size: 13px; line-height: 22px; letter-spacing: -.02em; word-break: keep-all; } /* 두 정보 칼럼 모두 라벨은 왼쪽, 값은 각 칼럼의 오른쪽 끝선에 붙여 좌우로 벌린다. dd 상자가 이미 끝선까지 닿아 있으므로 정렬만 바꾸면 된다. */ .pstn-footer__info dd { text-align: right; } /* 주소는 마지막 행에서 전체 폭을 쓰고 위 항목들과 살짝 간격을 둔다. */ .pstn-footer__info dl > div.is-address { margin-top: 4px; min-height: 0; } /* 주소 줄바꿈은 좁은 화면에서만. 넓은 화면에서는 한 줄로 들어간다. */ .pstn-footer__addr-break { display: none; } @media (max-width: 767px) { .pstn-footer__addr-break { display: inline; } } .pstn-footer__bottom { margin-top: clamp(30px, 3.4vw, 54px); padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid rgba(20, 40, 60, .1); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .pstn-footer__bottom .pstn-footer__copyright { margin: 0; font-size: 12px; opacity: .7; } @media (max-width: 1023px) { .pstn-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pstn-footer__brand { grid-column: 1 / -1; } } @media (max-width: 767px) { .pstn-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; } .pstn-footer__brand { grid-column: auto; } .pstn-footer__info dl > div { grid-template-columns: 100px minmax(0, 1fr); column-gap: 10px; } .pstn-footer__info dt, .pstn-footer__info dd { font-size: 13px; } .pstn-footer__bottom { flex-direction: column; align-items: flex-start; } } /* ── 푸터 재구성 마감 — 기존 세로형 레이아웃용 규칙과 충돌하던 부분 정리 ── */ .pstn-footer .pstn-footer__brand img { display: block; margin-bottom: 0; } /* 푸터 메뉴는 가로 한 줄로. */ .pstn-footer .pstn-footer__bottom .pstn-footer__links { flex: 1 1 auto; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 22px; } .pstn-footer .pstn-footer__bottom .pstn-footer__menu { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0; padding: 0; list-style: none; } .pstn-footer .pstn-footer__bottom .pstn-footer__menu li { margin: 0; } .pstn-footer .pstn-footer__bottom .pstn-footer__social { margin: 0; } @media (max-width: 767px) { .pstn-footer .pstn-footer__bottom .pstn-footer__menu { gap: 8px 14px; } .pstn-footer .pstn-footer__bottom .pstn-footer__menu a { font-size: 13px; } } /* 푸터 하단 바 — 구분선은 전폭, 내용은 __inner 와 같은 컨테이너 폭(.pstn-footer__bottom-inner)으로 정렬. */ .pstn-footer .pstn-footer__bottom { display: block; padding: 0; } .pstn-footer .pstn-footer__bottom .pstn-footer__menu a { position: relative; color: #4c5a63; font-size: 13px; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; transition: color .2s ease; } .pstn-footer .pstn-footer__bottom .pstn-footer__menu a:hover { color: var(--pstn-blue); } /* 링크 사이 얇은 구분선 */ .pstn-footer .pstn-footer__bottom .pstn-footer__menu li + li { position: relative; } .pstn-footer .pstn-footer__bottom .pstn-footer__menu li + li::before { position: absolute; top: 50%; left: -11px; width: 1px; height: 11px; content: ""; transform: translateY(-50%); background: rgba(20, 40, 60, .16); } .pstn-footer__bottom-end { display: flex; align-items: center; gap: 18px; margin-left: auto; } .pstn-footer .pstn-footer__bottom-end .pstn-footer__social a { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; opacity: .55; transition: opacity .2s ease; } .pstn-footer .pstn-footer__bottom-end .pstn-footer__social a:hover { opacity: 1; } .pstn-footer .pstn-footer__bottom-end .pstn-footer__social img { width: 18px; height: 18px; } .pstn-footer .pstn-footer__bottom-end .pstn-footer__copyright { margin: 0; color: #8a959c; font-size: 12px; letter-spacing: -.01em; white-space: nowrap; } @media (max-width: 767px) { .pstn-footer .pstn-footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; } .pstn-footer__bottom-end { margin-left: 0; width: 100%; justify-content: space-between; } .pstn-footer .pstn-footer__bottom-end .pstn-footer__copyright { white-space: normal; font-size: 12px; } } .pstn-footer__bottom-inner { width: min(var(--pstn-container-box), 100%); margin: 0 auto; padding: clamp(18px, 2vw, 26px) var(--pstn-shell-gutter) clamp(26px, 3vw, 44px); display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; } @media (min-width: 1024px) { .pstn-footer__bottom-inner { width: min(calc(var(--pstn-container-box) - 64px), calc(100% - 64px)); } } @media (max-width: 767px) { .pstn-footer__bottom-inner { padding: 20px 20px 32px; flex-direction: column; align-items: flex-start; gap: 16px; } } /* ── GNB 정합성 마감 ── */ /* 보고 있는 페이지에 깔리던 배경색 제거 — 색과 굵기로만 현재 위치를 표시한다. */ .pstn-nav__dropdown > .pstn-nav__submenu a[aria-current="page"], .pstn-nav__item.current-menu-item > a, .pstn-nav__item.current-menu-ancestor > a, .pstn-nav__submenu .current-menu-item > a, .pstn-mobile-menu__item.current-menu-item > a, .pstn-mobile-menu__submenu a[aria-current="page"] { background: transparent; } .pstn-nav__dropdown > .pstn-nav__submenu a[aria-current="page"], .pstn-nav__submenu .current-menu-item > a { color: var(--pstn-deep-blue); font-weight: 650; } /* 호버는 배경 없이 색만 바뀌도록 통일. */ .pstn-nav__dropdown > .pstn-nav__submenu a:hover, .pstn-nav__dropdown > .pstn-nav__submenu a:focus-visible { background: transparent; color: var(--pstn-deep-blue); } /* 폰트 통일 — 1차 메뉴 15/600, 하위 메뉴 13.5/550, 메가패널 빠른메뉴도 같은 계열로. */ .pstn-nav__item > a { font-family: var(--pstn-font); font-size: 15px; font-weight: 600; letter-spacing: -.02em; } .pstn-nav__submenu a { font-family: var(--pstn-font); font-size: 13px; font-weight: 550; letter-spacing: -.02em; } .pstn-product-mega__quick a strong { font-family: var(--pstn-font); font-size: 14px; font-weight: 650; letter-spacing: -.025em; } .pstn-product-mega__quick a span { font-family: var(--pstn-font); font-size: 12px; font-weight: 500; letter-spacing: -.02em; } .pstn-product-mega__groups a, .pstn-product-mega__section-title strong, .pstn-product-mega__section-title a { font-family: var(--pstn-font); letter-spacing: -.02em; } .pstn-product-mega__groups a { font-size: 13px; font-weight: 500; } .pstn-product-mega__section-title strong { font-size: 14px; font-weight: 700; }