/* =========================================================
   세종호랑이 메인 — 몬드리안 파스텔 테마
   아래 :root 값만 바꾸면 전체 색·투명도·선 굵기가 바뀝니다.
   ========================================================= */
:root {
  --base: #FFFDF9;          /* 흰 면 */
  --ink: #1C1B18;           /* 글자 */
  --ink-soft: #3D3A34;      /* 보조 글자 */
  --red: 242, 164, 155;     /* 파스텔 빨강 (RGB) */
  --blue: 147, 180, 230;    /* 파스텔 파랑 (RGB) */
  --yellow: 245, 220, 122;  /* 파스텔 노랑 (RGB) */
  --color-alpha: .3;        /* 색면 투명도 30% */
  --line-alpha: .3;         /* 격자선 투명도 30% */
  --line-w: 10px;           /* 격자선 굵기 */

  --line: rgba(17, 17, 17, var(--line-alpha));
  --fill-red: linear-gradient(rgba(var(--red), var(--color-alpha)), rgba(var(--red), var(--color-alpha))), var(--base);
  --fill-blue: linear-gradient(rgba(var(--blue), var(--color-alpha)), rgba(var(--blue), var(--color-alpha))), var(--base);
  --fill-yellow: linear-gradient(rgba(var(--yellow), var(--color-alpha)), rgba(var(--yellow), var(--color-alpha))), var(--base);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--base); color: var(--ink); font-family: 'IBM Plex Sans KR', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: #000; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, label:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
input, textarea, button, select { font-family: inherit; color: var(--ink); }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }
.num { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px; }
.muted { font-size: 14px; color: var(--ink-soft); }

/* ---------- 격자 (칸 사이로 선이 비쳐 보임) ---------- */
.m-grid { background: var(--line); display: flex; flex-direction: column; gap: var(--line-w); padding: var(--line-w); min-height: 100vh; }
.m-row { display: flex; flex-wrap: wrap; gap: var(--line-w); }
.m-col { display: flex; flex-direction: column; gap: var(--line-w); }
.cell { background: var(--base); padding: 32px; min-width: 0; }
.red { background: var(--fill-red); }
.blue { background: var(--fill-blue); }
.yellow { background: var(--fill-yellow); }
.inner-grid { display: flex; flex-wrap: wrap; gap: var(--line-w); background: var(--line); padding: var(--line-w); }
.inner-grid > * { background: var(--base); }

/* ---------- 공통 버튼·입력 ---------- */
/* 버튼: 테두리 + 부드러운 그림자로 일반 글자와 구분 */
:root {
  --btn-shadow: 0 2px 0 rgba(28, 27, 24, .9), 0 6px 14px rgba(28, 27, 24, .18);
  --btn-shadow-hover: 0 4px 0 rgba(28, 27, 24, .9), 0 10px 18px rgba(28, 27, 24, .2);
  --btn-shadow-active: 0 1px 0 rgba(28, 27, 24, .9), 0 2px 6px rgba(28, 27, 24, .15);
  --fill-yellow-strong: linear-gradient(rgba(var(--yellow), .75), rgba(var(--yellow), .75)), var(--base);
}
.btn, #add-btn, #send-request-btn, #auth-submit-btn, #deposit-submit-btn, .secondary-btn, #auth-btn,
.menu-btn, .todo-actions button, .save-btn, .cancel-btn, .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 700; white-space: nowrap;
  border: 2px solid var(--ink); border-radius: 6px; background: var(--base); color: var(--ink);
  box-shadow: var(--btn-shadow); cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover, #add-btn:hover, #send-request-btn:hover, #auth-submit-btn:hover, #deposit-submit-btn:hover, .secondary-btn:hover, #auth-btn:hover,
