/* ===================================================================
   AGI영컴 (AGIYOUNGCOME) — 공통 스타일시트
   랜딩 페이지(index.html)와 앱 화면(app.html)에서 함께 사용합니다.
   =================================================================== */

:root{
  --bg:#F1F3EC;
  --frame:#FBFBF6;
  --surface:#FFFFFF;
  --surface-2:#EAEEE3;
  --ink:#1F2A22;
  --muted:#5C6B5F;
  --faint:#8B978A;
  --line:#DCE3D6;
  --accent:#2F6F5E;
  --accent-ink:#F4FBF7;
  --accent-soft:#E1EEE6;
  --warm:#D9852E;
  --warm-soft:#F7E7D2;
  --good:#3D8361;
  --good-soft:#DDEFE3;
  --bad:#B84A3B;
  --bad-soft:#F6DFDA;
  --radius-frame:28px;
  --radius-card:16px;
  --radius-pill:999px;
  --shadow-frame:0 30px 60px -25px rgba(31,42,34,0.35), 0 2px 8px rgba(31,42,34,0.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10140F;
    --frame:#17201A;
    --surface:#1C271F;
    --surface-2:#232F26;
    --ink:#E8EEE4;
    --muted:#9FAF9A;
    --faint:#6E7C6D;
    --line:#2B372E;
    --accent:#6FBFA0;
    --accent-ink:#0E1B15;
    --accent-soft:#213A2E;
    --warm:#EEA75B;
    --warm-soft:#3A2C18;
    --good:#7ED0A3;
    --good-soft:#1E3A29;
    --bad:#E28879;
    --bad-soft:#3D2320;
    --shadow-frame:0 30px 60px -25px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.3);
  }
}
:root[data-theme="dark"]{
  --bg:#10140F;
  --frame:#17201A;
  --surface:#1C271F;
  --surface-2:#232F26;
  --ink:#E8EEE4;
  --muted:#9FAF9A;
  --faint:#6E7C6D;
  --line:#2B372E;
  --accent:#6FBFA0;
  --accent-ink:#0E1B15;
  --accent-soft:#213A2E;
  --warm:#EEA75B;
  --warm-soft:#3A2C18;
  --good:#7ED0A3;
  --good-soft:#1E3A29;
  --bad:#E28879;
  --bad-soft:#3D2320;
  --shadow-frame:0 30px 60px -25px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.3);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:40px 0 0;
  gap:32px;
}
a{color:inherit;}

/* ---- 공용 헤더 (사이트 상단바, 화면 양끝 배치) ---- */
.site-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 32px;
}
.site-header .mark{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-weight:700;
  font-size:20px;
  color:var(--ink);
  text-decoration:none;
}
.site-header .mark em{font-style:normal;color:var(--accent);}
.site-header nav a{
  font-size:14px;
  font-weight:700;
  color:var(--muted);
  text-decoration:none;
  padding:8px 4px;
}
.site-header nav a:hover{color:var(--accent);}

.phone{
  width:100%;
  max-width:408px;
  background:var(--frame);
  border-radius:var(--radius-frame);
  box-shadow:var(--shadow-frame);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:700px;
}

header.appbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 20px 14px;
  flex-shrink:0;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:7px;
}
.brand .mark{
  font-family:'Gowun Batang', 'Nanum Myeongjo', serif;
  font-weight:700;
  font-size:21px;
  color:var(--ink);
}
.brand .mark em{
  font-style:normal;
  color:var(--accent);
}
.backbtn{
  display:flex;
  align-items:center;
  gap:5px;
  background:none;
  border:none;
  color:var(--muted);
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  padding:6px 8px 6px 2px;
  cursor:pointer;
  border-radius:var(--radius-pill);
}
.backbtn:hover{color:var(--ink);}
.backbtn svg{width:18px;height:18px;}
.streak{
  display:flex;
  align-items:center;
  gap:5px;
  background:var(--warm-soft);
  color:var(--warm);
  font-size:13px;
  font-weight:700;
  padding:6px 12px 6px 9px;
  border-radius:var(--radius-pill);
}
.streak svg{width:15px;height:15px;}

main.screen{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:6px 20px 24px;
  overflow-y:auto;
}
main.screen[hidden]{display:none;}

/* ---- HOME ---- */
.home-hero{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-size:24px;
  line-height:1.5;
  text-wrap:balance;
  margin:14px 0 4px;
}
.home-hero em{font-style:normal;color:var(--accent);}
.home-sub{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.65;
  margin:0 0 22px;
}

.knowledge-preview{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-bottom:16px;
}
.kp-label{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
}
.kp-title{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-size:18px;
  font-weight:700;
  line-height:1.4;
}
.kp-snip{
  font-size:14px;
  color:var(--muted);
  line-height:1.65;
}

