/* Introduction-only styles; shared intro.css is also used by the guide. */
.intro-story { --coral:#b75b40; --lime:#e0edb5; }
.intro-story .header { background:#f7f7f0f5; backdrop-filter:blur(12px); }
.opening { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:34px; padding-block:36px 48px; }
.opening-copy h1 { font-size:clamp(36px,4.2vw,51px); line-height:1.24; letter-spacing:-.055em; }
.opening-copy h1::first-line { color:var(--green); }
.opening-copy .eyebrow { color:var(--coral); letter-spacing:.015em; max-width:360px; }
.opening-copy .lead { max-width:410px; margin:22px 0 25px; font-size:15px; line-height:1.85; }
.travel-hero { min-width:0; }
.travel-hero>img { width:100%; height:auto; border-radius:26px; }
.travel-hero figcaption { display:flex; align-items:center; justify-content:center; gap:9px; color:#775c43; font-size:12px; margin-top:10px; text-align:center; }
.travel-hero figcaption span { color:var(--coral); font-size:21px; }
.intro-story .features { padding-block:14px 38px; }
.features>.eyebrow { color:var(--coral); }
.features>h2 { font-size:32px; }
.features>.section-lead { font-size:14px; margin-top:12px; }
.feature-sections { display:grid; gap:24px; margin-top:28px; }
.feature-section { border-radius:26px; padding:28px 34px 16px; background:#e8eddf; }
.story-menu { background:#f2e7d8; }
.story-nearby { background:#e6eced; }
.feature-heading { margin-bottom:23px; }
.feature-heading .eyebrow { font-size:12px; letter-spacing:.015em; margin-bottom:8px; }
.feature-heading .eyebrow span { opacity:.6; padding-right:6px; }
.feature-heading h3 { font-size:28px; line-height:1.35; letter-spacing:-.04em; text-wrap:pretty; }
.feature-heading>p:last-child { font-size:14px; color:#5e6d59; margin-top:9px; line-height:1.8; max-width:770px; }
.benefit-art { display:grid; grid-template-columns:minmax(0,.7fr) 58px minmax(0,1.3fr); align-items:center; width:100%; max-width:865px; margin:auto; }
.scene-source { min-width:0; justify-self:center; width:100%; max-width:240px; }
.source-label { font-size:13px; text-align:center; color:#5a7150; font-weight:650; margin-bottom:12px; }
.flow-arrow { font-size:36px; color:#718563; text-align:center; }
.scene-result { min-width:0; }
.scan-payoff { margin-top:19px; white-space:pre-line; color:#546a4b; font-size:15px; font-weight:650; text-align:center; line-height:1.7; }
.capture-device { padding:6px; background:#fffef9; border-radius:22px; box-shadow:0 10px 23px #30402817; transform:rotate(-2deg); }
.device-top { display:flex; justify-content:space-between; gap:7px; align-items:center; font-size:10px; padding:10px 9px; line-height:1.3; }
.device-top>span { color:#748466; }
.device-top>span:first-child { font-size:20px; }
.viewfinder { position:relative; height:173px; display:grid; place-items:center; overflow:hidden; background:#21392a; border-radius:10px; }
.viewfinder-photo { width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.focus-frame { position:absolute; inset:25px 12px; border:1.5px solid #e5f0d7; border-radius:8px; pointer-events:none; }
.capture-hint { font-size:9px; color:#66735e; text-align:center; margin:9px 6px; }
.shutter-row { display:flex; justify-content:space-around; align-items:center; padding:3px 10px 10px; }
.shutter-row span { display:block; width:34px; height:34px; border:3px solid #63805b; border-radius:50%; box-shadow:inset 0 0 0 3px white; background:#99ab8b; }
.shutter-row i { width:12px; height:12px; border:1px solid #c3cebb; border-radius:3px; }
.menu-view { background:#ded9c5; padding:13px; }
.korean-menu { width:100%; padding:12px 9px; background:#fffef5; box-shadow:0 5px 12px #48372714; color:#263c27; transform:rotate(2deg); }
.korean-menu>strong { display:block; text-align:center; font-size:12px; line-height:1.4; letter-spacing:.06em; border-bottom:1px solid #dcdfce; padding-bottom:8px; }
.korean-menu>div { display:flex; justify-content:space-between; gap:6px; font-size:9px; margin-top:5px; padding:3px; }
.korean-menu b { font-weight:500; }
.menu-highlight { background:#e7edc1; }
.menu-view .focus-frame { inset:9px; border-color:#81946d; }
.restaurant-result,.result-surface { background:#fffef9; border:1px solid #e0e4d6; border-radius:18px; overflow:hidden; box-shadow:0 10px 24px #28362012; }
.result-bar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 17px; background:#fffef9; font-size:10px; color:#617154; border-bottom:1px solid #e8eadf; }
.result-bar>span:first-child { font-size:12px; color:var(--green); font-weight:700; }
.info-title { display:flex; align-items:center; gap:7px; margin-bottom:7px; line-height:1.4; font-size:14px; }
.info-title svg { width:18px; height:18px; flex:none; }
.about-block,.visiting-tips,.personal-info { padding:14px 19px; }
.about-block { background:#eff3e9; }
.about-block .info-title { color:#33563e; }
.restaurant-summary { color:#294532; font-size:17px; font-weight:650; line-height:1.55; letter-spacing:-.025em; }
.context-tags,.flavor-tags,.ingredient-tags { display:flex; flex-wrap:wrap; gap:5px; }
.context-tags { margin-top:9px; }
.context-tags span { background:#e1e8d8; border-radius:5px; padding:3px 7px; font-size:10px; color:#516b42; }
.price-line { display:flex; gap:12px; justify-content:space-between; align-items:baseline; margin-top:10px; padding-top:9px; border-top:1px solid #d9e1cf; font-size:11px; color:#5d7050; }
.price-line b { font-size:14px; color:#34563e; }
.visiting-tips { background:#eaf0f5; margin-top:3px; }
.visiting-tips .info-title { color:#3b6479; }
.visiting-tips>p:last-child { font-size:12px; line-height:1.75; color:#546976; }
.visiting-tips>p:last-child>strong { color:#345a71; }
.personal-info { background:#fff1d9; margin-top:3px; }
.personal-info .info-title { color:#825b23; }
.preference-example { display:block; margin:0 0 8px; font-size:10px; color:#856535; }
.personal-advice { border-left:2px solid #d1ac6a; padding-left:9px; margin-top:8px; }
.personal-advice>strong { display:block; font-size:12px; line-height:1.6; color:#6f5026; }
.personal-advice>p { font-size:12px; line-height:1.7; color:#7e6846; margin-top:2px; }
.secondary-menus { padding:10px 19px 12px; background:#fffdf6; border-top:1px solid #eee8db; }
.secondary-menus>p { color:#837861; font-size:10px; margin-bottom:8px; }
.secondary-menus>div { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.secondary-menus figure { display:flex; align-items:center; gap:7px; min-width:0; }
.secondary-menus img { width:39px; height:39px; object-fit:cover; border-radius:7px; flex:none; }
.secondary-menus figcaption { font-size:11px; color:#6b695d; line-height:1.5; }
.example-label { text-align:right; font-size:10px; color:#717966; margin-top:12px; }
.menu-photo-wrap { position:relative; }
.menu-dish { width:100%; height:194px; object-fit:cover; object-position:center 54%; }
.menu-photo-wrap>span { position:absolute; left:10px; bottom:10px; background:#fffdf5eb; color:#685c40; padding:3px 8px; border-radius:5px; font-size:9px; }
.menu-content { padding:15px 19px; }
.dish-heading { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-bottom:8px; }
.original-dish { font-size:11px; color:#9b7552; line-height:1.4; margin-bottom:4px; }
.dish-heading h4 { margin:0; font-size:21px; line-height:1.4; letter-spacing:-.03em; }
.dish-heading>span { white-space:nowrap; font-size:13px; color:#6a614e; font-weight:650; }
.result-summary { font-size:12px; line-height:1.8; color:#64725f; }
.flavor-tags { margin-block:10px 13px; }
.flavor-tags>span { font-size:10px; color:#82613f; background:#f4eadb; padding:3px 7px; border-radius:5px; }
.expanded-label { display:flex; justify-content:space-between; gap:8px; border-top:1px solid #e8e6dd; padding-block:9px; color:#647352; font-size:10px; }
.mini-heading { font-size:12px; color:#405c3b; font-weight:650; margin-bottom:6px; }
.ingredient-tags>span { font-size:10px; color:#69755f; background:#edf1e7; border-radius:5px; padding:3px 7px; }
.food-tip { background:#f5eddf; padding:11px 12px; border-radius:10px; margin-top:12px; }
.food-tip .info-title { font-size:12px; color:#795f39; }
.food-tip>p:last-child { font-size:12px; line-height:1.75; color:#756851; }
.ingredient-note { font-size:10px; color:#7b7b6b; line-height:1.7; margin-top:10px; }
/* Nearby is a single browse-and-compare scene, mirroring the product's list structure. */
.benefit-art.nearby-art { grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr); gap:30px; max-width:900px; }
.nearby-browser { min-width:0; background:#fffefa; border:1px solid #dce3df; padding:16px; border-radius:20px; box-shadow:0 10px 24px #28362010; }
.nearby-top { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:13px; }
.nearby-top>div { display:flex; align-items:center; gap:7px; font-size:17px; }
.nearby-top svg { color:#537460; width:20px; height:20px; flex:none; }
.nearby-top>span { color:#6a7d6b; font-size:10px; }
.nearby-filters { margin-bottom:12px; display:flex; gap:6px; align-items:start; }
.category-filter { display:flex; gap:10px; align-items:center; font-size:10px; border:1px solid #dce4d8; padding:6px 9px; border-radius:7px; white-space:nowrap; }
.food-filters { display:flex; flex-wrap:wrap; gap:5px; }
.food-filters>span { padding:6px 9px; background:#edf1e8; color:#617454; border-radius:7px; font-size:10px; }
.food-filters>span.active { color:white; background:#557849; }
.nearby-list { display:grid; gap:8px; }
.nearby-place { border:1px solid #e0e6db; background:white; border-radius:13px; overflow:hidden; }
.expanded-place { border-color:#8faa7a; }
.place-row { display:flex; gap:11px; align-items:center; padding:11px; }
.place-photo { width:72px; height:80px; border-radius:8px; object-fit:cover; flex:none; }
.place-info { min-width:0; flex:1; }
.place-info h4 { margin:0 0 3px; font-size:15px; line-height:1.4; color:#304b32; }
.place-category { font-size:10px; color:#7a826d; line-height:1.6; }
.ratings { display:flex; flex-wrap:wrap; gap:4px 11px; margin-top:6px; font-size:9px; color:#68715f; }
.ratings b { color:#936e35; font-weight:650; }
.place-distance { display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:10px; color:#788470; margin-top:5px; }
.place-distance strong { color:#49633c; }
.place-distance svg { width:12px; height:12px; }
.place-chevron { color:#768d64; font-size:18px; }
.place-expanded { padding:11px; border-top:1px solid #e7ebdf; background:#f5f8ef; }
.place-expanded>div:not(.directions) { display:flex; justify-content:space-between; gap:15px; font-size:10px; color:#7b866d; line-height:1.75; margin-bottom:6px; }
.place-expanded>div>strong { font-weight:500; text-align:right; color:#536745; }
.place-expanded strong b { font-weight:600; }
.directions { display:flex; align-items:center; gap:8px; background:#567647; border-radius:8px; padding:9px 11px; font-size:11px; color:white; margin-top:9px; }
.place-expanded .directions>strong { color:white; font-weight:600; text-align:left; }
.directions svg { width:16px; height:16px; flex:none; }
.directions>span { margin-left:auto; font-size:17px; }
.nearby-example { text-align:center; font-size:9px; color:#8a9080; margin-top:10px; }
.nearby-benefits { display:grid; gap:28px; }
.nearby-benefits>div { border-left:1px solid #b8c7bb; padding-left:19px; }
.benefit-number { display:block; font-size:12px; font-weight:700; color:#819578; margin-bottom:5px; }
.nearby-benefits h4 { font-size:19px; margin:0 0 7px; color:#355440; letter-spacing:-.03em; }
.nearby-benefits p { font-size:12px; line-height:1.85; color:#697b6d; }
.reference-note { max-width:850px; }
.discovery { background:#e9e6db; padding:35px 0; }
.discovery .eyebrow { color:#926249; margin-bottom:9px; }
.discovery h2 { font-size:29px; }
.discovery .section-lead { font-size:14px; margin-top:10px; }
.discovery-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0 12px; }
.discovery-card { display:grid; grid-template-columns:150px 1fr; background:#f9f8f1; border-radius:18px; overflow:hidden; }
.activity-art { display:flex; align-items:center; justify-content:center; gap:5px; position:relative; background:#e4eacb; padding:13px; }
.choice-card .activity-art img { width:46%; aspect-ratio:.9; object-fit:cover; border:3px solid white; border-radius:9px; transform:rotate(-7deg); }
.choice-card .activity-art img:last-child { transform:rotate(7deg); }
.choice-card .activity-art>span { display:grid; place-items:center; background:#f8dca8; color:#a95739; font-size:16px; font-weight:700; border-radius:50%; width:25px; height:25px; position:absolute; }
.board-card .activity-art { background:#eee1d0; gap:3px; }
.board-card .activity-art img { width:31%; aspect-ratio:.75; object-fit:cover; border:3px solid white; border-bottom-width:9px; transform:rotate(-7deg); }
.board-card .activity-art img:nth-child(2) { transform:rotate(5deg); margin-top:9px; }
.activity-copy { padding:20px 18px; }
.activity-copy h3 { font-size:18px; }
.activity-copy p { color:#697060; font-size:12px; line-height:1.8; margin-top:7px; }
.text-link { display:inline-flex; gap:25px; align-items:center; padding:10px 0; font-weight:650; font-size:14px; min-height:44px; border-bottom:1px solid #8b9980; }
.discovery .saved-note { max-width:600px; margin-top:10px; }
.intro-story .finish { max-width:760px; padding-block:37px 40px; }
.finish-spark { font-size:29px; color:var(--coral); display:block; margin-bottom:10px; }
.intro-story .finish h2 { font-size:30px; }
.intro-story .finish .section-lead { margin-block:12px 20px; }
@media(max-width:900px) and (min-width:701px) {
 .opening { gap:22px; }
 .opening-copy h1 { font-size:36px; }
 .feature-section { padding:24px 24px 15px; }
 .benefit-art { grid-template-columns:minmax(0,.65fr) 36px minmax(0,1.35fr); }
 .benefit-art.nearby-art { grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr); gap:20px; }
 .discovery-card { grid-template-columns:105px 1fr; }
}
@media(max-width:700px) {
 .intro-story .shell { width:calc(100% - 32px); }
 .opening { grid-template-columns:1fr; gap:23px; padding-block:29px 31px; }
 .opening-copy h1 { font-size:clamp(32px,9vw,43px); }
 .opening-copy .eyebrow { font-size:11px; margin-bottom:12px; }
 .opening-copy .lead { font-size:14px; margin:17px 0 19px; }
 .opening-copy .button { min-height:46px; padding:10px 18px; font-size:13px; }
 .travel-hero { max-width:420px; width:100%; margin:auto; }
 .travel-hero>img { border-radius:18px; }
 .travel-hero figcaption { font-size:11px; margin-top:6px; gap:6px; }
 .intro-story .features { padding-block:12px 28px; }
 .features>h2 { font-size:27px; }
 .features>.section-lead { font-size:13px; line-height:1.8; }
 .feature-sections { gap:18px; margin-top:22px; }
 .feature-section { padding:21px 10px 12px; border-radius:20px; }
 .feature-heading { padding-inline:5px; margin-bottom:19px; }
 .feature-heading .eyebrow { font-size:11px; }
 .feature-heading h3 { font-size:24px; line-height:1.38; }
 .feature-heading>p:last-child { font-size:12px; margin-top:9px; }
 .benefit-art { grid-template-columns:minmax(0,.53fr) 20px minmax(0,1.47fr); align-items:start; }
 .scene-source { max-width:160px; margin-top:45px; }
 .source-label { font-size:10px; line-height:1.5; margin-bottom:8px; }
 .flow-arrow { font-size:21px; margin-top:148px; }
 .scan-payoff { font-size:10px; margin-top:13px; line-height:1.85; white-space:normal; }
 .capture-device { padding:3px; border-radius:12px; transform:none; }
 .device-top { font-size:7px; gap:2px; padding:6px 3px; }
 .device-top>span:first-child { font-size:13px; }
 .viewfinder { height:130px; border-radius:6px; }
 .viewfinder-photo { object-fit:contain; }
 .focus-frame { inset:28px 4px; border-width:1px; border-radius:4px; }
 .capture-hint { font-size:7px; margin:7px 4px; line-height:1.5; }
 .shutter-row { padding:0 3px 6px; }
 .shutter-row span { width:23px; height:23px; border-width:2px; box-shadow:inset 0 0 0 2px white; }
 .shutter-row i { width:7px; height:7px; }
 .menu-view { padding:5px; }
 .korean-menu { padding:8px 3px; }
 .korean-menu>strong { font-size:8px; padding-bottom:6px; }
 .korean-menu>div { display:block; font-size:7px; padding:2px; margin-top:4px; line-height:1.5; }
 .korean-menu>div>span { display:block; text-align:right; font-size:6px; }
 .menu-view .focus-frame { inset:3px; }
 .restaurant-result,.result-surface { border-radius:13px; }
 .result-bar { font-size:8px; padding:8px 11px; gap:4px; }
 .result-bar>span:first-child { font-size:10px; }
 .about-block,.visiting-tips,.personal-info { padding:12px; }
 .info-title { font-size:12px; gap:5px; margin-bottom:7px; }
 .info-title svg { width:15px; height:15px; }
 .restaurant-summary { font-size:15px; line-height:1.6; }
 .context-tags { margin-top:8px; }
 .context-tags span { font-size:9px; padding:3px 5px; }
 .price-line { display:block; font-size:10px; padding-top:7px; margin-top:8px; }
 .price-line b { display:block; font-size:13px; margin-top:3px; }
 .visiting-tips>p:last-child,.personal-advice>p { font-size:12px; line-height:1.75; }
 .preference-example { font-size:9px; line-height:1.65; }
 .personal-advice>strong { font-size:11px; }
 .personal-advice { padding-left:7px; }
 .secondary-menus { padding:10px 12px; }
 .secondary-menus>p { font-size:9px; }
 .secondary-menus>div { gap:7px; }
 .secondary-menus figure { display:block; }
 .secondary-menus img { width:34px; height:34px; margin-bottom:5px; }
 .secondary-menus figcaption { font-size:9px; }
 .example-label { font-size:9px; margin-top:10px; }
 .menu-dish { height:145px; }
 .menu-photo-wrap>span { left:6px; bottom:6px; right:6px; font-size:8px; padding:3px 5px; text-align:center; }
 .menu-content { padding:12px; }
 .dish-heading { gap:5px; flex-wrap:wrap; }
 .dish-heading h4 { font-size:18px; }
 .dish-heading>span { font-size:12px; }
 .original-dish { font-size:10px; }
 .result-summary { font-size:12px; line-height:1.75; }
 .flavor-tags>span,.ingredient-tags>span { font-size:9px; padding:3px 5px; }
 .expanded-label { font-size:9px; }
 .mini-heading { font-size:11px; }
 .food-tip { padding:10px; border-radius:8px; }
 .food-tip .info-title { font-size:11px; align-items:start; }
 .food-tip>p:last-child { font-size:12px; }
 .ingredient-note { font-size:9px; }
 .benefit-art.nearby-art { grid-template-columns:1fr; gap:17px; }
 .nearby-browser { padding:11px; border-radius:16px; }
 .nearby-top { gap:7px; }
 .nearby-top>div { font-size:16px; }
 .nearby-top>span { font-size:9px; text-align:right; }
 .nearby-filters { gap:5px; }
 .category-filter { gap:7px; padding:5px 7px; font-size:9px; }
 .food-filters { gap:4px; }
 .food-filters>span { padding:5px 7px; font-size:9px; }
 .place-row { padding:9px; gap:8px; }
 .place-photo { width:59px; height:77px; }
 .place-info h4 { font-size:14px; }
 .place-category { font-size:9px; }
 .ratings { font-size:9px; gap:3px 8px; }
 .place-distance { font-size:10px; }
 .place-chevron { font-size:16px; }
 .nearby-example { font-size:8px; }
 .nearby-benefits { grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
 .nearby-benefits>div { padding-left:8px; }
 .benefit-number { font-size:10px; }
 .nearby-benefits h4 { font-size:13px; margin-bottom:5px; line-height:1.5; }
 .nearby-benefits p { font-size:10px; line-height:1.8; }
 .discovery { padding-block:28px; }
 .discovery h2 { font-size:25px; }
 .discovery .section-lead { font-size:13px; }
 .discovery-cards { grid-template-columns:1fr; gap:12px; margin-top:18px; }
 .discovery-card { grid-template-columns:102px 1fr; border-radius:14px; }
 .activity-art { padding:9px; }
 .activity-copy { padding:16px 13px; }
 .activity-copy h3 { font-size:16px; }
 .activity-copy p { font-size:11px; line-height:1.8; margin-top:6px; }
 .intro-story .finish { padding-block:30px 33px; }
 .intro-story .finish h2 { font-size:25px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }