/* Hallmark · shape: Stat-Led (draw 33df04), hero changed to Stage on partner feedback 10-24 · genre: editorial · theme: brand · redesign: full
 * paper: oklch(97.6% 0.006 258) · accent: oklch(54% 0.19 34) · display: Pretendard 800 · body: Pretendard 400 · hero: Stage (copy left, usage figures and the Taco answer example right) · nav: masthead (logo centred, links left, contact right) · footer: statement · signature: the four shops month by month, 10월 measured, 11월 dated
 * axes: light/grotesk-heavy/warm · posture: Restrained · job: hire · imagery: screenshots 5 (capture.mjs) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a measurement service could still read as a promise page; the hero leads with the count of questions actually asked and the work index shows a 0.7% shop beside a 28.5% one */
/* Hallmark · dropped section "손님은 이제 지도 앱을 켜기 전에 AI에게 먼저 묻습니다" (three points) · its one fact, shops without an official homepage, moved into the 하는 일 lede; 11 sections down to 9 */
/* Hallmark · answered F6 · .price h2 is the words 한 가지 요금, the figure below it (.price .amt) carries tabular-nums */
/* Hallmark · reworded "손님이 AI에게 물을 때, 사장님 가게가 나오게 만듭니다" to "가게 하나를 두고, AI 네 곳에 물은 횟수" beside the figure 1,080번 · Stat-Led hero pairs the real count with its line, 38iii named the coloured word */
/* Hallmark · reworded "홈페이지 제작 업체와 무엇이 다른가요" to "납품하면 끝나는 홈페이지가 아닙니다" · finish review: the head worked on any agency page; the table's first row names the difference */
/* Hallmark · reworded "말이 아니라 숫자로 보여 드립니다" to "지금 함께하는 네 가게, 첫 측정" · the index heads the four shops it lists */
/* Hallmark · reworded "어떤 동네 이름으로 물었을 때 나왔나" (h3) to "동네 이름마다 결과가 다릅니다" (h2) · the case section now stands alone */
/* Hallmark · reworded "측정하고, 고치고, 다시 잽니다. 매달." to "측정하고, 고치고, 매달 다시 잽니다" · 38iii named the coloured phrase */
/* Hallmark · dropped heading "업종에 맞춰 따로 준비합니다" · its two links (restaurant, salon) sit in the work index head as #for */
/* Hallmark · moved "오늘 AI에게 우리 동네 가게를 물어보세요" from a closing section into the footer statement · footer: statement */
/* Hallmark · reworded figure "19%" to "19.4%" · the report's own figure, one decimal */
/* Hallmark · dropped image lockup-h-56-dark@2x.png · the paper is light now, the light lockup lockup-h-56@2x.png carries the same logo */
/* Hallmark · dropped image report-sample.jpg from the page · a fresh phone capture of the same report (img/work/report-phone.jpg) replaces it; the file stays as og:image */
/* Hallmark · waive 47c · the hero answer card is built HTML, captioned 예시 화면 · 권용 (partner) asked on 10-24 for the old Taco answer example back; no real AI app capture showing the shop yet */
/* Hallmark · partner feedback 10-24: hero copy by 권용, 1,080 figure removed (owners read 노출% and rank, not counts), region chart moved to sales material, method details cut, per-AI descriptions cut, compare head and 제작 비용 row, guarantee and 모두알고 AD added */
/* Hallmark · waive 79 · 185px of air under the hero equals the air above it · the hero is centred in its screen on purpose, partner copy and the answer card are kept short */
/* Hallmark · waive 44c · hero visual centre sits 78px from the text block centre · the usage figures stack above the answer card as the partner asked, so the right column runs taller */
@import url("./tokens.css");
@import url("./base.css");

body { word-break: keep-all; }
a.visually-hidden:focus-visible { position: fixed; left: var(--space-md); top: var(--space-md); width: auto; height: auto; overflow: visible; clip-path: none; white-space: nowrap; z-index: var(--z-modal); background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); outline: 2px solid var(--color-focus); outline-offset: 2px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
a:hover { text-decoration-color: var(--color-accent); }