.stat-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:22px;
}
.stat-box{
  background:var(--surface-2);
  border-radius:var(--radius-card);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.stat-box .num{
  font-family:'Gowun Batang', serif;
  font-size:22px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.stat-box .lab{
  font-size:12.5px;
  color:var(--muted);
}

.spacer{flex:1;}

.btn{
  appearance:none;
  border:none;
  font-family:inherit;
  font-weight:700;
  font-size:16.5px;
  border-radius:var(--radius-card);
  padding:16px 20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  transition:transform .15s ease, filter .15s ease;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{background:var(--surface-2);color:var(--ink);}
.btn-ghost:hover{filter:brightness(0.97);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-ghost:hover{filter:brightness(1.15);} }
:root[data-theme="dark"] .btn-ghost:hover{filter:brightness(1.15);}
.btn-row{display:flex;gap:10px;}
.btn-row .btn{width:auto;flex:1;}
a.btn{text-decoration:none;}

/* ---- STUDY ---- */
.study-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:22px 20px;
  margin:10px 0 20px;
}
.study-tag{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-soft);
  padding:4px 10px;
  border-radius:var(--radius-pill);
  margin-bottom:12px;
}
.study-title{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-size:20px;
  font-weight:700;
  line-height:1.45;
  margin:0 0 12px;
  text-wrap:balance;
}
.study-body{
  font-size:15.5px;
  line-height:1.85;
  color:var(--ink);
}
.study-body strong{color:var(--accent);}

.seg{
  display:flex;
  background:var(--surface-2);
  border-radius:var(--radius-pill);
  padding:4px;
  gap:4px;
  margin-bottom:14px;
}
.seg-btn{
  flex:1;
  appearance:none;
  border:none;
  background:transparent;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  color:var(--muted);
  padding:9px 10px;
  border-radius:var(--radius-pill);
  cursor:pointer;
}
.seg-btn.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,0.08);}

.video-mock{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  background:linear-gradient(155deg, var(--surface-2), var(--line));
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  overflow:hidden;
}
.video-mock iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-mock .play{
  width:56px;height:56px;
  border-radius:50%;
  background:rgba(255,255,255,0.92);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
}
.video-mock .play svg{width:22px;height:22px;color:var(--accent);margin-left:3px;}
.video-mock .duration{
  position:absolute;
  right:10px;bottom:10px;
  background:rgba(0,0,0,0.6);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:3px 7px;
  border-radius:5px;
  font-variant-numeric:tabular-nums;
}
.video-mock .placeholder-note{
  position:absolute;
  top:10px;left:10px;
  font-size:10.5px;
  font-weight:700;
  color:var(--faint);
  background:rgba(255,255,255,0.7);
  padding:3px 7px;
  border-radius:5px;
}
:root[data-theme="dark"] .video-mock .placeholder-note{ background:rgba(0,0,0,0.5); color:var(--muted); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .video-mock .placeholder-note{ background:rgba(0,0,0,0.5); color:var(--muted); } }
.video-caption{
  font-size:15px;
  line-height:1.75;
  color:var(--ink);
}

/* ---- QUIZ ---- */
.quiz-progress{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0 22px;
}
.dots{display:flex;gap:6px;flex:1;}
.dot{
  height:6px;
  flex:1;
  background:var(--line);
  border-radius:var(--radius-pill);
  overflow:hidden;
}
.dot.filled{background:var(--accent);}
.qcount{
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.q-tag{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--warm);
  margin-bottom:10px;
}
.q-text{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-size:19px;
  line-height:1.55;
  font-weight:700;
  margin:0 0 20px;
  text-wrap:balance;
}
.options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}
.opt{
  text-align:left;
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--radius-card);
  padding:15px 16px;
  font-family:inherit;
  font-size:16px;
  color:var(--ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  transition:border-color .15s ease, background .15s ease;
}
.opt:hover:not(:disabled){border-color:var(--accent);}
.opt .letter{
  width:26px;height:26px;flex-shrink:0;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.opt:disabled{cursor:default;}
.opt.correct{border-color:var(--good);background:var(--good-soft);}
.opt.correct .letter{background:var(--good);color:var(--accent-ink);}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft);}
.opt.wrong .letter{background:var(--bad);color:var(--accent-ink);}
.opt.dim{opacity:.5;}

.feedback{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:14px 16px;
  border-radius:var(--radius-card);
  font-size:14.5px;
  line-height:1.6;
  margin-bottom:18px;
}
.feedback.good{background:var(--good-soft);color:var(--good);}
.feedback.bad{background:var(--bad-soft);color:var(--bad);}
.feedback svg{width:19px;height:19px;flex-shrink:0;margin-top:1px;}
.feedback .fb-text{color:var(--ink);}
.feedback .fb-text b{display:block;margin-bottom:2px;}

