/* yyg/apps — mobile-only static site
   Tokens are the single source of truth; change here, not in the pages. */
:root{
  --bg:#f4f2ee; --surface:#faf9f7; --line:#e0dcd3; --line-soft:#eeebe4;
  --ink:#1a1a19; --body:#4a463f; --muted:#6b665d; --faint:#8a857c; --dim:#a29d92;
  --accent:#1f6f5c; --accent-bg:#eff5f3; --accent-line:#cfe0da;
  --r-card:14px; --r-btn:8px; --r-icon:13px; --r-pill:99px;
  --pad:20px;
  --sans:'IBM Plex Sans KR',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
/* 모바일 전용. 데스크톱에서는 390px 컬럼을 가운데 정렬만 한다. */
.shell{max-width:390px; margin:0 auto; min-height:100vh; background:var(--bg);
  display:flex; flex-direction:column}
a{color:var(--accent); text-decoration:none}
a:hover{color:#14483c}

/* header */
.bar{padding:22px var(--pad) 0; display:flex; justify-content:space-between; align-items:center}
.wordmark{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink)}
.wordmark span{color:var(--accent)}
.subbar{padding:18px var(--pad); display:flex; align-items:center; gap:12px;
  background:var(--surface); border-bottom:1px solid var(--line)}
.subbar .back{font-family:var(--mono); font-size:16px; color:#5c584f; line-height:1}
.subbar h1{margin:0; font-size:14px; font-weight:500; color:var(--ink)}

/* hero */
.hero{padding:32px var(--pad) 20px; display:flex; flex-direction:column; gap:10px}
.hero h1{margin:0; font-size:24px; font-weight:600; line-height:1.35; letter-spacing:-.01em}
.hero p{margin:0; font-size:14px; line-height:1.7; color:#5c584f}

/* layout */
.stack{padding:4px var(--pad) 20px; display:flex; flex-direction:column; gap:12px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px; display:flex; flex-direction:column; gap:14px}
.card--pad{padding:20px; gap:16px}
.card--rows{padding:6px 18px; gap:0}
.card--dashed{background:none; border:1px dashed #cec9be; flex-direction:row; align-items:center; gap:14px}

/* app row inside card */
.app-head{display:flex; gap:14px; align-items:center}
.icon{width:52px; height:52px; flex:none; border-radius:var(--r-icon); background:#e4e0d8;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:9px; color:var(--faint); overflow:hidden}
.icon img{width:100%; height:100%; object-fit:cover}
.icon--lg{width:64px; height:64px; border-radius:15px}
.icon--empty{background:none; border:1px dashed #cec9be; font-size:16px; color:#b3aea3}
.app-meta{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.app-name{font-size:16px; font-weight:600; color:var(--ink)}
.app-name--lg{font-size:19px}
.app-desc{font-size:13px; color:var(--muted)}
.pkg{font-family:var(--mono); font-size:11px; color:var(--faint)}
.badge{font-family:var(--mono); font-size:10px; color:var(--accent);
  border:1px solid var(--accent-line); background:var(--accent-bg);
  padding:4px 7px; border-radius:var(--r-pill)}
.tags{display:flex; gap:6px; flex-wrap:wrap}
.tag{font-family:var(--mono); font-size:10px; color:var(--muted);
  background:#f2f0eb; padding:4px 8px; border-radius:4px}
.body{font-size:14px; line-height:1.75; color:var(--body); margin:0}

/* buttons — hit target 48px */
.btns{display:flex; flex-direction:column; gap:9px}
.btn{height:48px; border-radius:var(--r-btn); display:flex; align-items:center;
  justify-content:center; font-size:14px; font-weight:500}
.btn--primary{background:var(--ink); color:var(--surface)}
.btn--primary:hover{background:#000; color:var(--surface)}
.btn--ghost{border:1px solid #d8d4cb; color:var(--ink)}
.btn--ghost:hover{border-color:#b3aea3; color:var(--ink)}

/* link + stat rows */
.row{padding:14px 0; display:flex; justify-content:space-between; align-items:center;
  font-size:14px; color:var(--ink); border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:none}
.row .chev{color:#b3aea3}
.row--stat{font-size:13px}
.row--stat .k{color:var(--faint)}

/* labels + legal */
.label{font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint)}
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{font-size:13px; color:#5c584f; border:1px solid #ded9d0; padding:8px 13px;
  border-radius:var(--r-pill)}
.tab[aria-current="page"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.legal h2{margin:0; font-size:18px; font-weight:600}
.legal h3{margin:0; font-size:14px; font-weight:600}
.sec{display:flex; flex-direction:column; gap:8px}
.sec p, .sec li{font-size:14px; line-height:1.8; color:var(--body); margin:0}
.sec ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px}
/* 본문 채우기 전 자리표시. 실제 문구 넣을 때 통째로 지울 것. */
.todo{min-height:52px; background:var(--bg); border-radius:6px; padding:12px;
  font-family:var(--mono); font-size:11px; color:var(--dim)}

/* shots */
.shots{display:flex; gap:10px}
/* 시안은 9:19였으나 실제 스토어 스크린샷이 9:16이라, 그대로 두면 cover가 좌우를
   잘라 글자 첫 칸이 날아간다(2026-09-08 실측). 원본 비율에 맞춘다. */
.shot{flex:1; aspect-ratio:9/16; border-radius:8px; overflow:hidden;
  background:repeating-linear-gradient(135deg,#f2f0eb 0 6px,#e9e6df 6px 12px);
  display:flex; align-items:flex-end; padding:8px;
  font-family:var(--mono); font-size:10px; color:var(--faint)}
.shot img{width:100%; height:100%; object-fit:cover; border-radius:8px}
/* padding:8px은 "스크린샷 1" 자리표시 글자를 위한 여백이다. 실제 이미지가 들어가면
   그 여백만큼 칸이 세로로 길어져 cover가 좌우를 잘라먹는다(2026-09-08 실측). */
.shot:has(img){padding:0}

/* footer */
.foot{margin-top:auto; padding:20px; background:var(--surface); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px}
.foot nav{display:flex; gap:18px; flex-wrap:wrap}
.foot a{font-size:13px; color:#5c584f}
.foot .mail{font-family:var(--mono); font-size:11px; color:var(--dim)}
.foot--bare{background:none; border-top:none; font-family:var(--mono);
  font-size:11px; color:var(--dim)}