/* 이음(ieum) — QT/필사 테마.
   cng-ui 토큰 변수 구조를 유지(하우스 스타일 호환)하되 값은 큐티 정서로 오버라이드:
   웜 아이보리 배경 · 세이지/올리브 액센트 · 은은한 골드 · 명조 본문. 모바일 1순위. */
:root{
  --bg:#f4efe4;          /* 웜 아이보리(한지 느낌) */
  --panel:#fffdf7;
  --panel2:#efe7d6;
  --line:#e2d9c4;
  --txt:#2f2b22;         /* 딥 잉크 */
  --muted:#8a8067;
  --accent:#6f7d56;      /* 차분한 세이지/올리브 */
  --accent-d:#56633f;
  --gold:#b48a3c;        /* 은은한 골드(경건) */
  --gold-d:#977122;
  --good:#5c8a4a; --ok:#7a9a3a; --warn:#b8870f; --bad:#bb5536; --dead:#a99f88;
  --radius:16px;
  --shadow:0 6px 22px rgba(75,60,30,.10);
  --fs:1;                /* 사용자 폰트 크기 배율(+/- 버튼) */
  --serif:"Nanum Myeongjo","Batang",serif;
  --sans:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);font-family:var(--sans);
  line-height:1.65;-webkit-text-size-adjust:100%;
}
a{color:var(--accent-d);text-decoration:none}

/* 상단바 */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line);
}
.brand{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:.04em}
.brand .dot{color:var(--gold)}
.topbar .spacer{flex:1}
.navlink{color:var(--muted);font-size:14px;padding:6px 8px;border-radius:10px}
.navlink.active,.navlink:hover{color:var(--accent-d);background:var(--panel2)}

/* 레이아웃 */
.wrap{max-width:680px;margin:0 auto;padding:18px 16px 96px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 18px;margin-bottom:16px;
}
.muted{color:var(--muted)}
.center{text-align:center}

/* 주제 헤더 */
.topic-theme{
  display:inline-block;font-size:13px;color:var(--gold-d);letter-spacing:.08em;
  border:1px solid var(--gold);border-radius:999px;padding:3px 12px;margin-bottom:10px;
}
.topic-ref{font-family:var(--serif);font-size:26px;font-weight:700;margin:2px 0 4px}
.topic-date{color:var(--muted);font-size:13px}

/* 본문(읽기/필사 대상) */
.verses{font-family:var(--serif);font-size:calc(15.3px*var(--fs));line-height:2.0;margin-top:8px}
.verses .v{display:block;margin:2px 0}
.verses .vn{color:var(--gold-d);font-size:12px;font-weight:700;vertical-align:.35em;margin-right:6px}

/* 역본 선택 */
.seg{display:inline-flex;background:var(--panel2);border-radius:999px;padding:3px;gap:2px}
.seg a{padding:6px 14px;border-radius:999px;font-size:14px;color:var(--muted)}
.seg a.on{background:var(--panel);color:var(--accent-d);box-shadow:var(--shadow);font-weight:700}

/* 입력 */
label{display:block;font-size:14px;color:var(--muted);margin:14px 0 6px}
textarea,input[type=text],input[type=password],input[type=number],select{
  width:100%;font:inherit;color:var(--txt);background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;
}
textarea.scribe{font-family:var(--serif);font-size:18px;line-height:1.9;min-height:160px;resize:vertical}
textarea{resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}

/* 버튼 */
.btn{
  display:inline-block;border:none;cursor:pointer;font:inherit;font-weight:700;
  background:var(--accent);color:#fff;border-radius:12px;padding:13px 18px;width:100%;
}
.btn:hover{background:var(--accent-d)}
.btn.gold{background:var(--gold)}.btn.gold:hover{background:var(--gold-d)}
.btn.ghost{background:var(--panel2);color:var(--accent-d)}