/* buttons: one filled primary, the rest outlined */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--space-lg); border-radius: var(--radius-pill); font-weight: 700; font-size: var(--text-md); text-decoration: none; white-space: nowrap; border: var(--rule-hair) solid var(--color-ink); color: var(--color-ink); background: transparent; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn.primary:hover { background: var(--color-ink); border-color: var(--color-ink); }

/* nav: masthead, the logo centred */
.mast { border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); position: sticky; top: 0; z-index: var(--z-sticky-nav); }
.mast .container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 76px; }
.mast ul { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.mast ul a { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; }
.mast ul a:hover { color: var(--color-ink); text-decoration: underline; }
.mast ul a:focus-visible, .mast .logo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.mast .logo img { height: 44px; width: auto; }
.mast .contact { justify-self: end; min-height: 44px; }
@media (max-width: 60rem) { .mast ul { display: none; } .mast .container { grid-template-columns: auto minmax(0, 1fr); } .mast .logo img { height: 36px; } }

/* hero: Stage, the copy beside the usage figures and the answer example */
.hero { padding-block: var(--space-2xl); min-height: calc(100dvh - 77px); display: grid; align-items: center; }
.hero .grid { align-items: center; row-gap: var(--space-2xl); }
.hero .text { grid-column: 1 / 7; display: grid; gap: var(--space-lg); }
.hero h1 { font-size: var(--text-display); max-width: 9ch; }
.hero .lead { color: var(--color-ink-2); max-width: 34em; }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.hero .assure { font-size: var(--text-sm); color: var(--color-ink-2); }
.hero .assure a { text-decoration-color: var(--color-accent); }
.hero .side { grid-column: 7 / 13; display: grid; gap: var(--space-lg); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; }
.stats div { border-top: 2px solid var(--color-ink); padding-top: var(--space-sm); }
.stats dt { font-size: var(--text-sm); color: var(--color-muted); }
.stats dd { margin: var(--space-2xs) 0 0; display: grid; }
.stats b { font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stats small { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
.ask { margin: 0; background: var(--color-paper-2); border-radius: var(--radius-card); padding: var(--space-lg); display: grid; gap: var(--space-sm); }
.ask .q { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.ask .who { font-size: var(--text-sm); color: var(--color-muted); padding-top: var(--space-2xs); }
.ask .bubble { background: var(--color-paper); border-radius: var(--radius-card); padding: var(--space-xs) var(--space-sm); width: fit-content; }
.ask ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.ask li { display: flex; gap: var(--space-sm); align-items: baseline; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-card); color: var(--color-ink-2); }
.ask .rk { font-variant-numeric: tabular-nums; color: var(--color-muted); min-width: 1em; }
.ask li.me { background: var(--color-paper); color: var(--color-ink); font-weight: 700; outline: 1px solid var(--color-accent); outline-offset: -1px; }
.ask li.me .rk { color: var(--color-accent); }
.ask li.me small { margin-left: auto; font-size: var(--text-sm); color: var(--color-accent); }
.ask figcaption { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .hero { padding-block: var(--space-2xl); min-height: 0; } .hero .text, .hero .side { grid-column: 1 / -1; } }

/* work: an index of the four shops */
.work { padding-block: var(--space-xl) var(--section-gap); }
.work-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); flex-wrap: wrap; padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-ink); }
.work-head h2 { font-size: var(--text-title); }
.work-head p { font-size: var(--text-sm); color: var(--color-muted); }
.work-head p { display: flex; gap: var(--space-md); align-items: baseline; }
.work-head a { color: var(--color-ink); font-weight: 700; }
.shop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.shop .shot { grid-column: 1 / 4; aspect-ratio: 16 / 10; border-radius: var(--radius-card); outline: 1px solid var(--color-rule); outline-offset: -1px; }
.shop .shot img { object-position: top center; }
.shop.first .shot { grid-column: 1 / 6; }
.shop .who { grid-column: 4 / 10; padding-left: var(--space-lg); display: grid; gap: var(--space-2xs); }
.shop.first .who { grid-column: 6 / 10; }
.shop h3 { font-size: var(--text-title); }
.shop.first h3 { font-size: var(--text-2xl); }
.shop .meta { font-size: var(--text-sm); color: var(--color-muted); }
.shop .who a { font-size: var(--text-sm); color: var(--color-ink-2); width: fit-content; }
.trend { grid-column: 10 / 13; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); text-align: right; }
.trend span { display: block; font-size: var(--text-sm); color: var(--color-muted); }
.trend b { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.trend .next b { font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
.shop .rate { grid-column: 10 / 13; text-align: right; margin: 0; }
.shop .rate b { display: block; font-size: var(--text-section); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.shop .rate span { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
@media (max-width: 60rem) { .shop .shot, .shop.first .shot { grid-column: 1 / -1; } .shop .who, .shop.first .who { grid-column: 1 / 9; padding-left: 0; padding-top: var(--space-md); } .shop .rate, .trend { grid-column: 9 / -1; padding-top: var(--space-md); } }

/* case: the report beside the region chart */
.case { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.case .grid { align-items: center; row-gap: var(--space-xl); }
.case .phone { grid-column: 1 / 5; aspect-ratio: 780 / 1500; border-radius: var(--radius-card); outline: 1px solid var(--color-rule); outline-offset: -1px; }
.case .phone img { object-position: top center; }
.case .body { grid-column: 6 / 13; display: grid; gap: var(--space-lg); }
.case h2 { max-width: 14ch; }
.case .lead { color: var(--color-ink-2); }
.gets { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.gets li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.gets b { color: var(--color-ink); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.bars li { display: grid; grid-template-columns: 80px minmax(0, 1fr) 48px; gap: var(--space-md); align-items: center; font-size: var(--text-md); }
.bars .track { height: 12px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.bars .track i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--color-ink-2); }
.bars li:first-child .track i { background: var(--color-accent); }
.bars .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
.case .note { font-size: var(--text-sm); color: var(--color-muted); max-width: 52ch; }
@media (max-width: 60rem) { .case .phone { grid-column: 1 / -1; width: 100%; max-width: 420px; } .case .body { grid-column: 1 / -1; } }

/* how: rows */
.how { padding-block: var(--section-gap) var(--space-3xl); }
.how .head { grid-column: 1 / 8; display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.how .lead { color: var(--color-ink-2); }
.rows { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); counter-reset: st; }
.rows li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); counter-increment: st; }
.rows h3 { grid-column: 1 / 6; display: flex; gap: var(--space-md); align-items: baseline; }
.rows h3::before { content: counter(st); font-size: var(--text-md); font-weight: 700; color: var(--color-muted); font-variant-numeric: tabular-nums; min-width: 1.2em; }
.rows p { grid-column: 6 / 13; color: var(--color-ink-2); font-size: var(--text-lead); }
.rows small { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .how .head { grid-column: 1 / -1; } .rows h3, .rows p { grid-column: 1 / -1; } .rows p { padding-top: var(--space-sm); } }

/* engines: four across */
.engines { padding-block: var(--section-gap-s) var(--section-gap); }
.engines .head { grid-column: 1 / 9; display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.engines .lead { color: var(--color-ink-2); }
.engines dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; }
.engines dl div { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-top: 3px solid var(--color-ink); padding-top: var(--space-md); }
.engines .eng-n { margin: 0; font-size: var(--text-display-s); font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: var(--space-sm); }
.engines div:nth-child(3) .eng-n { color: var(--color-accent); }
.engines dt { font-size: var(--text-title); font-weight: 800; letter-spacing: -0.02em; }
.engines dd { margin: var(--space-sm) 0 0; color: var(--color-ink-2); }
.engines .fine { grid-column: 1 / 9; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.engines dl + .fine { margin-top: var(--space-xl); }
@media (max-width: 60rem) { .engines .head, .engines .fine { grid-column: 1 / -1; } .engines dl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); } }
@media (max-width: 40rem) { .engines dl { grid-template-columns: minmax(0, 1fr); } }

/* compare: a table */
.compare { padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.compare h2 { margin-bottom: var(--space-2xl); }
.compare .scroll { overflow-x: auto; }
.compare table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: var(--text-md); }
.compare th, .compare td { text-align: left; padding: var(--space-md) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.compare thead th { font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); border-bottom-color: var(--color-ink); }
.compare thead th.us { color: var(--color-ink); }
.compare tbody th { font-weight: 700; width: 24%; }
.compare td { color: var(--color-muted); }
.compare td.us { color: var(--color-ink); font-weight: 700; }

/* price: the offer */
.price { padding-block: var(--section-gap) var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-ink); }
.price .grid { row-gap: var(--space-xl); align-items: start; }
.price .offer { grid-column: 1 / 6; display: grid; gap: var(--space-md); }
.price h2 { font-size: var(--text-title); }
.fees { margin: 0; display: grid; gap: var(--space-md); }
.fees div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.fees dt { font-size: var(--text-lead); font-weight: 700; }
.fees dd { margin: 0; text-align: right; }
.fees b { display: block; font-size: var(--text-section); font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.fees small { font-size: var(--text-sm); color: var(--color-muted); }
.price .amt { font-size: var(--text-display); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; margin: 0; }
.price .amt small { font-size: var(--text-lead); font-weight: 700; letter-spacing: 0; margin-left: var(--space-xs); color: var(--color-ink-2); }
.price .vat, .price .ex { color: var(--color-muted); font-size: var(--text-sm); }
.price .btn.primary { width: fit-content; margin-top: var(--space-xs); }
.price ul { grid-column: 7 / 13; list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.price li { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-lead); }
.promise { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-card); margin-top: var(--space-xl); }
.promise h3 { grid-column: 1 / 5; }
.promise p { grid-column: 6 / 13; font-size: var(--text-lead); color: var(--color-ink); }
.price .soon { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }
.price .soon b { color: var(--color-ink); }
@media (max-width: 60rem) { .price .offer, .price ul { grid-column: 1 / -1; } .promise h3, .promise p { grid-column: 1 / -1; } .promise p { margin-top: var(--space-sm); } }

/* faq: rows beside the head */
.faq { padding-block: var(--section-gap-l) var(--section-gap); }
.faq h2 { grid-column: 1 / 5; max-width: 8ch; }
.faq .list { grid-column: 6 / 13; border-top: var(--rule-hair) solid var(--color-ink); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { list-style: none; cursor: pointer; padding-block: var(--space-lg); padding-right: var(--space-xl); font-size: var(--text-lead); font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: var(--space-xs); top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: translateY(-70%) rotate(45deg); transition: transform var(--dur-short) var(--ease-in-out); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--color-ink-2); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }
@media (max-width: 60rem) { .faq h2, .faq .list { grid-column: 1 / -1; } .faq h2 { max-width: none; margin-bottom: var(--space-xl); } }

/* footer: a statement */
footer { padding-block: var(--section-gap-s) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-ink); }
footer .say { grid-column: 1 / 11; font-size: var(--text-section); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; max-width: 22ch; text-wrap: balance; margin: 0; }
footer .try { grid-column: 1 / -1; margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink-2); }
footer .go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
footer .go a:not(.btn) { color: var(--color-ink-2); }
footer .base { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: start; margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
footer .base img { height: 28px; width: auto; }
footer .base p + p { margin-top: var(--space-2xs); }
footer .with { color: var(--color-ink-2); }
footer .with a { color: var(--color-ink); font-weight: 700; }
.draft { margin-left: var(--space-xs); padding-inline: var(--space-xs); border: 1px dashed var(--color-muted); border-radius: var(--radius-pill); }
@media (max-width: 40rem) { footer .base { grid-template-columns: minmax(0, 1fr); } }