/* 앱 스토어 첫 화면: 상단 탭 + 오늘의 추천 큰 카드 + 섹션별 앱 목록(아이콘·이름·소개·열기) */
:root{
  --bg:#0e0e0e; --panel:#171717; --panel2:#201e1a; --line:#2e2b25; --fg:#ece6d8; --dim:#a39c8c; --fry:#d9b45f; --fryfg:#1a1206; --btn:#26231d;
  --head:'Space Grotesk','Noto Sans KR',system-ui,sans-serif; --body:'Noto Sans KR',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
  --bg:#f6f3ec; --panel:#ffffff; --panel2:#efe9da; --line:#e3ddcf; --fg:#1b1812; --dim:#6f6859; --fry:#a87a14; --fryfg:#fff; --btn:#efe9da; color-scheme:light}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.wrap{max-width:1080px;margin:0 auto;padding-bottom:56px}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--fry);outline-offset:2px}

.top{display:flex;align-items:center;gap:14px;padding-block:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--head);font-weight:700;letter-spacing:.02em}
.logo img{border-radius:9px}
.logo b{color:var(--fry)}
.tabs{display:flex;gap:4px;margin-inline:auto}
.tab{border:0;background:none;padding:9px 16px;border-radius:999px;color:var(--dim);font-weight:700}
.tab[aria-selected=true]{background:var(--fg);color:var(--bg)}
.srch{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:0 14px;color:var(--dim);min-width:200px}
.srch input{flex:1;min-width:0;border:0;background:none;padding:9px 0;outline:0}
.srch:focus-within{border-color:var(--fry)}

h1{font-family:var(--head);font-size:clamp(30px,5vw,44px);margin:22px 0 4px;letter-spacing:-.01em}
.date{color:var(--dim);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;min-height:1em}
.note{color:var(--dim);margin:12px 2px}

.feat{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.feat:empty{display:none}
.fc{position:relative;overflow:hidden;border-radius:26px;min-height:380px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;isolation:isolate;background:var(--panel2)}
.fc .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.fc:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.05) 45%,rgba(0,0,0,.55) 100%)}
.fc .lab{font-size:12px;font-weight:700;letter-spacing:.12em;opacity:.9}
.fc h2{font-family:var(--head);font-size:clamp(30px,4.4vw,44px);line-height:1.05;margin:6px 0 8px;text-wrap:balance}
.fc p{margin:0;max-width:36ch;opacity:.95;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fc .bar{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);border-radius:18px;padding:10px 12px}
.fc .bar .ic{width:46px;height:46px;font-size:19px}
.fc .bar div{flex:1;min-width:0}
.fc .bar b{display:block;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc .bar small{opacity:.8}
.fc .open{background:#fff;color:#111}

.sec{margin-top:44px}
.sh{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;margin-bottom:6px}
.sh h3{font-family:var(--head);font-size:24px;margin:0}
.sh span{color:var(--dim);font-size:14px;font-weight:700}
.list{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
.ic{flex:none;width:64px;height:64px;border-radius:22.5%;display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:26px;color:#fff;overflow:hidden;
  background:linear-gradient(145deg,var(--a,#555),var(--b,#222));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ic img{width:100%;height:100%;object-fit:cover;display:block}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-size:16px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--dim);font-size:13px;line-height:1.35}
.row .t em{display:block;font-style:normal;font-size:12px;color:var(--dim);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.official{display:inline-block;font-size:11px;font-weight:700;color:var(--fry);border:1px solid var(--fry);border-radius:4px;padding:0 5px;margin-right:6px;line-height:1.5}
.open{flex:none;background:var(--btn);color:var(--fry);font-weight:900;padding:7px 18px;border-radius:999px;font-size:14px}
.row:hover .open,.fc:hover .open{background:var(--fry);color:var(--fryfg)}

.foot{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);color:var(--dim);font-size:12px;display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between}
.foot a{text-decoration:underline}

@media (max-width:760px){
  .feat{grid-template-columns:1fr}
  .fc{min-height:330px}
  .list{grid-template-columns:1fr}
  .tabs{order:3;margin-inline:0;width:100%;overflow-x:auto}
  .srch{margin-left:auto;min-width:0;flex:1}
  .logo span{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}