/* BluePin design system — Stripe식 "Stripi" 시스템을 해양 제품으로 적용. indigo primary · gradient mesh · deep navy · pill buttons · tabular figures. Korean: Pretendard (가독성 우선, 너무 얇지 않게). */ /* 폰트는 base.html 의 로 미리 로드해요(@import 제거 → FOUC 방지). */ :root { /* brand & accent */ --primary: #533afd; --primary-deep: #4434d4; --primary-press: #2e2b8c; --primary-soft: #665efd; --primary-subdued: #e9e8ff; --brand-dark-900: #1c1e54; --ruby: #ea2261; --magenta: #f96bee; --lemon: #d98a3d; --aqua: #0ea5b7; --aqua-soft: #5ed3df; /* surface */ --canvas: #ffffff; --canvas-soft: #f6f9fc; --canvas-cream: #f5e9d4; --hairline: #e3e8ee; --hairline-input: #a8c3de; /* text */ --ink: #0d253d; --ink-secondary: #273951; --ink-mute: #5b6b82; --on-primary: #ffffff; /* level colors */ --lvl-none: #16a34a; --lvl-watch: #ca8a04; --lvl-warn: #ea580c; --lvl-danger: #dc2626; /* spacing */ --xxs:2px; --xs:4px; --sm:8px; --md:12px; --lg:16px; --xl:24px; --xxl:32px; --huge:64px; /* radius */ --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:22px; --pill:9999px; /* shadow */ --sh-1: 0 1px 3px rgba(0,55,112,.08); --sh-2: 0 8px 24px rgba(0,55,112,.08), 0 2px 6px rgba(0,55,112,.04); --sh-3: 0 24px 60px rgba(13,37,61,.14); --font: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--canvas); font-size: 17px; line-height: 1.65; font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; word-break: keep-all; overflow-wrap: break-word; /* 한글은 어절(단어) 단위로 줄바꿈 */ } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-deep); } img { max-width: 100%; } h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } /* ── typography scale (한글 가독성 위해 약간 두껍게) ── */ .display-xxl { font-size: 54px; font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; } .display-xl { font-size: 42px; font-weight: 600; line-height: 1.14; letter-spacing: -0.03em; } .display-lg { font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; } .display-md { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; } .heading-lg { font-size: 22px; font-weight: 600; } .heading-md { font-size: 19px; font-weight: 600; } .body-lg { font-size: 19px; color: var(--ink-secondary); } .body { font-size: 17px; color: var(--ink-secondary); } .muted { color: var(--ink-mute); } .small { font-size: 15px; } .eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-deep); } .tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .mono-num { font-feature-settings:"tnum"; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* ── layout ── */ .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; } .section { padding: 80px 0; } .section-sm { padding: 48px 0; } .bg-soft { background: var(--canvas-soft); } .bg-cream { background: var(--canvas-cream); } .bg-navy { background: var(--brand-dark-900); color: var(--on-primary); } .center { text-align: center; } .row { display: flex; gap: var(--lg); } .row-wrap { display: flex; flex-wrap: wrap; gap: var(--lg); } .between { justify-content: space-between; align-items: center; } .items-center { align-items: center; } .grid { display: grid; gap: var(--xl); } .grid-2 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(3,1fr); } .grid-4 { grid-template-columns: repeat(4,1fr); } .stack > * + * { margin-top: var(--md); } .spacer-sm{height:8px} .spacer{height:24px} .spacer-lg{height:48px} /* ── gradient mesh backdrop ── */ .mesh { position: relative; overflow: hidden; background: radial-gradient(60% 120% at 8% 0%, #fff6e9 0%, rgba(255,246,233,0) 55%), radial-gradient(50% 120% at 32% -10%, #ffe2c2 0%, rgba(255,226,194,0) 50%), radial-gradient(55% 130% at 58% -5%, #e6e0ff 0%, rgba(230,224,255,0) 55%), radial-gradient(60% 140% at 82% -10%, #cfe9ff 0%, rgba(207,233,255,0) 55%), radial-gradient(50% 120% at 100% 0%, #ffd7ec 0%, rgba(255,215,236,0) 50%), linear-gradient(180deg, #f3f1ff 0%, #ffffff 62%); } .mesh-aqua { background: radial-gradient(50% 120% at 10% 0%, #d8fbff 0%, rgba(216,251,255,0) 55%), radial-gradient(55% 130% at 40% -10%, #c9e2ff 0%, rgba(201,226,255,0) 55%), radial-gradient(55% 130% at 72% -5%, #e3ddff 0%, rgba(227,221,255,0) 55%), radial-gradient(45% 120% at 100% 0%, #ffd9ee 0%, rgba(255,217,238,0) 50%), linear-gradient(180deg, #eef4ff 0%, #ffffff 66%); } /* ── buttons (pill) ── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family: var(--font); font-size: 16px; font-weight: 600; line-height:1; padding: 13px 22px; border-radius: var(--pill); border: 1px solid transparent; cursor: pointer; transition: all .15s ease; white-space: nowrap; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-deep); color:#fff; box-shadow: var(--sh-2); transform: translateY(-1px); } .btn-primary:active { background: var(--primary-press); transform: none; } .btn-secondary { background: #fff; color: var(--primary); border-color: rgba(83,58,253,.35); } .btn-secondary:hover { border-color: var(--primary); box-shadow: var(--sh-1); } .btn-dark { background: var(--brand-dark-900); color:#fff; } .btn-dark:hover { background:#0f1138; color:#fff; } .btn-ghost { background: transparent; color: var(--ink-secondary); } .btn-ghost:hover { background: rgba(13,37,61,.05); color: var(--ink); } .btn-sm { padding: 9px 16px; font-size: 14px; } .btn-lg { padding: 16px 28px; font-size: 17px; } .btn-block { width: 100%; } /* ── banners ── */ .banner { border-radius: var(--r-md); padding: 12px 14px; font-size: 15px; line-height: 1.5; border: 1px solid transparent; } .banner-info { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; } .banner-warn { background: #fff7ed; color: #9a3412; border-color: #fed7aa; } .banner-ok { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; } /* ── cards ── */ .card { background:#fff; border:1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--xxl); } .card-soft { box-shadow: var(--sh-1); } .card-float { box-shadow: var(--sh-2); border-color: transparent; } .card-pad-sm { padding: var(--xl); } /* ── tags / pills ── */ .tag { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding: 5px 11px; border-radius: var(--pill); background: var(--primary-subdued); color: var(--primary-deep); } .tag-soft { background: rgba(14,165,183,.12); color: #0b7a88; } .tag-cream { background: #f3e6cf; color: #8a5a1e; } /* ── form ── */ label.field { display:block; font-size:15px; font-weight:600; color: var(--ink-secondary); margin-bottom:6px; } .input, select.input, textarea.input { width: 100%; font-family: var(--font); font-size: 16px; color: var(--ink); padding: 12px 14px; border-radius: var(--r-sm); border:1px solid var(--hairline-input); background:#fff; transition: border-color .15s; } .input:focus { outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(83,58,253,.12); } /* ── tooltip (물음표 도움말) ── */ .tip { position: relative; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:5px; border-radius:50%; background: var(--primary-subdued); color: var(--primary-deep); font-size:11px; font-weight:700; cursor:help; vertical-align:middle; user-select:none; } .tip:hover, .tip:focus { background: var(--primary); color:#fff; } .tip::after { content: attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform: translateX(-50%); width: max-content; max-width: 260px; background: var(--brand-dark-900); color:#fff; font-size:13px; font-weight:400; line-height:1.5; letter-spacing:0; text-align:left; padding:10px 12px; border-radius: var(--r-md); box-shadow: var(--sh-2); opacity:0; visibility:hidden; transition: opacity .15s; z-index: 60; pointer-events:none; } .tip::before { content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform: translateX(-50%); border:6px solid transparent; border-top-color: var(--brand-dark-900); opacity:0; visibility:hidden; transition: opacity .15s; z-index:60; } .tip:hover::after, .tip:focus::after, .tip:hover::before, .tip:focus::before { opacity:1; visibility:visible; } /* ── risk levels ── */ .lvl { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; padding:4px 11px; border-radius: var(--pill); } .lvl-none { background:#dcfce7; color:#15803d; } .lvl-watch { background:#fef9c3; color:#a16207; } .lvl-warn { background:#ffedd5; color:#c2410c; } .lvl-danger { background:#fee2e2; color:#b91c1c; } .dot { width:9px; height:9px; border-radius:50%; display:inline-block; } .dot-none{background:var(--lvl-none)} .dot-watch{background:var(--lvl-watch)} .dot-warn{background:var(--lvl-warn)} .dot-danger{background:var(--lvl-danger)} /* ── nav ── */ .nav { position: sticky; top:0; z-index:50; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(12px); border-bottom:1px solid var(--hairline); } .nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; } .nav-links { display:flex; gap: 28px; align-items:center; } .nav-links a { position:relative; color: var(--ink-secondary); font-weight:500; font-size:16px; } .nav-links a:hover { color: var(--ink); } /* 현재 보고 있는 메뉴 표시 — 글자 강조 + 하단 인디케이터 바 */ .nav-links a.active { color: var(--primary-deep); font-weight:600; } .nav-links a.active::after { content:''; position:absolute; left:0; right:0; bottom:-22px; height:2.5px; background: var(--primary); border-radius:2px 2px 0 0; } /* 대시보드(내 대시보드 버튼)에 있을 때 '여기 있어요' 링 */ .nav-cta .btn.nav-here { box-shadow: 0 0 0 3px rgba(83,58,253,.22); } .brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:21px; color:var(--ink); letter-spacing:-0.02em; } .nav-cta { display:flex; align-items:center; gap:12px; } .mobile-toggle{ display:none; background:none;border:none;cursor:pointer; } /* ── footer ── */ .footer { background:#fff; border-top:1px solid var(--hairline); padding: 60px 0 44px; margin-top: 104px; } /* 본문 최하단과 푸터 사이 여백 */ .footer .muted { font-size: 15px; } .footer-cols { display:grid; grid-template-columns: 1.6fr repeat(3,1fr); gap: 32px; } .footer-cols a { display:block; color: var(--ink-mute); font-size:15px; padding:6px 0; } .footer-cols a:hover { color: var(--ink); } /* ── table ── */ table.tbl { width:100%; border-collapse: collapse; } .tbl th { text-align:left; font-size:14px; color: var(--ink-mute); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--hairline); } .tbl td { padding:12px; border-bottom:1px solid var(--hairline); font-size:16px; } .tbl tr:last-child td { border-bottom:none; } /* ── flash ── */ .flash { padding:12px 16px; border-radius: var(--r-md); margin-bottom:16px; font-size:15px; } .flash-ok { background:#dcfce7; color:#15803d; } .flash-err { background:#fee2e2; color:#b91c1c; } /* ── misc ── */ .divider { height:1px; background: var(--hairline); border:0; margin: 40px 0; } .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background:#f1f5f9; border:1px solid var(--hairline); border-radius:6px; padding:2px 7px; font-size:13px; color:var(--ink-secondary); } .pill-stat { display:inline-flex; gap:8px; align-items:center; background:#fff; border:1px solid var(--hairline); border-radius: var(--pill); padding:8px 16px; box-shadow: var(--sh-1); font-size:14px; font-weight:500; } /* ── responsive ── */ html, body { overflow-x: hidden; } /* 가로 스크롤 안전망 */ img, svg, canvas, video { max-width: 100%; } /* Leaflet 내부 타일/프록시가 컨테이너 밖으로 새어 페이지 가로폭을 넓히는 것 차단 */ .leaflet-container { overflow: hidden; max-width: 100%; } .footer-legal { margin-top: 4px; } /* 1·2줄(법인·사업자 정보)은 바짝 붙이고, 3줄(저작권)은 명확히 띄워요 — onpod 스타일 */ .footer-legal p { margin: 0; line-height: 1.55; font-size: 12.5px; color: var(--ink-mute); font-weight: 400; opacity: .92; } .footer-legal p:last-child { margin-top: 20px; } @media (max-width: 900px){ /* grid/flex 항목의 기본 min-width:auto 가 넓은 콘텐츠(큰 숫자·표)로 칸을 밀어 가로 넘침을 일으켜요. 0으로 풀어 칸이 화면 안에서 줄어들게 해요(모바일 깨짐의 주원인). */ .grid > *, .row > *, .row-wrap > * { min-width: 0; } .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} .footer-cols{grid-template-columns:1fr 1fr} .display-xxl{font-size:38px} .display-xl{font-size:30px} .display-lg{font-size:25px} .nav-links{display:none} .mobile-toggle{display:block} .section{padding:56px 0} .row{flex-direction:column} } @media (max-width: 560px){ /* 로그인·'무료로 시작해요'가 둘 다 /login → 모바일에선 시작 버튼 하나로 (로그인은 햄버거 메뉴에) */ .nav-login-link { display: none; } .container, .container-narrow { padding: 0 16px; } .section{ padding:44px 0 } .section-sm{ padding:34px 0 } .display-xxl{font-size:30px} .display-xl{font-size:26px} .display-lg{font-size:22px} .display-md{font-size:20px} .body-lg{ font-size:18px } .grid{ gap:14px } .grid-4{ grid-template-columns:1fr 1fr } .card{ padding:18px } .card-pad-sm{ padding:14px } .tbl th, .tbl td{ padding:9px 8px; font-size:14px } .btn-lg{ padding:14px 22px; font-size:16px } .footer-cols{grid-template-columns:1fr} }