@font-face { font-family: 'Daishin Text'; font-weight: 500; font-display: swap; src: url('../fonts/DaishinText-500.woff2') format('woff2'); }
@font-face { font-family: 'Daishin Text'; font-weight: 700; font-display: swap; src: url('../fonts/DaishinText-700.woff2') format('woff2'); }
@font-face { font-family: 'Daishin Title'; font-weight: 500; font-display: swap; src: url('../fonts/DaishinTitle-500.woff2') format('woff2'); }
@font-face { font-family: 'Daishin Title'; font-weight: 700; font-display: swap; src: url('../fonts/DaishinTitle-700.woff2') format('woff2'); }
@font-face { font-family: 'Daishin Title'; font-weight: 800; font-display: swap; src: url('../fonts/DaishinTitle-800.woff2') format('woff2'); }

:root {
  --ink: #28282b;
  --text: #4d4d4f;
  --mute: #767676;
  --green: #005331;
  --line: rgba(0, 0, 0, 0.2);
  --float-h: 5.75rem;
  --gutter: 2.5rem;
  --f-text: 'Daishin Text', Pretendard Variable, Pretendard, sans-serif;
  --f-title: 'Daishin Title', Pretendard Variable, Pretendard, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

body {
  font-family: Pretendard Variable, Pretendard, -apple-system, 'Malgun Gothic', sans-serif;
  color: var(--text);
  background: #fff;
  letter-spacing: -0.03em;
  word-break: keep-all;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.inner { width: 48rem; max-width: 100%; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- hero ---------- */
.hero { height: 58.625rem; background: linear-gradient(121deg, #50B848 0.1%, #289A82 57.68%, #307FF4 99.9%); color: #fff; text-align: center; }
.gnb { display: flex; justify-content: space-between; align-items: center; padding: 1.875rem 0; }
.hero-title { padding: 3.125rem 0 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1.875rem; }
.chip { font-family: var(--f-text); background: #fff; color: var(--text); font-size: 1.5rem; font-weight: 700; padding: 0.75rem 1.25rem; border-radius: 6.25rem; letter-spacing: -0.045rem; line-height: 1.1; }
.hero h1 { font-family: var(--f-title); font-size: 3.75rem; display: flex; flex-direction: column; letter-spacing: -0.1875rem; }
.hero h1 span { font-weight: 500; line-height: 1.1; }
.hero h1 b { font-weight: 700; line-height: 1.2; letter-spacing: -0.15rem; }
.hero-head { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.hero-title p { font-family: var(--f-text); font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.045rem; }
.hero-visual { width: 28.875rem; height: auto; margin: 0 auto; }

.gnb img { width: auto; height: 1.25rem; }
.gnb img:last-child { height: 1.75rem; }

/* ---------- shared ---------- */
.sec-title { font-family: var(--f-title); font-size: 2.25rem; font-weight: 500; line-height: 1.3; text-align: center; color: var(--ink); letter-spacing: -0.1125rem; }
.sec-title b { font-weight: 700; }

/* ---------- pick ---------- */
.pick { padding: 6.25rem 0 3.75rem; }
.pick .inner { display: flex; flex-direction: column; gap: 5rem; }

.tabs { position: relative; display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0.5rem 0.5rem -0.5rem rgba(0, 0, 0, 0.25); }
.tab { font-family: var(--f-text); display: flex; flex-direction: column; align-items: center; gap: 1.25rem; font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.0625rem; white-space: nowrap; }
.tab img { width: 5rem; height: 5rem; object-fit: contain; }
.tab.on { font-weight: 700; color: var(--ink); }
.tab.on img { width: 5.1875rem; height: 5.1875rem; }
.tab.on .i-off, .tab:not(.on) .i-on { display: none; }
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #d4d4d4; flex: none; }
.bar { position: absolute; left: 0; bottom: -1px; height: 0.375rem; border-radius: 0.375rem; background: linear-gradient(90deg, #21b57e, #0999bc); transition: transform 0.05s cubic-bezier(0.65, 0, 0.35, 1), width 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }

.pick-body { display: flex; flex-direction: column; gap: 3.75rem; }
.cards[hidden] { display: none; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
/* 활성 시 테두리가 두꺼워진 만큼 padding을 줄여 내용 위치를 고정한다. */
.card { --b: 1px; display: flex; flex-direction: column; justify-content: space-between; height: 16.75rem; padding: calc(2.0625rem - var(--b)) calc(1.5625rem - var(--b)) calc(1.5625rem - var(--b)); border: var(--b) solid var(--line); border-radius: 1.25rem; background: #fff; }
.card.on { --b: 0.375rem; border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(110deg, #21b57e, #0999bc) border-box; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.card-title { display: flex; flex-direction: column; gap: 0.5rem; }
.card-title strong { font-family: var(--f-title); font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.075rem; }
.card-title span { font-family: var(--f-text); font-size: 1.125rem; font-weight: 500; line-height: 1.2; color: var(--mute); letter-spacing: -0.0338rem; }
.art { position: relative; width: 8.25rem; height: 8.25rem; flex: none; }
.art > img { position: absolute; top: 0; left: 0; width: 8.25rem; height: 8.25rem; }
.shadow, .products li::before { position: absolute; width: 6.75rem; height: 0.875rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0)); }
.art > .extra { left: 0.3125rem; top: 2rem; width: 4.625rem; height: 4.25rem; object-fit: cover; filter: drop-shadow(0 0.25rem 0.625rem rgba(0, 0, 0, 0.25)); }
.price { font-family: var(--f-text); text-align: right; color: var(--green); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.0625rem; }
.price b { font-size: 2rem; font-weight: 700; letter-spacing: -0.1rem; }

.cta { display: flex; flex-direction: column; align-items: center; gap: 1.875rem; padding: 1.25rem 2.5rem 3.125rem; border-radius: 1.25rem; color: #fff; text-align: center; background: linear-gradient(104.6deg, #22b67c, #008fd5); filter: drop-shadow(0 0.25rem 0.25rem rgba(0, 0, 0, 0.25)); }
.cta img { width: 3.75rem; height: 3.75rem; transform: rotate(90deg); }
.cta-text { font-family: var(--f-title); font-size: 2.5rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.075rem; }
.cta-text u { text-underline-position: from-font; text-decoration-thickness: from-font; text-decoration-skip-ink: none; }
.cta-text .m { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.0875rem; }
.btn-pill { font-family: var(--f-text); background: #fff; color: var(--ink); font-size: 1.5rem; font-weight: 700; line-height: 1.1; padding: 1.25rem 3rem; border-radius: 6.25rem; letter-spacing: -0.075rem; }

/* ---------- faq ---------- */
.faq { padding: 5rem 0 6.25rem; }
.faq .inner { display: flex; flex-direction: column; gap: 3.75rem; }
.faq-list { display: flex; flex-direction: column; gap: 1rem; }
.faq-list details { cursor: pointer; background: #f7f7f7; border-radius: 1.25rem; padding: 1.875rem 1.25rem; color: #555; }
/* border 대신 inset shadow: 열릴 때 크기·내용 위치가 변하지 않는다. */
.faq-list details[open] { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); color: #000; }
.faq-list summary { font-family: var(--f-text); display: flex; gap: 0.625rem; font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.0375rem; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: 'Q.'; flex: none; }
.faq-list p { margin-top: 0.9375rem; padding-left: 2.125rem; font-size: 1.125rem; line-height: 1.4; color: var(--mute); letter-spacing: -0.0338rem; }

/* ---------- more ---------- */
.more { background: #f0f0f0; padding: 7.5rem 0 6.25rem; }
.more .inner { display: flex; flex-direction: column; align-items: center; }
.more-sub { font-family: var(--f-text); margin-top: 0.625rem; font-size: 1.25rem; line-height: 1.2; font-weight: 500; color: var(--mute); letter-spacing: -0.0375rem; }
.more-sub b { font-weight: 700; color: var(--text); }
.btn-grad { font-family: var(--f-title); margin-top: 5rem; display: flex; align-items: center; height: 5rem; padding: 0 3rem; border-radius: 6.25rem; background: linear-gradient(90deg, var(--green), #50b848); color: #fff; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.075rem; }

.marquee { overflow: hidden; width: 100%; margin-top: 2.5rem; }
/* 이음새 조건은 항목 위상차(1.25s)×8이 물결 주기(5s)의 정수배인 것. 한 바퀴 시간(12.5s)은 무관하다. */
.products { display: flex; flex-direction: row-reverse; width: max-content; align-items: center; height: 15.375rem; animation: flow 12.5s linear infinite; will-change: transform; }
@keyframes flow { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* 터치 기기는 탭 후 :hover가 남아 마퀴가 멈춘 채로 고정된다. */
@media (hover: hover) { .marquee:hover .products, .marquee:hover .products li { animation-play-state: paused; } }
.products li { font-family: var(--f-text); --b: 1px; position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: calc(1.9375rem - var(--b)) calc(1.3125rem - var(--b)); border-radius: 6.25rem; background: #fff; border: var(--b) solid rgba(0, 0, 0, 0.1); transition: border-color 0.25s, color 0.25s, filter 0.25s; font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.0375rem; margin-right: 1.25rem; animation: wave 5s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: calc(var(--i) * 1.25s - 10s); will-change: transform; }
.products li img { position: relative; width: 3.75rem; height: 3.75rem; }
.products li::before { content: ''; left: calc(0.8125rem - var(--b)); top: calc(4.75rem - var(--b)); width: 4.875rem; }
/* 크기가 변하면 복제 세트와 길이가 어긋나 이음새가 끊긴다. */
.products li.on { --b: 0.1875rem; border-color: transparent; color: var(--green); filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.25)); }
/* 그라데이션 각도·색은 시안 스크린샷 기준. */
.products li::after { content: ''; position: absolute; inset: calc(-1 * var(--b)); padding: 0.1875rem; border-radius: inherit; background: linear-gradient(132deg, var(--green), #00ce79); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.products li.on::after { opacity: 1; }
@keyframes wave { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-2.25rem); } 75% { transform: translateY(2.25rem); } }
@media (prefers-reduced-motion: reduce) { .products, .products li { animation: none; } }
/* 항목 순번(위상 계산용). 시안의 정적 높낮이는 물결 경로로 대체했다. */
.products li:nth-child(8n+1) { --i: 0; }
.products li:nth-child(8n+2) { --i: 1; }
.products li:nth-child(8n+3) { --i: 2; }
.products li:nth-child(8n+4) { --i: 3; }
.products li:nth-child(8n+5) { --i: 4; }
.products li:nth-child(8n+6) { --i: 5; }
.products li:nth-child(8n+7) { --i: 6; }
.products li:nth-child(8n+8) { --i: 7; }

.app-btns { margin-top: 5rem; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.app { font-family: var(--f-text); display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem 2.5rem; border-radius: 1.25rem; font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.075rem; white-space: nowrap; }
.app.creon { background: #fff; border: 1px solid #da315a; color: #da315a; }
.app.cybos { background: #fff; border: 1px solid rgba(0, 0, 0, 0.4); }
.app.kakao { background: #fd0; color: #231815; }
.app img { width: auto; height: 2rem; border-radius: 0.3125rem; }
.info { margin-top: 1.875rem; display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; line-height: 1.2; color: var(--mute); letter-spacing: -0.03rem; }
.info img { flex: none; width: 1.25rem; height: 1.25rem; }

/* ---------- footer ---------- */
.foot { background: #f7f7f7; padding: 3.125rem 0 calc(4.375rem + var(--float-h) + 6.25rem); }
.notice { padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.notice h2 { font-family: var(--f-text); font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: var(--ink); margin-bottom: 1.25rem; letter-spacing: -0.0375rem; }
.notice ul { display: flex; flex-direction: column; gap: 0.625rem; }
.notice li, .list-notes li { position: relative; padding-left: 0.875rem; font-size: 1rem; line-height: 1.4; color: var(--mute); letter-spacing: -0.03rem; }
.notice li::before, .list-notes li::before { content: ''; position: absolute; left: 0; top: 0.5625rem; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: rgba(0, 0, 0, 0.20); }
.compliance { font-family: var(--f-text); display: flex; justify-content: space-between; align-items: center; padding: 1.875rem 0 0; font-size: 1rem; font-weight: 500; letter-spacing: -0.05rem; }
.compliance img { width: 7.875rem; height: 1.25rem; }
.btn-dark { font-family: var(--f-text); width: 100%; display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding: 1.875rem 2.5rem; border-radius: 1.25rem; background: var(--ink); color: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.075rem; box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.25); }
/* body 마지막 자식이어야 페이지 전체에서 sticky가 동작한다. 음수 margin으로 푸터 안쪽에 내려앉는다. */
.float-btn { position: sticky; bottom: calc(1.25rem + env(safe-area-inset-bottom)); width: calc(48rem - 2 * var(--gutter)); margin: calc(-1 * (var(--float-h) + 6.25rem)) auto 0; z-index: 100; }

/* ---------- modal ---------- */
/* 팝업이 열린 동안 뒤 페이지 스크롤을 막는다. gutter는 스크롤바가 사라지며 화면이 밀리는 것을 막는다. */
html { scrollbar-gutter: stable; }
html[data-modal] { overflow: hidden; }
/* 반투명 배경 너머로 플로팅 버튼이 비쳐 팝업과 같은 층처럼 보인다. */
html[data-modal='app'] .float-btn, html[data-modal='all'] .float-btn { visibility: hidden; }
.modal { border: 0; padding: 0; background: #fff; color: var(--text); margin: auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25); scrollbar-width: none; }
.modal::-webkit-scrollbar { display: none; }
.modal::backdrop { background: rgba(0, 0, 0, 0.2); }
.modal > * { margin-left: var(--gutter); margin-right: var(--gutter); }
.modal > :first-child { margin-top: 2.5rem; }
/* .qr-box: 숨긴 상자가 DOM 마지막 자식이라 :last-child로 못 잡는다. */
.modal > :last-child, .qr-box { margin-bottom: 3.125rem; }
.modal .btn-dark { width: calc(100% - 2 * var(--gutter)); box-shadow: none; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2.5rem; }
.modal-head h3 { font-family: var(--f-title); font-size: 2.25rem; font-weight: 700; line-height: 1.1; color: var(--ink); letter-spacing: -0.1125rem; }
.modal-head p { font-family: var(--f-title); margin-top: 0.625rem; font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--mute); letter-spacing: -0.0625rem; }
.close { flex: none; width: 2rem; height: 2rem; }
.close img, .btn-dark img { width: 2rem; height: 2rem; }

.modal:not(.sheet) { width: 36.25rem; max-width: 100%; border-radius: 2.5rem; }
.steps { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.875rem; }
.step { font-family: var(--f-text); flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9375rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1.25rem; font-size: 1.25rem; font-weight: 700; line-height: 1.2; white-space: nowrap; letter-spacing: -0.0375rem; }
.step img { height: 5rem; width: auto; }
.steps > img { flex: none; width: 1.75rem; height: 1.75rem; }
:is(.qrs, .qr-box) { display: flex; justify-content: space-between; border-radius: 1.25rem; background: #f7f7f7; }
:is(.qrs, .qr-box) > div { display: flex; flex-direction: column; gap: 1.25rem; }
:is(.qrs, .qr-box) img:not(.qr) { width: auto; height: 2rem; }
:is(.qrs, .qr-box) p { font-family: var(--f-title); font-size: 1.25rem; line-height: 1.2; font-weight: 500; color: var(--mute); letter-spacing: -0.0625rem; white-space: nowrap; }
:is(.qrs, .qr-box) p b { font-weight: 700; }
.qr { width: 7.5rem; height: 7.5rem; }
.qrs { padding: 1.875rem 2.5rem; text-align: center; }
.qrs > div { align-items: center; }
.qrs i { flex: none; width: 1px; background: rgba(0, 0, 0, 0.1); }
/* "처음인가요?" 팝업은 누른 앱(data-app)의 상자만 보인다. */
.qr-box { align-items: center; padding: 1.25rem 1.875rem; }
.qr-box > div { align-items: flex-start; }
#modal-app[data-app='creon'] [data-for='cybos'], #modal-app[data-app='cybos'] [data-for='creon'] { display: none; }

#modal-all .logo { margin-top: 0.625rem; }
.cybos-logo { display: flex; align-items: center; gap: 0.625rem; font-family: var(--f-title); font-size: 1rem; font-weight: 800; line-height: 1.1; color: var(--text); letter-spacing: -0.02rem; }
.dl { display: none; margin-top: 0.625rem; padding: 0.625rem 1.5rem; border-radius: 6.25rem; background: var(--ink); color: #fff; font-family: var(--f-title); font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.0563rem; }
/* 모바일(.mo: 기기 또는 좁은 폭)에선 QR을 찍을 수 없어 로고·스토어 버튼 배치로 바꾼다. */
.mo #modal-all .qr { display: none; }
.mo #modal-all .logo { order: -1; margin: 0 0 0.25rem; }
.mo #modal-all img.logo { width: 6.4375rem; height: 2.5rem; }
.mo .cybos-logo { font-size: 1.125rem; letter-spacing: -0.0225rem; }
.mo .cybos-logo img { width: 2.5rem; height: 2.5rem; }
.mo .dl { display: block; }

.sheet { width: 48rem; max-width: 100%; max-height: 80vh; max-height: 80dvh; margin: auto auto 0; border-radius: 2.5rem 2.5rem 0 0; box-shadow: 0 -0.25rem 0.375rem rgba(0, 0, 0, 0.1); }
/* 스크롤해도 닫기 버튼이 남게 헤더를 고정한다. 흰 배경이 목록을 가리도록 여백을 padding으로 준다. */
.sheet .modal-head { position: sticky; top: 0; z-index: 1; margin: 0 0 1.25rem; padding: 2.5rem var(--gutter) 1.25rem; background: #fff; }
.sheet[open] { animation: sheet-up 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.sheet[open]::backdrop { animation: fade-in 0.35s ease-out; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }
.sheet.closing { animation: sheet-down 0.25s ease-in forwards; }
.sheet.closing::backdrop { animation: fade-out 0.25s ease-in forwards; }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet[open], .sheet[open]::backdrop { animation: none; } }
.stocks { display: flex; flex-direction: column; gap: 0.9375rem; counter-reset: n; }
.stocks li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; padding: 1.875rem 2.25rem 1.875rem 1.5rem; border: 1px solid var(--line); border-radius: 1.25rem; background: #fff; }
.num { font-family: var(--f-text); counter-increment: n; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.25rem; font-weight: 700; background: linear-gradient(135deg, #005331, #50b848); letter-spacing: -0.0375rem; }
.num::before { content: counter(n); }
.s-info { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.s-info strong { font-family: var(--f-title); font-size: 1.5rem; font-weight: 700; line-height: 1.4; color: var(--text); letter-spacing: -0.075rem; }
.s-info span { font-size: 1.125rem; line-height: 1.2; color: var(--mute); letter-spacing: -0.0338rem; }
.s-info em { font-style: normal; font-weight: 600; color: var(--text); }
.s-res { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: right; white-space: nowrap; }
.s-res b { white-space: pre; font-family: var(--f-title); font-size: 1.25rem; font-weight: 700; line-height: 1.4; color: var(--green); letter-spacing: -0.0625rem; }
.s-res b i { font-style: normal; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.1rem; }
.s-res span { font-size: 1.125rem; line-height: 1.2; color: var(--mute); letter-spacing: -0.0338rem; }
.more-link { font-weight: 700; line-height: 1.2; display: block; margin-top: 2.5rem; margin-left: auto; margin-right: auto; font-family: var(--f-text); font-size: 1.5rem; color: var(--text); letter-spacing: -0.045rem; white-space: pre; }
.list-notes { margin-top: 3.75rem; margin-bottom: 4.375rem; display: flex; flex-direction: column; gap: 0.625rem; }

/* 시안 값이 rem(768 기준 16px)이라 767 이하는 루트 크기만 폭에 맞춘다. */
/* 100vw가 스크롤바 폭을 포함하는 브라우저를 위해 main.js가 잰 차이(--sbw)를 뺀다. */
@media (max-width: 767px) { html { font-size: calc((100vw - var(--sbw, 0px)) / 48); } }