/* more. 영어 블로그 (tools/make_blog.py 가 쓰는 공용 스타일) */
:root{
  --bg:#FAF8F5; --card:#FFFFFF; --ink:#1E1C1A; --soft:#6A645D; --line:rgba(30,28,26,.10);
  --accent:#E8615A; --accent-ink:#FFFFFF; --code:#F1EDE7;
  --font:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#151413; --card:#1F1D1B; --ink:#F2EEE9; --soft:#A9A29A; --line:rgba(255,255,255,.09);
    --accent:#FF8A80; --accent-ink:#1A1210; --code:#2A2724; color-scheme:dark; }
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
.wrap{ max-width:760px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px)); }

.top{ border-bottom:1px solid var(--line); }
.top__in{ display:flex; align-items:center; justify-content:space-between; padding-block:16px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px; text-decoration:none; letter-spacing:-.02em; }
.brand img{ border-radius:7px; }
.brand span{ color:var(--accent); }
.top nav{ display:flex; gap:18px; font-size:14px; font-weight:600; }
.top nav a{ color:var(--soft); text-decoration:none; }
.top nav a:hover{ color:var(--ink); }

.hero{ padding:56px 0 18px; }
.hero h1{ font-size:clamp(34px,6vw,48px); letter-spacing:-.03em; margin:0 0 12px; }
.hero p{ color:var(--soft); font-size:17px; line-height:1.6; margin:0; max-width:56ch; }

.list,.more{ display:flex; flex-direction:column; gap:14px; }
.list{ padding:26px 0 70px; }
.post{ display:flex; gap:16px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:20px; text-decoration:none; transition:transform .15s ease, border-color .15s ease; }
.post:hover{ transform:translateY(-2px); border-color:var(--accent); }
.post img{ border-radius:13px; flex:none; }
.post div{ min-width:0; }
.post__meta{ font-size:13px; font-weight:600; color:var(--soft); margin-bottom:4px; }
.post h2{ font-size:19px; line-height:1.35; letter-spacing:-.01em; margin:0 0 6px; text-wrap:balance; }
.post p{ margin:0; color:var(--soft); font-size:15px; line-height:1.55; }

article{ padding:40px 0 10px; }
.crumb{ font-size:14px; color:var(--soft); margin-bottom:14px; }
.crumb a{ color:var(--accent); text-decoration:none; font-weight:600; }
article h1{ font-size:clamp(30px,5.4vw,42px); line-height:1.18; letter-spacing:-.03em; margin:0 0 14px; text-wrap:balance; }
.byline{ color:var(--soft); font-size:14px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.body{ font-size:18px; line-height:1.75; max-width:68ch; }
.body h2{ font-size:26px; line-height:1.3; letter-spacing:-.02em; margin:44px 0 10px; text-wrap:balance; }
.body h3{ font-size:20px; line-height:1.35; margin:30px 0 6px; }
.body h4{ font-size:17px; margin:22px 0 4px; }
.body p{ margin:14px 0; }
.body ul,.body ol{ padding-left:1.3em; margin:14px 0; }
.body li{ margin:6px 0; }
.body a{ color:var(--accent); text-underline-offset:3px; }
.body code{ background:var(--code); border-radius:6px; padding:1px 6px; font-size:.88em; }
.body blockquote{ margin:20px 0; padding:4px 18px; border-left:3px solid var(--accent); color:var(--soft); }
.body hr{ border:0; border-top:1px solid var(--line); margin:36px 0; }
.body figure{ margin:26px 0; }
.body figure img{ display:block; width:100%; max-width:100%; height:auto; border-radius:14px; border:1px solid var(--line); }
.body figure img[src*="-phone"]{ max-width:340px; margin:0 auto; border-radius:22px; }
.body .fine{ font-size:13px; color:var(--soft); margin-top:30px; }
.body figcaption{ font-size:14px; color:var(--soft); margin-top:8px; text-align:center; }

.app{ display:flex; gap:18px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:24px; margin:40px 0 50px; }
.app img{ border-radius:16px; flex:none; }
.app > div{ min-width:0; }
.app__plat{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.app h2{ margin:4px 0 6px; font-size:22px; letter-spacing:-.02em; }
.app p{ margin:0 0 14px; color:var(--soft); line-height:1.55; }
.app__btns{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{ display:inline-flex; align-items:center; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:15px; text-decoration:none; padding:11px 18px; border-radius:999px; }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.more{ padding-bottom:60px; }
.more > h2{ font-size:20px; margin:0 0 4px; }

.foot{ border-top:1px solid var(--line); padding-block:28px 40px; text-align:center; font-size:13px; color:var(--soft); }
.foot nav{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-bottom:12px; }
.foot a{ color:var(--soft); text-decoration:none; }
.foot p{ margin:6px 0; }
.mail{ user-select:all; }

@media (max-width:560px){
  .app{ flex-direction:column; }
  .post img{ width:44px; height:44px; }
  .body{ font-size:17px; }
}