/* 정확도(격려 톤) */
.accuracy{margin-top:10px;font-size:14px;color:var(--muted)}
.acc-bar{height:8px;background:var(--panel2);border-radius:999px;overflow:hidden;margin-top:6px}
.acc-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold))}
.diff .eq{color:var(--txt)}
.diff .missing{color:var(--bad);text-decoration:underline;text-decoration-style:dotted}
.diff .wrong{color:var(--gold-d);background:#f3ead2;border-radius:4px}

/* 타자연습식 필사 — 각 절 본문 바로 아래에 입력(1:1 위치 동기화) */
.scribe-rows{display:flex;flex-direction:column}
.vrow{margin-bottom:16px}
.vref{font-family:var(--serif);font-size:calc(15.3px*var(--fs));line-height:1.95;color:var(--txt);margin-bottom:5px;word-break:break-all}
.vref .vn{color:var(--gold-d);font-size:calc(11px*var(--fs));font-weight:700;vertical-align:.4em;margin:0 4px 0 1px}
.ch{border-radius:3px;transition:background .05s,color .05s}
.ch.correct{color:var(--accent-d)}
.ch.wrong{color:#fff;background:var(--bad)}
.ch.cur{box-shadow:inset 0 -2px 0 var(--gold);background:#f6edd6}
.ch.todo{color:var(--muted)}
.vinput{
  font-family:var(--serif);font-size:calc(15.3px*var(--fs));line-height:1.7;
  width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 11px;
  background:var(--panel);color:var(--txt);resize:none;overflow:hidden;display:block;
}
.vinput:focus{outline:none;border-color:var(--accent)}

.typing-stat{margin-top:8px;font-size:calc(14px*var(--fs));color:var(--muted);display:flex;align-items:center;gap:10px}
.typing-stat #tstatText{flex:1}
.fs-ctrl{display:inline-flex;gap:6px}
.fs-ctrl button{width:36px;height:30px;border:1px solid var(--line);background:var(--panel2);color:var(--accent-d);border-radius:9px;font:inherit;font-weight:700;cursor:pointer}

/* 필사/묵상 집중 모드(공통) */
.focus-wrap{display:flex;flex-direction:column}
.focus-bar{display:none;align-items:center;justify-content:space-between;font-size:14px;color:var(--accent-d);font-weight:700;margin-bottom:4px}
.focus-bar .mini{border:1px solid var(--line);background:var(--panel2);color:var(--accent-d);border-radius:999px;padding:6px 16px;font:inherit;font-weight:700;cursor:pointer}
.scribe-rows{max-height:48vh;overflow-y:auto}     /* 일반 모드: 과도하게 길지 않게 */
.refl-q-label,.refl-label{display:block;font-size:14px;color:var(--muted);margin:8px 0 6px}
#reflection{min-height:120px;font-size:calc(17px*var(--fs))}
#submitBtn{margin-top:14px}

/* 키보드가 올라온 가시영역(절반)에 내용+입력 함께 담기 */
body.typing .topbar,body.typing .tabbar,body.typing #headcard,
body.typing .focus-wrap:not(.active){display:none}
body.typing .focus-wrap.active{
  position:fixed;left:0;right:0;top:0;z-index:60;margin:0;border-radius:0;
  box-shadow:none;border:none;padding:10px 14px;background:var(--bg);
}
body.typing .focus-bar{display:flex}
body.typing .focus-wrap.active .grow{flex:1 1 auto;min-height:0;overflow-y:auto}
body.typing .scribe-rows.grow{max-height:none;margin:6px 0 8px}
body.typing .typing-stat{margin-top:6px}
/* 묵상 모드: 질문 작게 고정, 입력이 공간 채움, 제출 하단 */
body.typing #reflWrap.active textarea#reflection{margin:6px 0}
body.typing #reflWrap.active .question{max-height:22vh;overflow-y:auto}
body.typing #reflWrap.active #submitBtn{margin-top:8px;flex:0 0 auto}

/* 질문 */
.question{
  font-family:var(--serif);font-size:18px;background:var(--panel2);
  border-left:3px solid var(--gold);border-radius:0 12px 12px 0;padding:12px 14px;margin:6px 0 2px;
}

/* 피드 카드 */
.entry{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;background:var(--panel)}
.entry .who{font-weight:700;color:var(--accent-d)}
.entry .when{color:var(--muted);font-size:12px;margin-left:6px}
.entry .scribe-text{font-family:var(--serif);color:var(--muted);font-size:15px;border-left:2px solid var(--line);padding-left:10px;margin:8px 0;white-space:pre-wrap}
.entry .refl{margin:8px 0;white-space:pre-wrap}
.reacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.react{border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:15px;user-select:none}
.react.on{border-color:var(--gold);background:#f6edd6}
.react .n{font-size:13px;color:var(--muted);margin-left:4px}

/* 알림/에러 */
.alert{border-radius:12px;padding:11px 14px;margin-bottom:14px;font-size:14px}
.alert.err{background:#f7e3da;color:var(--bad);border:1px solid #e5c3b4}
.alert.ok{background:#e9efdc;color:var(--accent-d);border:1px solid #cdd9b3}
.lock{text-align:center;color:var(--muted);padding:30px 10px}
.lock .big{font-size:40px}

/* 로그인 */
.auth{max-width:380px;margin:8vh auto 0;padding:0 18px}
.auth .brand{font-size:32px;text-align:center;display:block;margin-bottom:4px}
.auth .sub{text-align:center;color:var(--muted);margin-bottom:22px}
.auth .switch{text-align:center;margin-top:16px;font-size:14px}

/* 하단 탭바(모바일) */
.tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--panel);border-top:1px solid var(--line);z-index:20}
.tabbar a{flex:1;text-align:center;padding:10px 0 14px;color:var(--muted);font-size:11px}
.tabbar a .ic{display:block;font-size:20px;line-height:1.4}
.tabbar a.active{color:var(--accent-d)}

@media(min-width:720px){ .tabbar{display:none} }
@media(max-width:719px){ .topbar .navlink{display:none} }

/* 소개 페이지 */
.intro{max-width:560px;margin:0 auto;padding:6px 2px 40px}
.intro-hero{text-align:center;padding:28px 0 12px}
.intro-hero .brand{font-size:40px}
.intro-tag{font-family:var(--serif);color:var(--muted);font-size:16px;margin-top:6px}
.intro-lead{font-family:var(--serif);font-size:18px;line-height:1.9;margin:0}
.how-step{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.how-step:last-child{border-bottom:none}
.how-ic{font-size:24px;flex:0 0 auto}
.how-step .muted{font-size:13px;margin-top:2px}

/* 깔끔한 첫 화면(랜딩) */
.landing{max-width:480px;margin:0 auto;min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 4px}
.landing-hero{margin-bottom:36px}
.brand-lg{font-size:52px;display:block;line-height:1.1}
.landing-tag{font-family:var(--serif);font-size:18px;color:var(--accent-d);margin-top:14px;letter-spacing:.01em}
.landing-cta{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}
.landing-cta .btn{width:100%}

/* 공개 페이지는 풀높이 flex 컬럼 → 푸터를 하단에 고정 */
.wrap:has(.site-footer){min-height:100vh;display:flex;flex-direction:column;padding-bottom:18px}
.wrap:has(.site-footer) > .landing,
.wrap:has(.site-footer) > .intro,
.wrap:has(.site-footer) > .doc{flex:1 0 auto}

/* 하단 푸터 */
.site-footer{margin-top:auto;padding:22px 12px 18px;text-align:center;border-top:1px solid var(--line)}
.foot-links{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:13.5px}
.foot-links a{color:var(--accent-d);text-decoration:none;font-weight:600;padding:4px 2px}
.foot-links a:hover{text-decoration:underline}
.foot-links .sep{color:var(--line);font-weight:400}
.foot-copy{margin-top:10px;font-size:11px;color:var(--muted)}

/* 약관/방침/소개 문서 */
.doc{max-width:620px;margin:0 auto;padding:8px 2px 24px}
.doc-title{font-family:var(--serif);font-size:26px;font-weight:800;text-align:center;margin:14px 0 2px}
.doc-meta{text-align:center;font-size:12px;margin-bottom:16px}
.doc-body h2{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--accent-d);margin:18px 0 6px}
.doc-body h2:first-child{margin-top:0}
.doc-body p,.doc-body li{font-size:14.5px;line-height:1.8;color:var(--txt)}
.doc-body ul{margin:6px 0 6px 18px;padding:0}
.doc-body li{margin-bottom:4px}

/* 캘린더(관리) */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-head button{border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:6px 14px;font:inherit;cursor:pointer;color:var(--accent-d);font-weight:700}
.cal-title{font-family:var(--serif);font-size:18px;font-weight:700}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{text-align:center;font-size:12px;color:var(--muted);padding:4px 0}
.cal-cell{aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-size:15px;background:var(--panel)}
.cal-cell.empty{border:none;background:transparent;cursor:default}
.cal-cell.has{border-color:var(--gold);background:#f6edd6}
.cal-cell.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.cal-cell .mk{font-size:9px;color:var(--gold-d);margin-top:1px}
.cal-cell.sel .mk{color:#fff}

/* 우상단 히든 관리 버튼 — 거의 안 보이게 */
#adminDot{
  position:fixed;top:0;right:0;width:40px;height:40px;z-index:70;
  border:none;background:transparent;cursor:default;-webkit-tap-highlight-color:transparent;
  opacity:0;            /* 시각적으로 숨김. 위치를 아는 사람만 탭 */
}
/* 모달 */
.modal-back{
  display:none;position:fixed;inset:0;z-index:80;background:rgba(40,32,18,.45);
  align-items:center;justify-content:center;padding:20px;
}
.modal-back.on{display:flex}
.modal{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;width:100%;max-width:340px}
.modal-title{font-family:var(--serif);font-size:19px;font-weight:700;margin-bottom:12px}
.modal .btn{width:auto;flex:1}