.menu-btn:hover, .todo-actions button:hover, .save-btn:hover, .cancel-btn:hover, .chip:hover {
  transform: translateY(-2px); box-shadow: var(--btn-shadow-hover);
}
.btn:active, #add-btn:active, #send-request-btn:active, #auth-submit-btn:active, #deposit-submit-btn:active, .secondary-btn:active, #auth-btn:active,
.menu-btn:active, .todo-actions button:active, .save-btn:active, .cancel-btn:active, .chip:active {
  transform: translateY(1px); box-shadow: var(--btn-shadow-active);
}
.btn-solid, #send-request-btn, #auth-submit-btn, #deposit-submit-btn { background: var(--ink); color: var(--base); }
.btn-solid:hover, #send-request-btn:hover, #auth-submit-btn:hover, #deposit-submit-btn:hover { background: #000; color: var(--base); }
.btn-yellow, #add-btn, #auth-btn { background: var(--fill-yellow-strong); }
.btn-sm, .todo-actions button, .save-btn, .cancel-btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
.chip { min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 500; font-size: 14px; }
.field, #daily-goal-input, #request-input, .auth-form input, .auth-form select, .time-selector-group select {
  border: 2px solid var(--ink); border-radius: 6px; background: transparent;
  font-size: 15px; padding: 0 12px; min-height: 44px; color: var(--ink);
}
#request-input { width: 100%; min-height: 110px; padding: 14px; line-height: 1.7; resize: vertical; }

/* ---------- ① 메뉴 ---------- */
.logo { flex: 1 1 260px; display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 24px 32px; }
.logo-mark { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 34px; height: 34px; padding: 3px; background: var(--line); flex: none; }
.logo-mark span:nth-child(1) { background: var(--fill-red); }
.logo-mark span:nth-child(2), .logo-mark span:nth-child(3) { background: var(--base); }
.logo-mark span:nth-child(4) { background: var(--fill-blue); }
.logo-text { font-weight: 700; font-size: 22px; letter-spacing: .02em; }
.menu { flex: 3 1 640px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding: 20px 28px; }
.menu-btn { font-size: 15px; }
.menu-btn[aria-expanded="true"] { background: var(--fill-yellow-strong); }
.menu-btn[aria-expanded="true"]::after { content: ""; display: inline-block; margin-left: 2px; border: 5px solid transparent; border-top-color: currentColor; transform: translateY(3px) rotate(180deg); }
.menu-btn[data-menu][aria-expanded="false"]::after { content: ""; display: inline-block; margin-left: 2px; border: 5px solid transparent; border-top-color: currentColor; transform: translateY(3px); }

