/* ========================================================= 포스가이드 (POS Guide) — Shared Stylesheet Design concept: 카운터 위 영수증 — thermal-paper ledger ========================================================= */ /* Fonts are loaded via in each page's (with rel="preconnect") rather than @import, so the browser can fetch them in parallel with this stylesheet instead of serially. */ :root{ /* ---- color tokens (white paper / ink-stamp ledger) ---- */ --paper: #FFFFFF; --paper-raised: #FFFFFF; --paper-deep: #F5F6F1; --ink: #1C221F; --ink-soft: #4B554E; --ink-faint: #8A9186; --line: #E4E6DC; --line-strong: #D2D5C6; --stamp-teal: #0E6E5C; --stamp-teal-deep: #0A4F42; --stamp-teal-tint: #E4F1EC; --stamp-amber: #B4791E; --stamp-amber-tint: #FBF1DD; --stamp-red: #A23B2E; --stamp-red-tint: #FAE8E3; --focus-ring: #0E6E5C; --font-display: 'Noto Serif KR', serif; --font-body: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --container: 1080px; --radius: 10px; --radius-sm: 6px; --header-h: 72px; } @media (prefers-reduced-motion: no-preference){ :root{ --transition-fast: .16s ease; --transition-slow: .32s ease; } } @media (prefers-reduced-motion: reduce){ :root{ --transition-fast: 0s; --transition-slow: 0s; } *{ scroll-behavior: auto !important; } } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; background-image: radial-gradient(circle at 1px 1px, rgba(28,34,31,.045) 1px, transparent 0); background-size: 22px 22px; padding-top: var(--header-h); } @media (max-width: 880px){ body{ padding-top: 64px; } } body.has-custom-cursor{ cursor: none; } @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce){ body.has-custom-cursor{ cursor: auto; } } img{ max-width: 100%; display: block; } a{ color: inherit; } h1, h2, h3, h4{ font-family: var(--font-display); color: var(--ink); margin: 0 0 .5em; line-height: 1.28; letter-spacing: -.01em; } h1{ font-size: clamp(30px, 4.4vw, 46px); font-weight: 900; } h2{ font-size: clamp(22px, 2.8vw, 30px); font-weight: 700; } h3{ font-size: 19px; font-weight: 700; } p{ margin: 0 0 1em; color: var(--ink-soft); } strong{ color: var(--ink); } .eyebrow{ display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--stamp-teal-deep); } .eyebrow::before{ content: ''; width: 7px; height: 7px; background: var(--stamp-teal); display: inline-block; } .container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ---- skip link ---- */ .skip-link{ position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 12px 18px; z-index: 100; font-family: var(--font-mono); font-size: 13px; } .skip-link:focus{ left: 12px; top: 12px; } /* ---- focus visibility ---- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* ========================================================= HEADER / NAV ========================================================= */ .site-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--header-h); display: flex; align-items: center; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line-strong); } .site-header__inner{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 24px; max-width: var(--container); width: 100%; margin: 0 auto; } @media (max-width: 880px){ .site-header{ height: 64px; } } .brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; } .brand__mark{ width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--ink); transform: rotate(-8deg); flex-shrink: 0; } .brand__text{ display: flex; flex-direction: column; line-height: 1.1; } .brand__text strong{ font-family: var(--font-display); font-size: 18px; font-weight: 900; } .brand__text small{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-faint); } .desktop-nav{ display: flex; flex-wrap: wrap; gap: 2px; font-family: var(--font-mono); font-size: 13px; } .desktop-nav a{ text-decoration: none; padding: 9px 12px; color: var(--ink-soft); border-radius: var(--radius); transition: background var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .desktop-nav a:hover{ background: var(--stamp-teal-tint); color: var(--stamp-teal-deep); } .desktop-nav a.is-active{ background: var(--ink); color: var(--paper); } .nav-toggle{ display: none; background: none; border: 1px solid var(--ink); padding: 8px 10px; font-family: var(--font-mono); font-size: 12px; cursor: pointer; } @media (max-width: 880px){ .desktop-nav{ display: none; flex-direction: column; position: fixed; top: 64px; left: 0; right: 0; max-height: calc(100vh - 64px); overflow-y: auto; padding: 8px 20px 20px; background: var(--paper); border-bottom: 1px solid var(--line-strong); box-shadow: 0 18px 30px -20px rgba(28,34,31,.25); } .desktop-nav.is-open{ display: flex; } .desktop-nav a{ padding: 12px 8px; border-bottom: 1px dotted var(--line); } .nav-toggle{ display: inline-flex; } } /* ========================================================= HERO ========================================================= */ .hero{ padding: 64px 0 44px; border-bottom: 1px solid var(--line-strong); } .hero__meta{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); } .hero p.lede{ font-size: 18px; max-width: 62ch; margin-top: 14px; } .brand-hero{ display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .brand-hero__badge{ font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--ink); padding: 8px 12px; white-space: nowrap; } /* ========================================================= RECEIPT TICKET — signature component ========================================================= */ .ticket{ position: relative; background: var(--paper-raised); border: 1px solid var(--line-strong); padding: 28px 26px 30px; margin-bottom: 24px; clip-path: polygon( 0% 0%, 100% 0%, 100% 96%, 97% 100%, 94% 96%, 91% 100%, 88% 96%, 85% 100%, 82% 96%, 79% 100%, 76% 96%, 73% 100%, 70% 96%, 67% 100%, 64% 96%, 61% 100%, 58% 96%, 55% 100%, 52% 96%, 49% 100%, 46% 96%, 43% 100%, 40% 96%, 37% 100%, 34% 96%, 31% 100%, 28% 96%, 25% 100%, 22% 96%, 19% 100%, 16% 96%, 13% 100%, 10% 96%, 7% 100%, 4% 96%, 1% 100%, 0% 96% ); padding-bottom: 40px; } .ticket__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line-strong); padding-bottom: 14px; margin-bottom: 16px; } .ticket__num{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); } .ticket ul{ margin: 0; padding: 0; list-style: none; } .ticket li{ display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dotted var(--line); font-size: 15px; color: var(--ink-soft); } .ticket li:last-child{ border-bottom: 0; } .ticket li::before{ content: '□'; font-family: var(--font-mono); color: var(--stamp-teal); flex-shrink: 0; } .ticket li strong{ color: var(--ink); } /* stamp badge */ .stamp{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; border: 2px solid currentColor; border-radius: 50%; width: 84px; height: 84px; justify-content: center; text-align: center; transform: rotate(-10deg); padding: 6px; line-height: 1.25; flex-shrink: 0; } .stamp--teal{ color: var(--stamp-teal); } .stamp--amber{ color: var(--stamp-amber); } .stamp--red{ color: var(--stamp-red); } /* ========================================================= GRID / CARDS ========================================================= */ .section{ padding: 56px 0; } .section--divider{ border-top: 1px solid var(--line-strong); } .section__head{ max-width: 68ch; margin-bottom: 32px; } .grid{ display: grid; gap: 20px; } .grid--3{ grid-template-columns: repeat(3, 1fr); } .grid--2{ grid-template-columns: repeat(2, 1fr); } @media (max-width: 860px){ .grid--3{ grid-template-columns: 1fr 1fr; } } @media (max-width: 620px){ .grid--3, .grid--2{ grid-template-columns: 1fr; } } .card{ background: var(--paper-raised); border: 1px solid var(--line-strong); padding: 22px 20px; border-radius: var(--radius); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .card:hover{ transform: translateY(-3px); box-shadow: 0 16px 28px -20px rgba(28,34,31,.28); border-color: var(--line-strong); } .card__label{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; display: block; } /* brand index card (home page) */ .brand-card{ display: flex; flex-direction: column; background: var(--paper-raised); border: 1px solid var(--line-strong); padding: 24px 22px; border-radius: var(--radius); text-decoration: none; transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); height: 100%; } .brand-card:hover{ border-color: var(--stamp-teal); transform: translateY(-4px); box-shadow: 0 18px 30px -20px rgba(14,110,92,.32); } .brand-card__num{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); margin-bottom: 10px; } .brand-card h3{ margin-bottom: 8px; } .brand-card p{ font-size: 14px; margin-bottom: 14px; flex-grow: 1; } .brand-card__tag{ font-family: var(--font-mono); font-size: 11px; color: var(--stamp-teal-deep); background: var(--stamp-teal-tint); padding: 4px 8px; align-self: flex-start; } /* ========================================================= TABLE (comparison) ========================================================= */ .table-wrap{ overflow-x: auto; border: 1px solid var(--line-strong); background: var(--paper-raised); border-radius: var(--radius); } table{ border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14.5px; } th, td{ text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; } thead th{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-faint); background: var(--paper-deep); white-space: nowrap; } tbody tr:last-child td{ border-bottom: 0; } tbody th{ font-weight: 700; white-space: nowrap; } /* ========================================================= CALLOUT / NOTICE ========================================================= */ .callout{ border-left: 4px solid var(--stamp-amber); background: var(--stamp-amber-tint); padding: 18px 20px; margin: 24px 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .callout p{ color: var(--ink); margin: 0; } .callout strong{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; display: block; margin-bottom: 6px; color: var(--stamp-amber); text-transform: uppercase; } .callout--teal{ border-left-color: var(--stamp-teal); background: var(--stamp-teal-tint); } .callout--teal strong{ color: var(--stamp-teal-deep); } /* ========================================================= FIT / CAUTION lists (적합·주의) ========================================================= */ .fit-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 620px){ .fit-grid{ grid-template-columns: 1fr; } } .fit-box{ padding: 20px; border: 1px solid var(--line-strong); background: var(--paper-raised); border-radius: var(--radius); } .fit-box h4{ font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; margin-bottom: 12px; text-transform: uppercase; } .fit-box.is-good h4{ color: var(--stamp-teal-deep); } .fit-box.is-caution h4{ color: var(--stamp-red); } .fit-box ul{ margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 14.5px; } .fit-box li{ margin-bottom: 8px; } /* ========================================================= BUTTONS / LINKS ========================================================= */ .btn{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; padding: 12px 18px; border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; color: var(--ink); background: transparent; transition: background var(--transition-fast), color var(--transition-fast); } .btn:hover{ background: var(--ink); color: var(--paper); } .btn--solid{ background: var(--stamp-teal); border-color: var(--stamp-teal); color: #fff; } .btn--solid:hover{ background: var(--stamp-teal-deep); border-color: var(--stamp-teal-deep); } .link-arrow{ text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } /* ========================================================= FOOTER ========================================================= */ .site-footer{ border-top: 1px solid var(--line-strong); padding: 44px 0 60px; margin-top: 40px; } .site-footer__grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; margin-bottom: 32px; } @media (max-width: 700px){ .site-footer__grid{ grid-template-columns: 1fr; } } .site-footer h4{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; } .site-footer ul{ list-style: none; margin: 0; padding: 0; } .site-footer li{ margin-bottom: 8px; } .site-footer a{ text-decoration: none; color: var(--ink-soft); font-size: 14px; } .site-footer a:hover{ color: var(--stamp-teal-deep); text-decoration: underline; } .site-footer__legal{ border-top: 1px dashed var(--line-strong); padding-top: 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); line-height: 1.8; } /* ========================================================= MISC ========================================================= */ .kicker-num{ font-family: var(--font-mono); color: var(--stamp-teal); } .hr-dashed{ border: none; border-top: 1px dashed var(--line-strong); margin: 40px 0; } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================= TRUST LINKS — pill-style footer nav (bottom of every page) ========================================================= */ .trust-links{ display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px dashed var(--line-strong); padding-top: 20px; margin-top: 18px; } .trust-links a{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; text-decoration: none; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .trust-links a:hover{ color: var(--stamp-teal-deep); border-color: var(--stamp-teal); background: var(--stamp-teal-tint); } /* ========================================================= CURSOR TRACKER — ink-stamp follower Two layers: a small solid dot that tracks the pointer instantly, and a hollow "stamp" ring that eases behind it and rotates like the brand mark. On interactive elements the ring is magnetically pulled to the element's center and widens into a stamp label. ========================================================= */ .cursor-dot, .cursor-ring{ position: fixed; top: 0; left: 0; pointer-events: none; z-index: 200; transform: translate(-50%, -50%); will-change: transform; } .cursor-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--stamp-teal); } .cursor-ring{ width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--ink); opacity: .55; transition: width var(--transition-fast), height var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast); } .cursor-ring span{ opacity: 0; transform: scale(.6); transition: opacity var(--transition-fast), transform var(--transition-fast); } .cursor-ring.is-active{ width: 68px; height: 68px; border-color: var(--stamp-teal); background: var(--stamp-teal-tint); opacity: 1; } .cursor-ring.is-active span{ opacity: 1; transform: scale(1); } .cursor-ring.is-down{ width: 30px; height: 30px; } @media (hover: none), (pointer: coarse){ .cursor-dot, .cursor-ring{ display: none; } } @media (prefers-reduced-motion: reduce){ .cursor-dot, .cursor-ring{ display: none; } }