/* ---- RESULT ---- */
.result-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:18px 0 8px;
  gap:14px;
}
.ring-wrap{position:relative;width:148px;height:148px;}
.ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring-score{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.ring-score .n{
  font-family:'Gowun Batang',serif;
  font-size:34px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.ring-score .d{font-size:12px;color:var(--muted);margin-top:3px;}
.result-msg{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-size:18px;
  font-weight:700;
}
.result-sub{font-size:14px;color:var(--muted);max-width:280px;line-height:1.6;}

.history{
  margin:26px 0 22px;
}
.history-label{
  font-size:12.5px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:10px;
}
.bars{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:64px;
}
.bar-col{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  height:100%;
  justify-content:flex-end;
}
.bar-col .bar{
  width:100%;
  background:var(--surface-2);
  border-radius:5px 5px 3px 3px;
  position:relative;
  min-height:6px;
}
.bar-col.today .bar{background:var(--accent);}
.bar-col .day{font-size:10.5px;color:var(--faint);}

.toast{
  position:fixed;
  bottom:24px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);
  color:var(--frame);
  padding:12px 20px;
  border-radius:var(--radius-pill);
  font-size:14px;
  font-weight:500;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (prefers-reduced-motion: reduce){
  .btn, .opt, .toast{transition:none;}
}

/* ---- HERO (랜딩 페이지 상단, 풀블리드) ---- */
.hero-wrap{
  position:relative;
  width:100%;
  min-height:460px;
  overflow:hidden;
  isolation:isolate;
}
.hero-scene{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url('../images/hero-bg.jpg');
  background-size:cover;
  background-position:center 38%;
}
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(100deg, rgba(8,14,10,0.72) 0%, rgba(8,14,10,0.5) 34%, rgba(8,14,10,0.14) 58%, transparent 74%);
}
@media (max-width:620px){
  .hero-scrim{background:linear-gradient(180deg, rgba(8,14,10,0.4), rgba(8,14,10,0.68));}
}

.hero-inner{
  position:relative;
  z-index:1;
  max-width:1440px;
  margin:0 auto;
  padding:68px 48px;
  display:flex;
  align-items:center;
  gap:48px;
}

.hero-copy{
  flex:1.15;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  min-width:0;
}
.hero-eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#E3A34D;
}
.hero-h1{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-size:clamp(26px,4.4vw,36px);
  font-weight:700;
  line-height:1.35;
  color:#F5F2E9;
  margin:0;
  text-wrap:balance;
}
.hero-h1 em{font-style:normal;color:#E3A34D;}
.hero-h2{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-size:clamp(15px,2.2vw,17px);
  color:#CFE3D6;
  margin:0;
  line-height:1.5;
}
.hero-body{
  font-size:14.5px;
  line-height:1.85;
  color:#AFC2B4;
  margin:2px 0 6px;
}
.hero-cta{
  appearance:none;
  border:none;
  font-family:inherit;
  font-weight:800;
  font-size:15.5px;
  background:#E3A34D;
  color:#241505;
  padding:15px 26px;
  border-radius:14px;
  cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(227,163,77,0.6);
  transition:filter .15s ease, transform .15s ease;
  text-decoration:none;
  display:inline-block;
}
.hero-cta:hover{filter:brightness(1.06);}
.hero-cta:active{transform:scale(0.98);}

.tv{
  flex:0 0 auto;
  width:min(460px, 36vw);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.tv-body{
  position:relative;
  width:100%;
  background:linear-gradient(160deg,#2b2f33,#111417 65%,#050607);
  border-radius:16px;
  padding:12px;
  box-shadow:0 26px 50px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
}
.tv-led{
  position:absolute;
  bottom:5px;right:16px;
  width:5px;height:5px;
  border-radius:50%;
  background:#7ED0A3;
  box-shadow:0 0 6px 1px rgba(126,208,163,0.85);
}
.tv-screen{
  position:relative;
  aspect-ratio:16/9;
  border-radius:6px;
  background-image:url('../images/tv-bg.jpg');
  background-size:cover;
  background-position:72% 58%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,0.4), inset 0 14px 26px -14px rgba(0,0,0,0.6);
}
.tv-glow{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(8,14,10,0.1) 0%, rgba(8,14,10,0.6) 78%);
  animation:tvPulse 3.2s ease-in-out infinite;
}
@keyframes tvPulse{
  0%, 100%{ opacity:.4; filter:brightness(0.85); }
  50%{ opacity:1; filter:brightness(1.35); }
}
.tv-wave{
  position:absolute;
  left:0;right:0;bottom:0;
  height:36%;
  overflow:hidden;
  pointer-events:none;
}
.tv-wave::before{
  content:"";
  position:absolute;
  top:0;left:-40%;
  width:220%;height:100%;
  background:repeating-linear-gradient(112deg,
    rgba(255,255,255,0) 0px,
    rgba(255,255,255,0.22) 6px,
    rgba(255,255,255,0) 14px,
    rgba(255,255,255,0) 40px);
  mix-blend-mode:screen;
  animation:waveDrift 6.4s linear infinite;
}
.tv-wave::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent, rgba(6,12,9,0.35));
}
@keyframes waveDrift{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(40px); }
}