/* 하위 목록 패널 (finetnc.co.kr처럼 모든 메뉴의 하위 항목을 한 번에 보여 줌) */
.mega { padding: 28px 32px 32px; }
.mega[hidden] { display: none; }
.mega-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 24px; }
.mega-col { border-radius: 8px; padding: 14px 16px 16px; transition: background-color .15s ease; }
.mega-col.is-active { background: var(--fill-yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.mega-col h2 { font-size: 17px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.mega-empty { font-size: 14px; color: var(--ink-soft); margin: 6px 0 0; }
/* 트리 구조 */
.tree { list-style: none; margin: 4px 0 0 6px; padding: 0 0 0 16px; border-left: 2px solid rgba(28, 27, 24, .45); }
.tree li { position: relative; padding: 4px 0; }
.tree li::before { content: ""; position: absolute; left: -16px; top: 50%; width: 12px; border-top: 2px solid rgba(28, 27, 24, .45); }
.tree li:last-child::after { content: ""; position: absolute; left: -18px; top: calc(50% + 2px); bottom: 0; width: 4px; background: var(--base); }
.mega-col.is-active .tree li:last-child::after { background: linear-gradient(rgba(var(--yellow), var(--color-alpha)), rgba(var(--yellow), var(--color-alpha))), var(--base); }
.tree a, .tree .soon { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 15px; font-weight: 500; }
.tree a { text-decoration: underline; text-decoration-color: rgba(28, 27, 24, .3); text-underline-offset: 4px; }
.tree a:hover { text-decoration-color: var(--ink); }
.tree .soon { color: var(--ink-soft); }
.tree .soon em { font-style: normal; font-size: 12px; border: 1px solid rgba(28, 27, 24, .4); border-radius: 999px; padding: 1px 8px; }
.menu .auth-cell { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
#user-info { font-size: 13px; color: var(--ink-soft); }
#user-info:empty { display: none; }
#auth-btn { font-size: 15px; }

/* ---------- ② 카테고리 + 메인(빨강) ---------- */
.cats { flex: 1 1 260px; }
.cat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 150px; padding: 28px 32px; }
.cat strong { font-size: 22px; }
.cat .btn { align-self: flex-start; margin-top: 6px; }
/* 주식정보 칸 배경: 삼성전자우 공포·탐욕 게이지 */
.cat-fg { position: relative; overflow: hidden; }
.cat-fg > :not(.cat-bg) { position: relative; z-index: 1; }
.cat-fg > .num, .cat-fg > strong, .cat-fg > .muted { text-shadow: 0 0 2px #FFFDF9, 0 0 6px #FFFDF9, 0 0 10px #FFFDF9; }
.cat-bg { position: absolute; right: 8px; bottom: 6px; width: 50%; max-width: 230px; opacity: .34; pointer-events: none; z-index: 0; }
.cat-bg #cat-fg-needle line { stroke: #1C1B18; }
.cat-bg circle { fill: #1C1B18; }
.cat-bg text { fill: #3D3A34; }
.cat-bg-score { display: flex; flex-direction: column; align-items: center; margin-top: -6px; line-height: 1.1; }
.cat-bg-score b { font-family: 'Archivo', sans-serif; font-size: 40px; font-weight: 800; color: #1C1B18; }
.cat-bg-score span { font-size: 11px; font-weight: 700; color: #1C1B18; white-space: nowrap; }
.hero { flex: 3 1 600px; padding: 56px; display: flex; flex-direction: column; gap: 28px; }
.hero h1 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.3; letter-spacing: -.01em; }
.lecture { flex-wrap: wrap; }
.lecture .video { flex: 3 1 360px; aspect-ratio: 16 / 9; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lecture .video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lecture .video .play { position: relative; width: 76px; height: 76px; border-radius: 50%; background: var(--fill-yellow-strong); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--btn-shadow); transition: transform .12s ease, box-shadow .12s ease; }
.lecture .video:hover .play { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); }
.lecture .video:active .play { transform: translateY(1px); box-shadow: var(--btn-shadow-active); }
.lecture .info { flex: 1 1 200px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.lecture .info strong { font-size: 22px; line-height: 1.4; }
#open-video-popup-btn { width: 100%; display: flex !important; text-align: center; }

/* ---------- ③ 사진 업로드(파랑) + 미리보기 + 오늘 ---------- */
.upload { flex: 1 1 260px; display: flex; flex-direction: column; gap: 14px; }
.drop { flex: 1; min-height: 160px; border: 2px dashed var(--ink); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; font-size: 14px; background: rgba(255, 253, 249, .6); text-align: center; padding: 16px; color: var(--ink-soft); }
.drop:hover .btn { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); }
.drop.drag { background: rgba(255, 253, 249, .95); }
.upload-guest { flex: 1; min-height: 160px; display: flex; align-items: center; justify-content: center; text-align: center; border: 2px dashed rgba(28, 27, 24, .4); padding: 16px; }
.preview { flex: 2 1 420px; display: flex; flex-direction: column; gap: 16px; }
.preview .photo { flex: 1 1 220px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-soft); overflow: hidden; position: relative; text-align: center; padding: 12px; }
.preview .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preview .post { flex: 1 1 200px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.today { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; }
.today-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
#date { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
#weather { font-size: 13px; color: var(--ink-soft); }
#clock { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: .02em; line-height: 1.1; }
#greeting { font-size: 20px; font-weight: 700; }
.input-group { display: flex; flex-wrap: wrap; gap: 8px; }
#daily-goal-input { flex: 1 1 160px; min-width: 0; font-size: 14px; }
.time-selector-group { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.time-selector-group select { padding: 0 6px; font-size: 13px; }

/* 할 일 목록 (script.js가 그리는 요소) */
.todo-list { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; }
.todo-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ink); transition: opacity .3s, transform .3s; }
.todo-item .checkbox { width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 4px; flex: none; cursor: pointer; }
.todo-item.completed .checkbox { background: var(--ink); box-shadow: inset 0 0 0 3px var(--base); }
.todo-item.completed > span { text-decoration: line-through; color: var(--ink-soft); }
.todo-deadline { font-size: 12px; color: var(--ink-soft); }
.todo-actions { margin-left: auto; display: flex; gap: 4px; }
.todo-item.editing input { border: 2px solid var(--ink); border-radius: 6px; background: transparent; min-height: 36px; padding: 0 8px; font-size: 13px; flex: 1 1 120px; min-width: 0; }

/* ---------- ④ 소통의 창 + 등급 ---------- */
.community { flex: 3 1 480px; display: flex; flex-direction: column; gap: 14px; }
.request-input-group { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.request-list-container { max-height: 240px; overflow-y: auto; border-top: 2px solid var(--ink); }
#request-list, #deposit-list, #user-list { list-style: none; margin: 0; padding: 0; }
.request-item { padding: 10px 0; border-bottom: 1px solid rgba(28, 27, 24, .25); font-size: 14px; line-height: 1.6; }
.request-item small, .request-item span { color: var(--ink-soft) !important; }
.delete-req-btn { min-width: 40px; min-height: 36px; }
#deposit-list-container { background: var(--fill-blue) !important; border-radius: 0 !important; padding: 14px !important; }
#deposit-list-container h4 { color: var(--ink) !important; font-size: 13px !important; }
#visitor-count-display { font-size: 13px; color: var(--ink-soft); }
.divider { border: 0; border-top: 2px solid var(--ink); margin: 8px 0; }
.user-list-container { max-height: 260px; overflow-y: auto; }
.user-item { padding: 10px 0; border-bottom: 1px solid rgba(28, 27, 24, .25); font-size: 14px; }
.grade-select { background: var(--base) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; min-height: 32px; }
.delete-user-btn { border-radius: 0 !important; }
#admin-link-container a { display: flex; justify-content: center; align-items: center; min-height: 44px; border: 2px solid var(--ink); font-size: 14px; font-weight: 700; }
.tier { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; }
.tier .price { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 34px; }
.tier .btn { margin-top: auto; }

/* ---------- ⑤ 제휴 + 푸터 ---------- */
.partners { flex: 3 1 480px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 20px 32px; font-weight: 500; font-size: 15px; }
.partners { gap: 12px 14px; }
.partners .eyebrow { margin-right: 10px; }
.spacer { flex: 0 1 120px; min-height: 72px; }
.disclosure { flex: 2 1 320px; padding: 20px 32px; font-size: 12px; line-height: 1.7; color: var(--ink-soft); display: flex; align-items: center; }
.admin-tool { position: fixed; right: 16px; bottom: 16px; z-index: 50; background: var(--base); border: 2px solid var(--line); min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; opacity: .5; }
.admin-tool:hover { opacity: 1; }

/* ---------- 팝업 (script.js의 .active 토글 사용) ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(28, 27, 24, .35); display: none; justify-content: center; align-items: center; z-index: 1000; padding: 16px; }
.modal-overlay.active { display: flex; }
.modal-content { width: 100%; max-width: 420px; background: var(--base); border: var(--line-w) solid var(--line); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: var(--fill-yellow); border-bottom: var(--line-w) solid var(--line); }
.modal-header h3 { font-size: 20px; }
.close-btn { background: none; border: 0; font-size: 24px; min-width: 44px; min-height: 44px; color: var(--ink); }
.modal-tabs { display: flex; border-bottom: 2px solid var(--ink); }
.tab-btn { flex: 1; background: var(--base); border: 0; min-height: 48px; font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.tab-btn.active { color: var(--ink); font-weight: 700; box-shadow: inset 0 -4px 0 var(--ink); }
.auth-form { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.auth-form input, .auth-form select { width: 100%; }
#toggle-password { color: var(--ink) !important; min-width: 44px; min-height: 44px; }

@media (max-width: 720px) {
  .cell { padding: 24px; }
  .hero { padding: 32px 24px; }
  .logo { min-height: 64px; }
  .menu { padding: 16px 20px; gap: 10px; }
  .menu .auth-cell { margin-left: 0; width: 100%; justify-content: flex-start; }
  .mega { padding: 18px 20px 22px; }
  .mega-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}