/* xSapiens 공용 스타일 — 밝은 라이트 컨셉.
   에어리 라이트 배경 + 흰 카드 + 시안 액센트 + Pretendard. RTL은 논리 속성으로 대응. */

:root {
  color-scheme: light;
  --bg:          #f4f7fc;
  --bg-alt:      #ffffff;
  --panel:       #ffffff;
  --panel-edge:  #e4e9f2;
  --border:      #e4e9f2;
  --accent:      #0090cf;
  --accent-strong: #0077b0;
  --accent-soft: rgba(0,144,207,0.10);
  --text:        #1b2740;
  --muted:       #5b6b84;
  --faint:       #93a2ba;
  --mtt:         #0090cf;
  --glog:        #1f9d57;
  --radius:      14px;
  --shadow:      0 1px 2px rgba(27,39,64,.06), 0 12px 30px rgba(27,39,64,.08);
  --shadow-hover:0 2px 8px rgba(27,39,64,.10), 0 20px 44px rgba(27,39,64,.12);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  background:
    radial-gradient(ellipse 60% 50% at 78% 16%, rgba(0,144,207,0.08), transparent 60%),
    radial-gradient(ellipse 55% 45% at 12% 88%, rgba(0,144,207,0.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Noto Sans KR', 'Segoe UI', sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main { width: 100%; max-width: 60rem; margin: 0 auto;
  padding: clamp(.75rem, 2.5vh, 1.75rem) 22px 36px; }

/* ── 상단바: 로고 + 가로 언어목록 ── */
.topbar { border-bottom: 1px solid rgba(20,40,80,.08); }
.topbar-inner {
  max-width: 90rem; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 20px; flex-wrap: wrap;
}
.logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: -.01em;
  flex: 0 0 auto;
}
.logo .mark { width: 24px; height: 24px; border-radius: 7px; display: block; }
.lang-switch {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  justify-content: flex-end; flex: 1 1 auto; min-width: 0;
}
.lang-switch a { color: var(--faint); text-decoration: none; font-size: .74rem; white-space: nowrap; }
.lang-switch a:hover { color: var(--text); }
.lang-switch a[aria-current="page"] { color: var(--accent); font-weight: 600; }
/* 표준 PC 폭에서는 언어 목록을 한 줄로 고정 (좁은 창·모바일은 줄바꿈 허용 — 넘침 방지) */
@media (min-width: 1220px) { .lang-switch { flex-wrap: nowrap; } }

/* ── 히어로 ── */
header {
  text-align: start;
  width: max-content; max-width: 100%;
  margin: clamp(.5rem, 2vw, 1.1rem) auto clamp(1.3rem, 3.5vw, 1.9rem);
}
.eyebrow {
  display: block; color: var(--accent); font-size: .82rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: .6rem;
}
h1 {
  font-size: clamp(2rem, 6vw, 2.7rem);
  margin: 0 0 .1rem; letter-spacing: -.02em; font-weight: 800;
}
.lead {
  color: var(--muted); font-size: clamp(1.05rem, 3vw, 1.25rem);
  margin: 1.1rem 0 0; line-height: 1.5;
}
.lead .l1 { display: block; }
.lead .l2 { display: block; padding-inline-start: 2.8em; }
.emo { width: 1.25em; height: 1.25em; vertical-align: -.3em;
  margin-inline-start: 3px; margin-inline-end: 1px; }
.emo-smile { color: var(--accent); }

/* ── 앱 그리드 ── */
.apps { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .apps { grid-template-columns: 1fr; } }

.app {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.app:hover, .app:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--panel-edge));
  outline: none;
}

