/* anchak.app 공통 스타일 (index.html, android.html). 색은 앱 theme.ts 와 같다. */
:root{
  --lime:#B7F34B; --lime-soft:#F2FCDE; --forest:#153B24; --forest-2:#1F4A2F;
  --ink:#191F28; --body:#4E5968; --sub:#6B7684; --line:#E3E8EE; --bg:#F4F6F8; --card:#FFFFFF; --green:#12B76A;
  --radius:20px;
  --font:Onest,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Hiragino Sans","PingFang SC","Microsoft YaHei",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--forest)}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:12px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* 기기별 표시: <html> 에 is-ios / is-android / is-desktop 이 붙는다 (head 의 작은 스크립트) */
.show-android,.show-desktop{display:none!important}
.is-android .show-android{display:flex!important}
.is-android .hide-android{display:none!important}
.is-desktop .show-desktop{display:flex!important}

/* 헤더 */
.top{height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.top .logo img{height:24px;width:auto}
.nav{display:none;gap:32px}
.nav a{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.nav a:hover{color:var(--forest)}
.lang{position:relative;display:flex;align-items:center}
.lang svg{position:absolute;left:12px;pointer-events:none;color:var(--ink)}
.lang select{appearance:none;-webkit-appearance:none;height:40px;padding:0 34px 0 36px;border-radius:999px;border:1px solid #DDE2E8;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23191F28' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;font:600 14px var(--font);color:var(--ink);cursor:pointer}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 24px;border-radius:16px;font:700 17px var(--font);text-decoration:none;border:0;cursor:pointer;transition:transform .12s ease,background-color .15s}
.btn:active{transform:scale(.98)}
.btn svg{flex-shrink:0}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-lime{background:var(--lime);color:var(--forest);font-weight:800}
.btn-lime:hover{background:#A8E83A}
.btn-ghost{background:#fff;color:var(--forest);border:1px solid #DDE2E8;height:50px;font-size:15px}
.btn-ghost:hover{border-color:var(--forest)}
.btn-forest{background:var(--forest);color:#fff}
.btn-forest:hover{background:#0F2E1B}

/* 히어로 */
.hero{display:grid;gap:28px;padding:8px 0 0}
.pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:999px;background:var(--lime-soft);color:var(--forest);font-size:13px;font-weight:700}
.pill i{width:8px;height:8px;border-radius:4px;background:var(--green)}
.hero-copy{display:flex;flex-direction:column;gap:18px}
h1{text-wrap:balance;font-size:clamp(40px,6.2vw,64px);line-height:1.04;letter-spacing:-.035em;font-weight:800;color:var(--forest)}
.lead{font-size:17px;line-height:1.55;color:var(--body);max-width:540px}
.cta{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.cta .note{font-size:14px;color:var(--body);text-align:center}
.qr{align-items:center;gap:16px;padding:14px 18px 14px 14px;background:#fff;border:1px solid var(--line);border-radius:18px;align-self:flex-start;margin-top:6px}
.qr img{width:92px;height:92px;image-rendering:pixelated;border-radius:6px}
.qr b{display:block;font-size:15px}
.qr span{font-size:14px;color:var(--sub);line-height:1.45;display:block;max-width:220px}
.stage{position:relative;display:flex;justify-content:center;padding:12px 0 0}
.stage::before{content:"";position:absolute;top:8%;left:50%;width:min(420px,92%);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:var(--lime-soft)}
.phone{position:relative;width:min(292px,76vw);padding:8px;background:#101814;border-radius:46px;box-shadow:0 40px 70px -30px rgba(21,59,36,.5)}
.phone img{width:100%;border-radius:38px}

/* 숫자 */
.stats{margin-top:24px;position:relative;background:#fff;border-radius:22px;padding:22px 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
.stats b{display:block;font-size:32px;line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--forest)}
.stats span{font-size:14px;color:var(--sub);line-height:1.4}

/* 섹션 공통 */
section.block{padding:56px 0 0}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--green);margin-bottom:10px}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;letter-spacing:-.03em;font-weight:800;color:var(--ink);max-width:820px;text-wrap:balance}
.grid{display:grid;gap:14px;margin-top:22px}
.card{background:#fff;border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:8px}
.card h3{font-size:19px;line-height:1.3;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.card p{font-size:15px;line-height:1.55;color:var(--body)}
.num{width:30px;height:30px;border-radius:15px;background:var(--lime);color:var(--forest);font-size:14px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.step-head{display:flex;align-items:center;gap:10px}
.shot{margin-top:10px;background:var(--lime-soft);border-radius:16px;padding:14px}
.shot img{border-radius:14px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 24px -14px rgba(21,59,36,.35);width:100%}
.shot.grey{background:var(--bg)}
.tag{align-self:flex-start;height:26px;padding:0 10px;border-radius:999px;background:var(--forest);color:var(--lime);font-size:11px;font-weight:800;letter-spacing:.06em;display:inline-flex;align-items:center}

/* 런웨이 목록 */
.runway{list-style:none;margin-top:6px}
.runway li{display:flex;gap:14px;min-height:50px}
.runway .rail{width:22px;display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.runway .dot{width:22px;height:22px;border-radius:11px;border:2px solid #C9D1DA;display:flex;align-items:center;justify-content:center}
.runway .line{width:2px;flex-grow:1;background:#DDE2E8}
.runway li.done .dot{background:var(--forest);border-color:var(--forest)}
.runway li.done .line{background:var(--forest)}
.runway li.now .dot{background:var(--lime);border:5px solid var(--forest)}
.runway li:last-child{min-height:26px}
.runway .row{flex-grow:1;display:flex;justify-content:space-between;gap:10px;font-size:15px;font-weight:600}
.runway li.done .row span:first-child{color:var(--sub);text-decoration:line-through}
.runway li.now .row span:first-child{font-weight:800}
.st{font-size:13px;font-weight:700;color:var(--sub);white-space:nowrap}
.runway li.done .st{color:var(--green)}
.st-now{height:22px;padding:0 9px;border-radius:999px;background:var(--lime);color:var(--forest);font-size:11px;font-weight:800;display:inline-flex;align-items:center}

/* 쇼카드 데모 */
.demo{margin-top:10px;background:var(--bg);border-radius:16px;padding:16px;display:flex;flex-direction:column}
.demo .in{background:#fff;border:1px solid #DDE2E8;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.demo .k{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--green)}
.demo .in span:last-child{font-size:15px;font-weight:600;color:var(--forest);line-height:1.35}
.demo .arrow{height:46px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--forest)}
.demo .arrow i{width:26px;height:26px;border-radius:13px;background:var(--forest);display:inline-flex;align-items:center;justify-content:center}
.demo figure{background:#fff;border-radius:20px;padding:16px 16px 14px;box-shadow:0 20px 40px -24px rgba(21,59,36,.55);display:flex;flex-direction:column;gap:8px}
.demo .ko{font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:32px;line-height:1.15;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.demo hr{border:0;height:1px;background:#EEF1F4}
.demo figcaption{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--sub)}
.demo figcaption b{color:var(--green);white-space:nowrap}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tile{background:var(--forest);border-radius:var(--radius);padding:18px 16px;display:flex;flex-direction:column;gap:6px}
.tile b{font-size:28px;line-height:1.1;font-weight:800;color:var(--lime);letter-spacing:-.02em}
.tile strong{font-size:15px;line-height:1.35;color:#fff}
.tile span{font-size:13px;line-height:1.45;color:#C9D8CE}

/* 안드로이드 */
.android{margin-top:56px;background:var(--forest);border-radius:26px;padding:28px 22px;color:#fff;display:grid;gap:22px}
.android .tag{background:var(--lime);color:var(--forest)}
.android h2{color:#fff}
.android p{color:#D5E3D9;font-size:15px;line-height:1.6}
.steps{list-style:none;display:flex;flex-direction:column;gap:12px}
.steps li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.steps .h{display:flex;gap:12px;align-items:flex-start;font-size:16px;font-weight:700;line-height:1.4}
.steps .h .num{margin-top:-2px}
.steps .btn{height:48px;font-size:15px;width:100%}
.android .fine{font-size:13px;color:#A9C2B1}
.android .more{color:var(--lime);font-weight:700;font-size:15px}

/* FAQ */
.faq{margin-top:20px;background:#fff;border-radius:var(--radius);padding:4px 20px}
.faq details{border-bottom:1px solid #EEF1F4}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:16px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{transition:transform .2s;flex-shrink:0;color:var(--sub)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq p{padding:0 0 18px;font-size:15px;line-height:1.6;color:var(--body)}

/* 마무리 */
.end{padding:56px 0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.end .cta{flex-direction:column;width:100%}
footer{background:var(--forest);color:#C9D8CE;padding:36px 0 44px}
footer .wrap{display:flex;flex-direction:column;gap:16px}
footer img{height:24px;width:auto;align-self:flex-start}
footer p{font-size:14px;line-height:1.6;max-width:640px}
footer p b{color:#fff}
footer .links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;font-weight:600}
footer .links a{color:#fff}
footer small{font-size:13px;color:#A9C2B1}
footer .credits{font-size:11px;line-height:1.5;color:#86A391;max-width:760px}

/* 스토어 표시: 안드로이드 로봇 머리(구글 CC BY 3.0, 푸터에 출처), App Store 공식 배지(고치지 않고 그대로) */
.droid{display:block;width:26px;height:15px;flex-shrink:0}
.droid-tag{gap:7px}
.droid-tag .droid{width:20px;height:12px}
.as-badge{display:inline-flex;align-self:flex-start;border-radius:12px;line-height:0}
.as-badge img{display:block;height:56px;width:auto}
.cta:has(.as-badge){gap:14px}

/* 지금의 한국 (9/29): 앱이 공공데이터로 보여 주는 실시간 정보 */
.eyebrow .live-dot{display:inline-block;width:8px;height:8px;border-radius:4px;background:var(--green);margin-right:8px;vertical-align:1px;box-shadow:0 0 0 0 rgba(18,183,106,.5);animation:livePulse 2s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(18,183,106,.45)}70%{box-shadow:0 0 0 8px rgba(18,183,106,0)}100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}}
@media (prefers-reduced-motion:reduce){.eyebrow .live-dot{animation:none}}
.sub-lead{font-size:16px;line-height:1.6;color:var(--body);margin-top:12px;max-width:680px}
.card.live{gap:6px}
.live-ic{width:44px;height:44px;border-radius:14px;background:var(--lime-soft);color:var(--forest);display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.card.live .src{margin-top:auto;padding-top:10px;font-size:12px;font-weight:600;line-height:1.4;color:var(--sub)}
.live-note{margin-top:14px;font-size:13px;line-height:1.5;color:var(--sub)}

/* 태블릿 이상 */
@media (min-width:720px){
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));padding:28px 32px}
  .stats b{font-size:40px}
  .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span2{grid-column:span 2}
  .cta{flex-direction:row;flex-wrap:wrap}
  .cta .btn{padding:0 26px}
  .end .cta{flex-direction:row;width:auto}
  .cta:has(.as-badge){align-items:center}
}
@media (min-width:960px){
  .nav{display:flex}
  .wrap{padding:0 40px}
  .top{height:84px}
  .top .logo img{height:26px}
  .hero{grid-template-columns:1.25fr .75fr;align-items:center;gap:40px;padding:24px 0 40px}
  .stage::before{width:min(440px,118%)}
  .lead{font-size:20px}
  .phone{width:330px;border-radius:52px}
  .phone img{border-radius:44px}
  .stats{margin-top:0}
  section.block{padding:88px 0 0}
  .feature-show{display:grid!important;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:28px}
  .feature-show .demo{margin-top:0}
  .demo .ko{font-size:44px}
  .android{grid-template-columns:1fr 1fr;padding:44px;gap:40px;margin-top:88px}
  .faq{padding:4px 28px}
}

/* 한국어는 단어 중간에서 줄바꿈하지 않기 */
:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
/* 제목 줄바꿈 덩어리: 문구의 | 로 나눈 구절을 한 줄에 둔다. 화면보다 길 때만 안에서 줄바꿈 */
.seg{display:inline-block}
/* 일본어는 단어 중간에서 줄이 바뀌지 않게(크롬 지원), 안드로이드 단계 문구는 줄 길이를 고르게 */
:lang(ja){word-break:auto-phrase}
.steps .h{text-wrap:balance}