.tv-scanlines{
  position:absolute;inset:0;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 2px, transparent 3px);
  mix-blend-mode:multiply;
  opacity:.5;
}
.tv-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:9px 16px 10px;
  border-radius:11px;
  background:rgba(6,10,7,0.5);
  backdrop-filter:blur(2.5px);
  -webkit-backdrop-filter:blur(2.5px);
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset;
}
.tv-content .mark{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-weight:700;
  font-size:clamp(16px,3.4vw,20px);
  color:#FFFFFF;
  text-shadow:0 1px 2px rgba(0,0,0,0.9), 0 0 1px rgba(0,0,0,0.9), 0 0 16px rgba(227,163,77,0.6);
}
.tv-content .mark em{font-style:normal;color:#FFC97A;}
.tv-content .sub{
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
  color:#C9F1DC;
  text-shadow:0 1px 2px rgba(0,0,0,0.85);
}
.tv-stand-neck{
  width:14px;height:18px;
  margin:0 auto;
  background:linear-gradient(160deg,#2b2f33,#050607);
}
.tv-stand-base{
  width:130px;height:8px;
  margin:-2px auto 0;
  border-radius:5px;
  background:linear-gradient(160deg,#2b2f33,#050607);
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

@media (max-width:620px){
  .hero-inner{flex-direction:column;padding:44px 26px;text-align:center;}
  .hero-copy{align-items:center;}
  .hero-cta{align-self:center;}
  .tv{width:min(300px,72vw);order:-1;}
}
@media (prefers-reduced-motion: reduce){
  .tv-glow{animation:none;opacity:.85;}
  .tv-wave::before{animation:none;}
}

/* ---- 구분 바 ---- */
.section-divider{
  width:100%;
  height:5px;
  background:linear-gradient(90deg, var(--accent), var(--warm));
  opacity:.85;
}

/* ---- ARCHIVE (지난 학습 다시보기, 7개 고정 그리드 + 더보기) ---- */
.archive{
  width:100%;
  max-width:1640px;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:0 48px;
}
.archive-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.archive-title{
  font-family:'Gowun Batang','Nanum Myeongjo',serif;
  font-size:20px;
  font-weight:700;
}

.archive-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:22px;
}
@media (max-width:1100px){
  .archive-grid{grid-template-columns:repeat(4, 1fr);}
}
@media (max-width:620px){
  .archive-grid{grid-template-columns:repeat(2, 1fr);}
}

.arc-card{
  display:flex;
  flex-direction:column;
  text-align:left;
  opacity:0;
  transform:translateY(8px);
  animation:arcIn .35s ease forwards;
}
@keyframes arcIn{ to{opacity:1;transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .arc-card{animation:none;opacity:1;transform:none;} }
.arc-screen{
  position:relative;
  aspect-ratio:4/3;
  border-radius:14px;
  background:linear-gradient(160deg, var(--surface-2), var(--line));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom:9px;
}
.arc-day{
  position:absolute;
  top:9px;left:9px;
  background:var(--surface);
  color:var(--ink);
  font-size:11px;
  font-weight:700;
  padding:4px 9px;
  border-radius:var(--radius-pill);
  box-shadow:0 2px 6px rgba(0,0,0,0.14);
}
.arc-screen .arc-icon{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,0.12);
}
.arc-screen .arc-icon svg{width:14px;height:14px;color:var(--accent);}
.arc-body{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.arc-title{
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
}
.arc-meta{
  font-size:12.5px;
  color:var(--muted);
}
.arc-meta .arc-tag{color:var(--accent);font-weight:700;}

.archive-more{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding-top:4px;
}
.archive-more button{
  width:auto;
  padding:12px 28px;
}
.archive-more .done{font-size:13px;color:var(--muted);}

/* ---- 공용 안내(빈 상태/로딩) ---- */
.lede{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  max-width:420px;
}
.lede .kicker{
  font-size:12px;
  letter-spacing:.12em;
  color:var(--faint);
  font-weight:700;
  text-transform:uppercase;
}
.lede p{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

.site-footer{
  width:100%;
  margin-top:8px;
  background:#14181a;
  color:#8b9591;
  text-align:center;
  padding:36px 24px;
  font-size:12.5px;
  line-height:1.9;
}
.site-footer p{margin:0;}
.site-footer a{color:#c9a06a;text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}