.app__top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.app__icon {
  width: 60px; height: 60px; flex: none;
  border-radius: 14px; display: block;
  box-shadow: 0 4px 14px rgba(27,39,64,.16);
}
.app__title { min-width: 0; }
.app__title h2 {
  font-size: 1.16rem; margin: 0; font-weight: 700; letter-spacing: -.01em; color: var(--text);
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
.app__title h2 .en { color: var(--faint); font-weight: 500; font-size: .84rem; letter-spacing: .01em; }
.platform { color: var(--faint); font-size: .8rem; margin: 3px 0 0; }

.app__desc { color: var(--muted); font-size: .92rem; margin: 0 0 14px; flex: 1 1 auto; }

/* 한글 깨짐 → 복구 데모 — 내용이 라틴/기술 문자라 항상 LTR */
.fixdemo {
  direction: ltr;
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.4;
  background: rgba(20,40,80,.04); border: 1px solid var(--panel-edge); border-radius: 10px;
  padding: 8px 11px; margin: 0 0 15px; max-width: 100%;
}
.fixdemo .broken {
  color: #d64545;
  text-decoration: underline wavy rgba(214,69,69,.5);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.fixdemo .arr { color: var(--faint); }
.fixdemo .fixed { color: var(--text); font-weight: 600; }
.fixdemo .fixed .ok { color: #1f9d57; margin-inline-start: 4px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; }
.tag {
  font-size: .74rem; line-height: 1; padding: 5px 9px; border-radius: 999px;
  background: rgba(20,40,80,.05); color: var(--muted); border: 1px solid var(--panel-edge);
}
.tag.free { color: #17924e; background: rgba(31,157,87,.12); border-color: rgba(31,157,87,.32); }

.cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .9rem; font-weight: 600; color: var(--accent);
}
.cta .arrow { transition: transform .18s ease; }
.app:hover .cta .arrow, .app:focus-visible .cta .arrow { transform: translateX(3px); }
[dir="rtl"] .app:hover .cta .arrow,
[dir="rtl"] .app:focus-visible .cta .arrow { transform: translateX(-3px); }

.app--mtt   { border-top: 3px solid color-mix(in srgb, var(--mtt) 70%, var(--panel-edge)); }
.app--glog  { border-top: 3px solid color-mix(in srgb, var(--glog) 70%, var(--panel-edge)); }
.app--berth { border-top: 3px solid color-mix(in srgb, #2f6fb0 75%, var(--panel-edge)); }
.app--berthdesk { border-top: 3px solid color-mix(in srgb, #1e88e5 75%, var(--panel-edge)); }
.app--mtt   .cta { color: var(--mtt); }
.app--glog  .cta { color: var(--glog); }
.app--berth .cta { color: #2f80c4; }
.app--berthdesk .cta { color: #1e88e5; }

/* Berth 데모의 왼쪽(터미널 명령) — 빨간 밑줄 없이 담백하게 */
.fixdemo .cmd { color: var(--muted); }

/* ── 알약 버튼(후원 페이지 등 공용) ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  text-decoration: none; transition: filter .15s ease, transform .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--accent-strong); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--panel-edge); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ── 준비 중 안내 ── */
.soon { text-align: center; color: var(--faint); font-size: .86rem; margin: 16px 0 0; }

/* ── 후원하기 버튼 (하트가 살아 움직인다) ── */
.support-cta { text-align: center; margin: 26px 0 0; }  /* 위로 튀는 하트가 윗줄에 안 닿게 여백 */
.support-cta a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .92rem; font-weight: 600; color: var(--muted);
  text-decoration: none; padding: 9px 18px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--panel-edge);
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.support-cta a:hover, .support-cta a:focus-visible {
  color: var(--text); border-color: var(--accent); transform: translateY(-1px); outline: none;
}
.support-cta .heart {
  position: relative; display: inline-block; flex: none;
  width: 1.2em; height: 1.2em; vertical-align: -.22em;
}
.support-cta .heart .hs { width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); will-change: transform; }
.support-cta .heart .hb { position: absolute; inset: 24%; opacity: 0;
  will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .support-cta .heart .hb { display: none; } }

/* ── 푸터 ── */
footer {
  margin-top: clamp(1.4rem, 4vw, 2.2rem);
  text-align: center; color: var(--faint); font-size: .82rem;
}
footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--panel-edge); }
footer a:hover { color: var(--accent); border-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .app, .cta .arrow, .btn, .support-cta a { transition: none; }
}