/* ========================================================================== 다정한봄 케어 — 요양원·방문요양 통합 케어 템플릿 00-디자인보드.png 의 색·활자·UI 상태, 02-페이지시안.png 의 면 구성을 옮겼다. 읽는 사람이 60~70대 자녀이거나 어르신 본인이라는 전제로 조판한다. · 본문 18px 에서 시작(디자인보드 16px 지정을 오너 지시대로 올려 잡음) · 「큰 글자」는 루트 글꼴을 22px 로 올린다 — 모든 치수가 rem 이라 함께 커진다 · 「고대비」는 토큰을 갈아 끼운다 — 조판은 그대로 두고 색만 바꾼다 · 배치는 논리 속성(padding-inline / margin-block / border-inline-start)으로 적는다 ========================================================================== */ /* ------------------------------------------------------------ 디자인 토큰 */ :root { /* 브랜드 — 디자인보드 컬러 팔레트 5색 */ --teal: #0f766e; /* 브랜드 주색 */ --teal-deep: #0b5b55; /* 눌림 */ --teal-dark: #0a4b46; /* 어두운 면 */ --peach: #ffb38a; /* 강조 */ --peach-soft: #ffe3d0; --ivory: #fff7ed; /* 배경 */ --sand: #f5f1ea; /* 보조 면 */ --slate: #64748b; /* 중립 */ /* 면 */ --bg: var(--ivory); --bg-2: var(--sand); --surface: #ffffff; --surface-2: #fffdf9; --teal-wash: rgba(15, 118, 110, 0.07); --peach-wash: #fff1e6; /* 글자 — 아이보리 배경에서 13:1 이상(AAA) */ --ink: #1c2b2a; --ink-2: #46575a; --ink-3: #5d6b6e; /* 의미색 — 색만으로 상태를 전하지 않고 글자·아이콘을 함께 쓴다 */ --ok: #146c43; --warn: #9a4a06; --err: #b3261e; --ok-bg: #e7f4ec; --warn-bg: #fdf1e3; --err-bg: #fceceb; /* 선 */ --line: rgba(28, 43, 42, 0.16); --line-soft: rgba(28, 43, 42, 0.09); --line-strong: rgba(28, 43, 42, 0.28); /* 글꼴 */ --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; --head: "Noto Sans KR", "Pretendard Variable", Pretendard, system-ui, sans-serif; /* 조판 */ --wrap: 1180px; --gutter: 32px; --section: clamp(60px, 7.5vw, 104px); --r-sm: 10px; --r: 16px; --r-lg: 24px; --util-h: 52px; --shadow: 0 1px 2px rgba(28, 43, 42, 0.05), 0 10px 28px rgba(28, 43, 42, 0.07); --shadow-soft: 0 1px 2px rgba(28, 43, 42, 0.04), 0 4px 14px rgba(28, 43, 42, 0.05); --ease: cubic-bezier(0.22, 0.7, 0.28, 1); --focus: var(--teal); } /* 고대비 모드 — 헤더 토글이 를 세운다 */ html[data-contrast="high"] { /* 원색 토큰까지 함께 갈아야 한다 — .page-head·.hero 는 --sand/--ivory 를 바로 쓴다 */ --ivory: #ffffff; --sand: #f0f0f0; --slate: #333333; --bg: #ffffff; --bg-2: #f0f0f0; --surface: #ffffff; --surface-2: #ffffff; --teal: #05433f; --teal-deep: #032f2c; --teal-dark: #032f2c; --teal-wash: #e4eeed; --peach: #b24a12; --peach-soft: #ffe0cc; --peach-wash: #fff0e6; --ink: #000000; --ink-2: #1a1a1a; --ink-3: #262626; --line: #000000; --line-soft: #4d4d4d; --line-strong: #000000; --ok: #0a5231; --warn: #6d3400; --err: #8a1710; --ok-bg: #dcefe4; --warn-bg: #f7ead9; --err-bg: #f8e3e1; --shadow: none; --shadow-soft: none; --focus: #000000; } /* 루트 글꼴 = 본문 크기. 「큰 글자」가 이 한 줄만 바꾼다. */ html { font-size: 18px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html[data-textsize="large"] { font-size: 22px; } /* --------------------------------------------------------------- 기본 */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.8; letter-spacing: -0.003em; /* 한국어는 어절 단위로 끊는다 — 「2층」·「1등급」이 갈라지지 않게 */ word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* [hidden] 은 어떤 display 규칙보다 세야 한다 — 탭·단계·결과 감추기의 토대 */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; font-family: var(--head); font-weight: 700; line-height: 1.38; letter-spacing: -0.022em; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } table { border-collapse: collapse; width: 100%; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } .skip { position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 300; background: var(--teal); color: #fff; padding: 14px 22px; font-weight: 700; } .skip:focus { inset-inline-start: 0; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: 880px; } .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; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ico-sm { width: 19px; height: 19px; stroke-width: 1.8; } .ico-lg { width: 32px; height: 32px; stroke-width: 1.4; } /* 사진 액자 — 인라인 요소엔 aspect-ratio 가 먹지 않으므로 반드시 블록 */ .frame { display: block; overflow: hidden; background: var(--bg-2); border-radius: var(--r); } .frame img { width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------------- 활자 */ .display { font-family: var(--head); font-size: clamp(1.85rem, 4.2vw, 2.6rem); line-height: 1.28; letter-spacing: -0.032em; text-wrap: balance; } .sec-title { font-size: clamp(1.5rem, 2.9vw, 1.95rem); line-height: 1.4; letter-spacing: -0.028em; text-wrap: balance; } .lead { font-size: 1.16rem; line-height: 1.72; color: var(--ink-2); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.94rem; font-weight: 700; color: var(--teal); letter-spacing: 0.02em; } .eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--peach); } .note { font-size: 0.9rem; line-height: 1.7; color: var(--ink-3); } .strong-num { font-family: var(--head); font-weight: 700; letter-spacing: -0.02em; } .section { padding-block: var(--section); } .section-tint { background: var(--bg-2); } .section-white { background: var(--surface); } .sec-head { max-width: 720px; margin-block-end: 44px; } .sec-head.center { margin-inline: auto; text-align: center; } .sec-head .eyebrow { margin-block-end: 14px; } .sec-head .sec-title + p { margin-block-start: 14px; color: var(--ink-2); font-size: 1.05rem; } /* --------------------------------------------------------------- 버튼 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding-inline: 26px; padding-block: 12px; border-radius: 999px; border: 2px solid transparent; font-family: var(--head); font-size: 1.02rem; font-weight: 700; line-height: 1.3; cursor: pointer; text-align: center; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .btn-primary { background: var(--teal); color: #fff; } .btn-primary:hover { background: var(--teal-deep); } .btn-primary:active { background: var(--teal-dark); } .btn-secondary { background: var(--surface); color: var(--teal); border-color: var(--teal); } .btn-secondary:hover { background: var(--teal-wash); } .btn-peach { background: var(--peach); color: #43230f; } html[data-contrast="high"] .btn-peach { background: var(--peach); color: #fff; } .btn-peach:hover { filter: saturate(1.15) brightness(0.96); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--teal); color: var(--teal); } .btn-lg { min-height: 62px; padding-inline: 34px; font-size: 1.1rem; } .btn-block { width: 100%; } .btn[aria-disabled="true"], .btn:disabled { background: var(--bg-2); color: var(--ink-3); border-color: var(--line-soft); cursor: not-allowed; opacity: 0.75; } .btn-text { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 700; color: var(--teal); border-block-end: 2px solid transparent; } .btn-text:hover { border-block-end-color: var(--teal); } /* --------------------------------------------------------------- 머리 */ /* 위 줄(접근성·전화)은 스크롤에 밀려 올라가고 아래 줄만 고정된다 */ .site-header { position: sticky; inset-block-start: calc(var(--util-h) * -1); z-index: 70; background: var(--bg); border-block-end: 1px solid var(--line-soft); } .util-row { min-height: var(--util-h); background: var(--teal); color: #fff; } .util-row .wrap { min-height: var(--util-h); display: flex; align-items: center; justify-content: space-between; gap: 14px; } .util-left { display: flex; align-items: center; gap: 8px; } .util-tag { font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); } .util-right { display: flex; align-items: center; gap: 6px; } /* 접근성 토글 — 켜짐/꺼짐을 색이 아니라 손잡이 위치·체크·글자로 알린다 */ .ax-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding-inline: 12px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; color: #fff; font-size: 0.9rem; font-weight: 700; white-space: nowrap; cursor: pointer; } .ax-btn:hover { background: rgba(255, 255, 255, 0.14); } .ax-switch { position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.18); } .ax-switch::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.25s var(--ease); } .ax-btn[aria-pressed="true"] { background: #fff; color: var(--teal); border-color: #fff; } .ax-btn[aria-pressed="true"] .ax-switch { background: var(--teal); border-color: var(--teal); } .ax-btn[aria-pressed="true"] .ax-switch::after { transform: translateX(16px); } .ax-state { font-weight: 700; } .ax-btn[aria-pressed="true"] .ax-state::before { content: "✓ "; } .util-phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 10px; color: #fff; font-weight: 700; font-size: 0.95rem; } .util-phone:hover { text-decoration: underline; } .nav-row .wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: inline-flex; align-items: center; gap: 11px; min-height: 48px; } .brand .ico { width: 34px; height: 34px; color: var(--teal); stroke-width: 1.5; } .brand b { font-family: var(--head); font-size: 1.24rem; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); line-height: 1.2; } .brand small { display: block; font-size: 0.78rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0.01em; } .navlinks { display: flex; align-items: center; gap: 6px; } .navlinks a { display: inline-flex; align-items: center; min-height: 48px; padding-inline: 15px; border-radius: 999px; font-weight: 700; font-size: 1.02rem; color: var(--ink-2); transition: background-color 0.2s var(--ease), color 0.2s var(--ease); } .navlinks a:hover { background: var(--teal-wash); color: var(--teal); } .navlinks a[aria-current="page"] { background: var(--teal); color: #fff; } .nav-actions { display: flex; align-items: center; gap: 12px; } .menu-btn { display: none; width: 52px; height: 52px; align-items: center; justify-content: center; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; cursor: pointer; } .menu-btn:hover { border-color: var(--teal); color: var(--teal); } /* 모바일 서랍 */ .drawer { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(360px, 88vw); z-index: 95; background: var(--surface); border-inline-start: 1px solid var(--line); padding: 20px 22px 40px; transform: translateX(102%); transition: transform 0.4s var(--ease); overflow-y: auto; display: flex; flex-direction: column; } .drawer.open { transform: none; } .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 14px; } .drawer-close { width: 52px; height: 52px; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; cursor: pointer; } .drawer nav { display: flex; flex-direction: column; } .drawer nav a { display: flex; align-items: center; gap: 12px; min-height: 60px; font-family: var(--head); font-size: 1.15rem; font-weight: 700; border-block-end: 1px solid var(--line-soft); } .drawer nav a[aria-current="page"] { color: var(--teal); } .drawer nav a .ico { color: var(--teal); } .drawer-contact { margin-block-start: 24px; display: grid; gap: 10px; } .drawer-contact .btn { justify-content: flex-start; } .drawer-note { margin-block-start: 18px; } .scrim { position: fixed; inset: 0; z-index: 90; background: rgba(20, 33, 32, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s; } .scrim.open { opacity: 1; visibility: visible; } /* --------------------------------------------------------------- 홈 히어로 */ .hero { background: linear-gradient(180deg, var(--sand) 0%, var(--ivory) 100%); } .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(44px, 6vw, 86px); } .hero-copy .display { margin-block: 18px 20px; } .hero-copy .lead { max-width: 30ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 30px; } .hero-trust { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-block-start: 34px; padding-block-start: 26px; border-block-start: 1px solid var(--line); } .hero-trust li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--ink-2); font-weight: 500; } .hero-trust .ico { color: var(--teal); } .hero-media { position: relative; } .hero-media .frame { border-radius: var(--r-lg); box-shadow: var(--shadow); aspect-ratio: 356 / 388; } .hero-badge { position: absolute; inset-block-end: -18px; inset-inline-start: -18px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 20px; display: flex; align-items: center; gap: 12px; max-width: 84%; } .hero-badge .ico { color: var(--teal); } .hero-badge b { font-family: var(--head); font-size: 1rem; display: block; } .hero-badge span { font-size: 0.88rem; color: var(--ink-2); } /* --------------------------------------------------------------- 면 머리 */ .page-head { background: var(--sand); border-block-end: 1px solid var(--line-soft); } .page-head .wrap { padding-block: clamp(38px, 5vw, 68px); } .page-head .display { margin-block: 14px 16px; } .page-head .lead { max-width: 46ch; } .crumb { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--ink-3); } .crumb a { min-height: 44px; display: inline-flex; align-items: center; } .crumb a:hover { color: var(--teal); text-decoration: underline; } .page-head-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 56px); align-items: center; } .page-head-split .frame { border-radius: var(--r-lg); box-shadow: var(--shadow-soft); aspect-ratio: 188 / 114; } .head-facts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-block-start: 22px; } .head-facts li { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; color: var(--ink-2); } .head-facts .ico { color: var(--teal); } /* --------------------------------------------------------------- 케어 여정 */ .journey { position: relative; } .journey-rail { position: relative; margin-block-start: 46px; } .journey-line { position: absolute; inset-block-start: 34px; inset-inline: 10%; height: 5px; border-radius: 3px; background: var(--line-soft); /* overflow:hidden 을 두면 이 상자가 스크롤 컨테이너가 되어 view() 타임라인이 얼어붙는다. 채움 막대는 왼쪽 기준 scaleX 라 밖으로 넘치지 않으므로 자를 필요가 없다. */ } .journey-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--teal) 0%, var(--peach) 100%); transform: scaleX(var(--jp, 0)); transform-origin: left center; } /* 시그니처 연출 — 진행선만 스크롤에 맞춰 천천히 채워진다(지원 브라우저). 실패해도 선은 가득 찬 상태로 남는다(transform 을 먼저 1 로 세워 둔다). */ @supports (animation-timeline: view()) { .js .journey-fill { transform: scaleX(1); animation-name: journey-fill; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: cover 15% cover 70%; } } @keyframes journey-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .journey-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .journey-step { text-align: center; } .journey-mark { width: 72px; height: 72px; margin-inline: auto; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 3px solid var(--teal); color: var(--teal); box-shadow: var(--shadow-soft); } .journey-no { display: inline-block; margin-block-start: 14px; padding: 3px 13px; border-radius: 999px; background: var(--teal); color: #fff; font-family: var(--head); font-size: 0.86rem; font-weight: 700; } .journey-step h3 { margin-block: 10px 6px; font-size: 1.12rem; } .journey-step p { font-size: 0.94rem; color: var(--ink-2); line-height: 1.65; } .journey-foot { margin-block-start: 42px; padding: 22px 26px; background: var(--peach-wash); border: 1px solid var(--peach); border-radius: var(--r); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .journey-foot p { font-weight: 700; } /* --------------------------------------------------------------- 비교 */ .vs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr); align-items: stretch; gap: 0; } .vs-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; } .vs-card.is-teal { border-color: var(--teal); } .vs-card.is-peach { border-color: var(--peach); } .vs-head { display: flex; align-items: flex-start; gap: 14px; padding-block-end: 20px; border-block-end: 1px solid var(--line-soft); } .vs-head .ico { color: var(--teal); } .vs-card.is-peach .vs-head .ico { color: #a1521f; } .vs-head h3 { font-size: 1.24rem; } .vs-head p { font-size: 0.94rem; color: var(--ink-2); margin-block-start: 4px; } .vs-list { margin-block-start: 20px; display: grid; gap: 14px; } .vs-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; } .vs-list .ico { color: var(--teal); margin-block-start: 4px; } .vs-card.is-peach .vs-list .ico { color: #a1521f; } .vs-mid { display: grid; place-items: center; } .vs-badge { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); border: 2px solid var(--line); font-family: var(--head); font-weight: 700; color: var(--ink-2); } .vs-tip { margin-block-start: 26px; background: var(--surface); border: 1px solid var(--line-soft); border-inline-start: 6px solid var(--teal); border-radius: var(--r); padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .vs-tip p { color: var(--ink-2); } .vs-tip b { color: var(--ink); } /* --------------------------------------------------------------- 이유 카드 */ .reason-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .reason { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; } .reason .frame { border-radius: 0; aspect-ratio: 152 / 84; } .reason-body { padding: 26px 26px 30px; } .reason-body h3 { font-size: 1.16rem; margin-block-end: 10px; } .reason-body p { color: var(--ink-2); font-size: 0.98rem; } .reason-mark { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-block-start: -49px; margin-inline-start: 26px; position: relative; border-radius: 50%; background: var(--surface); border: 2px solid var(--teal); color: var(--teal); } /* --------------------------------------------------------------- 인용 */ .quote-block { max-width: 820px; margin-inline: auto; padding-inline-start: clamp(20px, 4vw, 44px); border-inline-start: 6px solid var(--peach); } .quote-block p { font-family: var(--head); font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 500; line-height: 1.66; letter-spacing: -0.025em; } .quote-by { margin-block-start: 20px; color: var(--ink-2); font-size: 0.96rem; } .quote-block + .quote-block { margin-block-start: 40px; } /* --------------------------------------------------------------- 상담 띠 */ .band { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 4.5vw, 62px); align-items: center; } .band .frame { border-radius: var(--r-lg); box-shadow: var(--shadow-soft); } .band-copy .sec-title { margin-block: 14px 16px; } .band-copy p { color: var(--ink-2); } .contact-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block-start: 28px; } .contact-card { display: flex; align-items: center; gap: 15px; min-height: 96px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: border-color 0.25s var(--ease); } .contact-card:hover { border-color: var(--teal); } .contact-card .ico { color: var(--teal); } .contact-card span { display: block; font-size: 0.88rem; color: var(--ink-3); } .contact-card b { font-family: var(--head); font-size: 1.12rem; display: block; letter-spacing: -0.02em; } .contact-card em { font-style: normal; font-size: 0.86rem; color: var(--ink-3); } /* --------------------------------------------------------------- 절차 */ .steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .step-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 26px 24px; position: relative; } .step-card .ico { color: var(--teal); } .step-no { font-family: var(--head); font-size: 0.86rem; font-weight: 700; color: var(--teal); letter-spacing: 0.06em; } .step-card h3 { margin-block: 12px 8px; font-size: 1.08rem; } .step-card p { font-size: 0.94rem; color: var(--ink-2); } .step-card::after { content: "→"; position: absolute; inset-block-start: 50%; inset-inline-end: -16px; transform: translateY(-50%); color: var(--slate); font-size: 1.1rem; } .step-card:last-child::after { content: none; } /* --------------------------------------------------------------- 진단 위저드 */ .wizard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--shadow-soft); } .wiz-progress { margin-block-end: 30px; } .wiz-bar { height: 10px; border-radius: 6px; background: var(--bg-2); overflow: hidden; } .wiz-bar span { display: block; height: 100%; border-radius: 6px; background: var(--teal); transition: width 0.45s var(--ease); } .wiz-steps { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-block-start: 16px; } .wiz-steps li { display: flex; align-items: center; gap: 9px; font-size: 0.94rem; color: var(--ink-3); font-weight: 500; } .wiz-steps li b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--ink-3); font-family: var(--head); font-size: 0.9rem; } .wiz-steps li[aria-current="step"] { color: var(--teal); font-weight: 700; } .wiz-steps li[aria-current="step"] b { background: var(--teal); color: #fff; } .wiz-steps li.done b { background: var(--ok); color: #fff; } .wiz-steps li.done { color: var(--ok); } .wiz-q { font-size: clamp(1.24rem, 2.5vw, 1.5rem); line-height: 1.45; } .wiz-help { margin-block: 10px 24px; color: var(--ink-2); font-size: 0.98rem; } .wiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .wiz-options.one-col { grid-template-columns: minmax(0, 1fr); } .opt { position: relative; } .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .opt label { display: flex; align-items: flex-start; gap: 14px; min-height: 76px; padding: 18px 20px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--r); cursor: pointer; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); } .opt label:hover { border-color: var(--teal); background: var(--teal-wash); } .opt input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; } .opt input:checked + label { border-color: var(--teal); background: var(--teal-wash); } .opt .opt-mark { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; color: transparent; background: var(--surface); margin-block-start: 2px; } .opt input:checked + label .opt-mark { border-color: var(--teal); background: var(--teal); color: #fff; } .opt b { display: block; font-family: var(--head); font-size: 1.06rem; font-weight: 700; } .opt span { display: block; font-size: 0.92rem; color: var(--ink-2); line-height: 1.6; margin-block-start: 3px; } .wiz-msg { display: none; align-items: center; gap: 10px; margin-block-start: 20px; padding: 14px 18px; border-radius: var(--r-sm); background: var(--err-bg); border: 1px solid var(--err); color: var(--err); font-weight: 700; font-size: 0.96rem; } .wiz-msg.show { display: flex; } .wiz-nav { display: flex; justify-content: space-between; gap: 14px; margin-block-start: 30px; flex-wrap: wrap; } .wiz-result { display: grid; gap: 20px; } .result-lead { display: flex; align-items: center; gap: 14px; padding: 20px 24px; background: var(--ok-bg); border: 1px solid var(--ok); border-radius: var(--r); color: var(--ok); font-weight: 700; } .result-card { border: 2px solid var(--teal); border-radius: var(--r-lg); padding: 28px; background: var(--surface); } .result-card .badge-top { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 999px; background: var(--peach); color: #43230f; font-size: 0.86rem; font-weight: 700; margin-block-end: 14px; } html[data-contrast="high"] .result-card .badge-top { color: #fff; } .result-card h3 { font-size: 1.34rem; } .result-card > p { margin-block: 10px 18px; color: var(--ink-2); } .result-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 20px; } .result-tags li { padding: 6px 14px; border-radius: 999px; background: var(--peach-wash); border: 1px solid var(--peach); font-size: 0.88rem; font-weight: 500; } .result-alt { display: grid; gap: 12px; } .result-alt li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-2); } .result-alt .ico { color: var(--teal); margin-block-start: 4px; } .result-alt b { font-family: var(--head); } .result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 24px; } .skeleton-line { height: 20px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-2) 25%, #ece7de 50%, var(--bg-2) 75%); background-size: 220% 100%; animation: shimmer 1.3s linear infinite; margin-block-end: 12px; } .skeleton-line.short { width: 55%; } .skeleton-line.tall { height: 68px; } @keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } } /* --------------------------------------------------------------- 유형 카드 */ .type-list { display: grid; gap: 22px; } .type-card { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: center; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-soft); } .type-card:nth-child(even) { background: var(--surface-2); grid-template-columns: minmax(0, 1fr) 252px; } .type-card:nth-child(even) > .frame { order: 2; } .type-card .frame { aspect-ratio: 252 / 240; } .type-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .type-head h3 { font-size: 1.28rem; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: 0.86rem; font-weight: 700; background: var(--teal-wash); color: var(--teal); border: 1px solid var(--teal); } .chip-peach { background: var(--peach-wash); color: #8a4413; border-color: var(--peach); } .type-card > div > p { margin-block: 12px 18px; color: var(--ink-2); } .type-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; margin-block-end: 20px; } .type-facts div { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; } .type-facts .ico { color: var(--teal); margin-block-start: 3px; } .type-facts b { font-family: var(--head); display: block; font-size: 0.92rem; color: var(--ink-3); font-weight: 500; } .type-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* --------------------------------------------------------------- 공간 보기 */ .tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 30px; border-block-end: 2px solid var(--line-soft); padding-block-end: 14px; } .tab { display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding-inline: 20px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font-family: var(--head); font-weight: 700; font-size: 1rem; cursor: pointer; color: var(--ink-2); } .tab:hover { border-color: var(--teal); color: var(--teal); } .tab[aria-selected="true"] { background: var(--teal); border-color: var(--teal); color: #fff; } .tab[aria-selected="true"] .ico { color: #fff; } .wide-banner-wrap { padding-block: 30px 0; } .wide-banner { width: 100%; height: clamp(170px, 21vw, 280px); object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-soft); } .viewer { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: start; } .viewer-stage { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); aspect-ratio: 240 / 276; box-shadow: var(--shadow-soft); } /* JS 가 붙으면 사진을 겹쳐 두고 긴 시간의 크로스페이드로만 바꾼다 */ .js .viewer-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s var(--ease); } .js .viewer-stage img.is-on { opacity: 1; } .viewer-stage img { width: 100%; height: 100%; object-fit: cover; } /* JS 가 없으면 탭이 없으므로 넉 장을 한눈에 펼친다 */ html:not(.js) .viewer-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; aspect-ratio: auto; background: none; } html:not(.js) .viewer-stage img { border-radius: var(--r-sm); aspect-ratio: 240 / 276; } html:not(.js) .tabs { display: none; } .viewer-panel h3 { font-size: 1.3rem; margin-block-end: 12px; } .viewer-panel > p { color: var(--ink-2); margin-block-end: 22px; } .check-list { display: grid; gap: 13px; } .check-list li { display: flex; gap: 12px; align-items: flex-start; } .check-list .ico { color: var(--teal); margin-block-start: 4px; } .viewer-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-block-start: 24px; padding-block-start: 20px; border-block-start: 1px solid var(--line-soft); } .viewer-meta div { font-size: 0.94rem; color: var(--ink-2); } .viewer-meta b { font-family: var(--head); color: var(--ink); } /* --------------------------------------------------------------- 표 */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); } .data-table { min-width: 660px; font-size: 1rem; } .data-table caption { text-align: start; padding: 18px 22px 0; font-size: 0.92rem; color: var(--ink-3); caption-side: top; } .data-table th, .data-table td { padding: 16px 18px; border-block-end: 1px solid var(--line-soft); text-align: start; vertical-align: top; } .data-table thead th { background: var(--sand); font-family: var(--head); font-size: 0.98rem; border-block-end: 2px solid var(--line); } .data-table tbody th { font-family: var(--head); font-weight: 700; color: var(--ink-2); font-size: 0.96rem; background: var(--surface-2); } .data-table td b { font-family: var(--head); } .data-table .col-pick { background: var(--teal-wash); } .data-table thead .col-pick { background: #d9ebe8; } html[data-contrast="high"] .data-table .col-pick { background: var(--teal-wash); } .data-table tfoot th, .data-table tfoot td { background: var(--sand); font-family: var(--head); font-weight: 700; border-block-end: 0; } .pick-badge { display: inline-flex; align-items: center; gap: 6px; margin-block-end: 6px; padding: 3px 11px; border-radius: 999px; background: var(--peach); color: #43230f; font-size: 0.8rem; font-weight: 700; } html[data-contrast="high"] .pick-badge { color: #fff; } .table-note { margin-block-start: 14px; } /* 모바일용 카드 표(같은 내용을 다시 짠 것 — PC 표를 줄이지 않는다) */ .card-table { display: none; gap: 16px; } .ct-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .ct-head { background: var(--sand); padding: 16px 20px; font-family: var(--head); font-weight: 700; font-size: 1.08rem; border-block-end: 1px solid var(--line); } .ct-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 20px; border-block-end: 1px solid var(--line-soft); font-size: 0.98rem; } .ct-row:last-child { border-block-end: 0; } .ct-row dt { color: var(--ink-3); } .ct-row dd { margin: 0; font-family: var(--head); font-weight: 700; text-align: end; } /* --------------------------------------------------------------- 아코디언 */ .accordion { display: grid; gap: 14px; } .acc-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .acc-item.open { border-color: var(--teal); } .acc-trigger { width: 100%; min-height: 72px; display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: none; border: 0; cursor: pointer; text-align: start; font-family: var(--head); font-size: 1.08rem; font-weight: 700; } .acc-trigger .ico-lead { color: var(--teal); } .acc-trigger .ico-chev { margin-inline-start: auto; color: var(--slate); transition: transform 0.35s var(--ease); } .acc-item.open .acc-trigger .ico-chev { transform: rotate(180deg); } .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); } .acc-item.open .acc-panel { grid-template-rows: 1fr; } .acc-inner { overflow: hidden; } .acc-inner > div { padding: 4px 22px 24px; color: var(--ink-2); } .acc-inner p + p { margin-block-start: 12px; } .acc-inner ul { display: grid; gap: 10px; margin-block-start: 12px; } .acc-inner li { display: flex; gap: 10px; align-items: flex-start; } .acc-inner .ico { color: var(--teal); margin-block-start: 4px; } /* --------------------------------------------------------------- 계산기 */ .calc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 3.6vw, 44px); align-items: start; } .calc-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px); } .calc-group + .calc-group { margin-block-start: 26px; } .calc-group > b { display: block; font-family: var(--head); font-size: 1.04rem; margin-block-end: 4px; } .calc-group > span { display: block; font-size: 0.9rem; color: var(--ink-3); margin-block-end: 14px; } .pill-set { display: flex; flex-wrap: wrap; gap: 10px; } .pill { min-height: 52px; padding-inline: 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font-family: var(--head); font-weight: 700; font-size: 0.98rem; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .pill:hover { border-color: var(--teal); color: var(--teal); } .pill[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; } .pill[aria-pressed="true"]::before { content: "✓"; font-size: 0.9rem; } .pill[disabled] { background: var(--bg-2); color: var(--ink-3); border-color: var(--line-soft); cursor: not-allowed; opacity: 0.7; } .pill[disabled]::after { content: " (해당 없음)"; font-weight: 500; font-size: 0.86rem; } .calc-out { background: var(--surface); border: 2px solid var(--teal); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); position: sticky; inset-block-start: 108px; } .calc-out h3 { font-size: 1.16rem; margin-block-end: 6px; } .calc-empty { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); padding-block: 14px; } .calc-empty .ico { color: var(--slate); margin-block-start: 3px; } .calc-rows { display: grid; gap: 0; margin-block: 18px 0; } .calc-rows div { display: flex; justify-content: space-between; gap: 14px; padding-block: 13px; border-block-end: 1px solid var(--line-soft); font-size: 0.98rem; } .calc-rows dt { color: var(--ink-2); } .calc-rows dd { margin: 0; font-family: var(--head); font-weight: 700; } .calc-total { margin-block-start: 18px; padding: 18px 20px; border-radius: var(--r); background: var(--teal-wash); display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .calc-total span { font-family: var(--head); font-weight: 700; } .calc-total b { font-family: var(--head); font-size: 1.6rem; color: var(--teal); letter-spacing: -0.03em; } .state-msg { display: flex; gap: 11px; align-items: flex-start; margin-block-start: 18px; padding: 15px 18px; border-radius: var(--r-sm); font-size: 0.95rem; line-height: 1.65; } .state-msg .ico { margin-block-start: 3px; flex: none; } .state-warn { background: var(--warn-bg); border: 1px solid var(--warn); color: var(--warn); } .state-err { background: var(--err-bg); border: 1px solid var(--err); color: var(--err); } .state-ok { background: var(--ok-bg); border: 1px solid var(--ok); color: var(--ok); } .state-info { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); } .calc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 22px; } /* --------------------------------------------------------------- 폼 */ .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--shadow-soft); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .field { display: block; } .field.full { grid-column: 1 / -1; } .field > label, .field > .field-label { display: block; font-family: var(--head); font-weight: 700; font-size: 1rem; margin-block-end: 9px; } .req { color: var(--err); margin-inline-start: 3px; } .opt-tag { color: var(--ink-3); font-weight: 500; font-size: 0.9rem; margin-inline-start: 6px; } .control { width: 100%; min-height: 58px; padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font: inherit; color: var(--ink); } .control::placeholder { color: #8d9a9c; } .control:hover { border-color: var(--line-strong); } .control:focus { border-color: var(--teal); outline: 3px solid var(--focus); outline-offset: 2px; } textarea.control { min-height: 148px; resize: vertical; line-height: 1.7; } select.control { appearance: none; background-image: linear-gradient(45deg, transparent 49%, var(--ink-2) 50%), linear-gradient(-45deg, transparent 49%, var(--ink-2) 50%); background-size: 9px 9px, 9px 9px; background-position: calc(100% - 22px) 25px, calc(100% - 13px) 25px; background-repeat: no-repeat; padding-inline-end: 44px; } .control[aria-invalid="true"] { border-color: var(--err); background: var(--err-bg); } .field-error { display: none; align-items: center; gap: 7px; margin-block-start: 8px; color: var(--err); font-size: 0.92rem; font-weight: 700; } .field-error.show { display: flex; } .field-hint { margin-block-start: 8px; font-size: 0.9rem; color: var(--ink-3); } .counter { text-align: end; font-size: 0.88rem; color: var(--ink-3); margin-block-start: 7px; } .radio-row { display: flex; flex-wrap: wrap; gap: 10px; } .radio-pill { position: relative; } .radio-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; } .radio-pill label { display: inline-flex; align-items: center; gap: 9px; min-height: 54px; padding-inline: 18px; border: 2px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 0.98rem; } .radio-pill input:checked + label { background: var(--teal); border-color: var(--teal); color: #fff; } .radio-pill input:checked + label::before { content: "✓"; } .radio-pill input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; } .agree-row { display: flex; align-items: flex-start; gap: 13px; padding: 18px 20px; background: var(--bg-2); border-radius: var(--r-sm); border: 1px solid var(--line-soft); } .agree-row input { width: 26px; height: 26px; margin: 3px 0 0; flex: none; accent-color: var(--teal); } .agree-row label { font-size: 0.98rem; line-height: 1.65; } .agree-row a { color: var(--teal); text-decoration: underline; } .form-foot { margin-block-start: 26px; display: grid; gap: 16px; } .form-success { display: none; } .form-success.show { display: block; } .success-panel { border: 2px solid var(--ok); background: var(--ok-bg); border-radius: var(--r-lg); padding: clamp(24px, 3.4vw, 38px); text-align: center; } .success-panel .ico { color: var(--ok); margin-inline: auto; } .success-panel h3 { margin-block: 14px 10px; font-size: 1.3rem; color: var(--ok); } .success-panel p { color: var(--ink-2); } .success-no { display: inline-block; margin-block-start: 16px; padding: 9px 20px; border-radius: 999px; background: var(--surface); border: 1px solid var(--ok); font-family: var(--head); font-weight: 700; } .success-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-block-start: 24px; } /* --------------------------------------------------------------- 안내 카드 */ .info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .info-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 26px 24px; } .info-card .ico { color: var(--teal); } .info-card h3 { margin-block: 12px 8px; font-size: 1.08rem; } .info-card p { font-size: 0.95rem; color: var(--ink-2); } .info-card dl { margin: 0; display: grid; gap: 8px; margin-block-start: 12px; } .info-card dt { font-size: 0.88rem; color: var(--ink-3); } .info-card dd { margin: 0; font-family: var(--head); font-weight: 700; } .notice-box { background: var(--surface); border: 1px solid var(--line); border-inline-start: 6px solid var(--slate); border-radius: var(--r); padding: 24px 26px; } .notice-box h3 { font-size: 1.06rem; margin-block-end: 12px; } .notice-box ul { display: grid; gap: 10px; } .notice-box li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; color: var(--ink-2); } .notice-box .ico { color: var(--slate); margin-block-start: 4px; } /* --------------------------------------------------------------- 마무리 띠 */ .cta-band { background: var(--teal); color: #fff; } .cta-band .wrap { padding-block: clamp(46px, 5.5vw, 76px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; } .cta-band .sec-title { color: #fff; } .cta-band p { color: rgba(255, 255, 255, 0.9); margin-block-start: 12px; } .cta-band .btn-secondary { background: #fff; color: var(--teal); border-color: #fff; } .cta-band .btn-secondary:hover { background: var(--peach-soft); color: #43230f; } .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; } .cta-photo { background: var(--peach-wash); } .cta-photo .wrap { padding-block: clamp(40px, 5vw, 68px); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 52px); align-items: center; } .cta-photo .frame { border-radius: var(--r-lg); box-shadow: var(--shadow-soft); } .cta-photo .sec-title { margin-block-end: 12px; } .cta-photo p { color: var(--ink-2); } .cta-photo .cta-actions { margin-block-start: 24px; } /* --------------------------------------------------------------- 꼬리 */ .site-footer { background: var(--teal-dark); color: rgba(255, 255, 255, 0.86); padding-block: 56px 30px; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 0.9fr)); gap: 34px; } .footer-brand .brand b { color: #fff; } .footer-brand .brand small { color: rgba(255, 255, 255, 0.7); } .footer-brand .brand .ico { color: var(--peach); } .footer-tel { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-block-start: 16px; font-family: var(--head); font-size: 1.34rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; } .footer-brand p { font-size: 0.94rem; margin-block-start: 6px; } .footer-col h3 { font-size: 1rem; color: #fff; margin-block-end: 14px; } .footer-col li a, .footer-col li span { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.95rem; } .footer-col li a:hover { color: #fff; text-decoration: underline; } .footer-info { display: grid; gap: 8px; font-size: 0.94rem; } .footer-info b { color: #fff; font-weight: 500; } .footer-bottom { margin-block-start: 40px; padding-block-start: 22px; border-block-start: 1px solid rgba(255, 255, 255, 0.18); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; font-size: 0.88rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; } .footer-links a { display: inline-flex; align-items: center; min-height: 44px; } .footer-links a:hover { color: #fff; text-decoration: underline; } .footer-demo-note { color: rgba(255, 255, 255, 0.62); font-size: 0.85rem; max-width: 62ch; } /* --------------------------------------------------------------- 떠 있는 것 */ .mobile-cta { display: none; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 85; background: var(--surface); border-block-start: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(28, 43, 42, 0.1); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px; } .mobile-cta .btn { flex: 1; min-height: 56px; padding-inline: 12px; font-size: 1rem; } .to-top { position: fixed; inset-inline-end: 26px; inset-block-end: 26px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s; } .to-top.show { opacity: 1; visibility: visible; } .to-top:hover { border-color: var(--teal); color: var(--teal); } .toast { position: fixed; inset-inline-start: 50%; inset-block-end: 96px; z-index: 130; transform: translate(-50%, 16px); min-width: 290px; max-width: min(560px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: var(--ink); color: #fff; border-radius: var(--r); font-size: 0.98rem; line-height: 1.6; box-shadow: 0 14px 36px rgba(20, 33, 32, 0.3); opacity: 0; visibility: hidden; /* 알림일 뿐이므로 아래의 제출 버튼을 가로막지 않는다 */ pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s; } .toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .toast .ico { color: var(--peach); flex: none; } .spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, 0.35); border-block-start-color: #fff; border-radius: 50%; animation: spin 0.75s linear infinite; } .spinner-dark { border-color: rgba(28, 43, 42, 0.25); border-block-start-color: var(--teal); } @keyframes spin { to { transform: rotate(360deg); } } /* --------------------------------------------------------------- 등장 */ /* IntersectionObserver 는 빠른 스크롤에서 요소를 놓친다(실측). 위치를 직접 잰다. */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .js .reveal.in { opacity: 1; transform: none; } /* =============================================================== 반응형 */ @media (max-width: 1180px) { :root { --wrap: 1024px; --gutter: 28px; } .navlinks a { padding-inline: 12px; font-size: 0.98rem; } .viewer { grid-template-columns: 260px minmax(0, 1fr); } } @media (max-width: 1024px) { :root { --gutter: 24px; } .navlinks, .util-phone, .nav-actions .btn { display: none; } .menu-btn { display: inline-flex; } .nav-row .wrap { min-height: 72px; } .hero .wrap { grid-template-columns: minmax(0, 1fr); } .hero-media { max-width: 460px; } .hero-copy .lead { max-width: none; } .reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reason:last-child { grid-column: 1 / -1; } .reason:last-child .frame { aspect-ratio: 3 / 1; } .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .step-card:nth-child(2)::after { content: none; } .band, .cta-photo .wrap, .page-head-split, .calc { grid-template-columns: minmax(0, 1fr); } .calc-out { position: static; } .cta-band .wrap { grid-template-columns: minmax(0, 1fr); } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .type-card { grid-template-columns: 200px minmax(0, 1fr); } .journey-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; } .journey-line { display: none; } } @media (max-width: 768px) { :root { --gutter: 20px; --util-h: 52px; } body { padding-block-end: 82px; } .mobile-cta { display: flex; } .to-top { display: none; } .toast { inset-block-end: 92px; } .util-row .wrap { justify-content: center; gap: 8px; } .util-tag { display: none; } .ax-btn { padding-inline: 10px; font-size: 0.86rem; } .hero .wrap { padding-block: 32px 40px; } .hero-media { max-width: none; } .hero-badge { position: static; margin-block-start: 14px; max-width: none; } .hero-actions .btn { flex: 1 1 100%; } .vs-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .vs-mid { padding-block: 4px; } .reason-grid { grid-template-columns: minmax(0, 1fr); } .reason:last-child .frame { aspect-ratio: 152 / 84; } .steps-grid { grid-template-columns: minmax(0, 1fr); } .step-card::after { content: none !important; } .wiz-options, .type-facts, .form-grid, .info-grid, .contact-two { grid-template-columns: minmax(0, 1fr); } .type-card, .type-card:nth-child(even) { grid-template-columns: minmax(0, 1fr); padding: 18px; } .type-card:nth-child(even) > .frame { order: 0; } .type-card .frame { aspect-ratio: 16 / 10; } .viewer { grid-template-columns: minmax(0, 1fr); } .viewer-stage { max-width: 340px; aspect-ratio: 4 / 3; } .journey-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; text-align: start; } .journey-step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; } .journey-mark { margin-inline: 0; } .journey-no { margin-block-start: 0; } .journey-step h3 { margin-block-start: 4px; } .journey-step > div { grid-column: 2; } .journey-step .journey-mark { grid-row: span 3; } .footer-grid { grid-template-columns: minmax(0, 1fr); } .table-scroll { border-radius: var(--r); } .data-table { min-width: 560px; } .sec-head { margin-block-end: 32px; } .cta-band .wrap, .cta-photo .wrap { gap: 24px; } .cta-actions .btn { flex: 1 1 100%; } } @media (max-width: 560px) { .ax-btn .ax-state { display: none; } /* 좁은 화면에서는 표를 줄이지 않고 카드로 다시 짠다 */ .table-swap .table-scroll { display: none; } .table-swap .card-table { display: grid; } .wiz-nav .btn { flex: 1 1 100%; } .result-actions .btn, .calc-actions .btn, .success-actions .btn { flex: 1 1 100%; } .brand small { display: none; } .brand b { font-size: 1.1rem; } } @media (max-width: 380px) { :root { --gutter: 16px; } .ax-btn { padding-inline: 8px; font-size: 0.82rem; gap: 6px; } } /* 가로로 눕힌 낮은 화면 — 고정 요소가 화면을 먹지 않게 */ @media (max-height: 460px) and (orientation: landscape) { .mobile-cta { position: static; box-shadow: none; } body { padding-block-end: 0; } .site-header { position: static; } } /* --------------------------------------------------------------- 모션 끔 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } /* 진행 애니메이션은 없애고 최종 상태를 즉시 보여 준다 */ .js .reveal { opacity: 1; transform: none; } .journey-fill { transform: scaleX(1) !important; animation: none !important; } .js .viewer-stage img.is-on { opacity: 1; } .skeleton-line { animation: none; background: var(--bg-2); } } /* --------------------------------------------------------------- 인쇄 */ @media print { @page { margin: 14mm; } html { font-size: 11.5pt; } body { background: #fff; color: #000; padding-block-end: 0; } .site-header, .drawer, .scrim, .to-top, .toast, .mobile-cta, .cta-band, .cta-photo, .skip, .crumb, .print-hide, .tabs, .calc-actions, .hero-actions, .journey-foot, .vs-tip .btn { display: none !important; } .print-only { display: block !important; } .section { padding-block: 14pt; } .wrap { max-width: none; padding-inline: 0; } a { color: #000; text-decoration: none; } .calc, .band, .viewer { grid-template-columns: minmax(0, 1fr) !important; } .calc-out { border: 1.5pt solid #000; position: static; } .table-scroll { overflow: visible; border: 1pt solid #000; } .data-table { min-width: 0; } .data-table th, .data-table td { border-block-end: 0.5pt solid #666; padding: 6pt 8pt; } .data-table thead th { background: #eee !important; } .acc-panel { grid-template-rows: 1fr !important; } .acc-item { border: 0.5pt solid #666; } .acc-trigger .ico-chev { display: none; } .section, .acc-item, .calc-out, .notice-box, .info-card, .table-scroll { break-inside: avoid; } /* 잉크를 아끼도록 넓은 색 띠는 흰 바탕으로 */ .page-head, .section-tint, .section-white, .hero, .wide-banner-wrap { background: #fff !important; } .calc-total { background: #f0f0f0 !important; } h2, h3 { break-after: avoid; } .js .reveal { opacity: 1 !important; transform: none !important; } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer { background: #fff; color: #000; border-block-start: 1pt solid #000; } .footer-brand .brand b, .footer-col h3, .footer-tel { color: #000; } } .print-only { display: none; } .print-head { display: none; } @media print { .print-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 4pt 12pt; border-block-end: 1.5pt solid #000; padding-block-end: 8pt; margin-block-end: 12pt; } .print-head b { font-family: var(--head); font-size: 14pt; } .print-head span { font-size: 9.5pt; } }