:root {
    --bg: #faf6f0;
    --surface: #ffffff;
    --ink: #3a2e26;
    --ink-soft: #7a6a5c;
    --accent: #c2703d;
    --accent-soft: #f3e2d3;
    --border: #e8ddd0;
    --good: #4c7a4c;
    --bad: #b3503f;
    --score-positive: #3a6ea5;
    --score-negative: #b3503f;
    --score-track: var(--border);
    --radius: 14px;
    --shadow: 0 4px 18px rgba(58, 46, 38, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
}

.container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
}

.brand {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--ink);
}
.brand:hover { text-decoration: none; }

.main-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.95rem;
}

.nav-cta {
    background: var(--accent);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
}
.nav-cta:hover { text-decoration: none; opacity: 0.9; }

.lang-menu-button {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--ink);
    padding: 6px 14px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
}
.lang-menu-button:hover { border-color: var(--accent); color: var(--accent); }

.lang-dialog {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    width: 100%;
    max-width: 320px;
}
.lang-dialog::backdrop { background: rgba(58, 46, 38, 0.45); }
.lang-dialog-options { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 18px; }
.lang-dialog-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
}
.lang-dialog-option:hover { background: var(--accent-soft); }
.lang-dialog-option input { accent-color: var(--accent); }
.lang-dialog-actions { display: flex; justify-content: flex-end; }

main.container { padding-top: 28px; padding-bottom: 60px; min-height: 60vh; }

.flash-list { margin-bottom: 20px; }
.flash {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 10px;
    font-size: 0.92rem;
}
.flash-success { background: #e7f3e3; color: var(--good); }
.flash-error { background: #fbe7e3; color: var(--bad); }
.flash-info { background: var(--accent-soft); color: var(--ink); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 24px;
}
/* 폼 카드 1개만 세로로 쌓이는 화면(틱 입력, 개인설정)에서 내용이 화면 폭에 늘어져
   한쪽으로 치우쳐 보이지 않도록, 화면 크기와 무관하게 폭을 제한하고 가운데 정렬한다. */
.card-narrow { max-width: 560px; margin-left: auto; margin-right: auto; }

h1, h2, h3 { color: var(--ink); }
.section-title { font-size: 1.1rem; margin: 0 0 14px; color: var(--ink); }
.muted { color: var(--ink-soft); font-size: 0.9rem; }

/* --- Hero / Home --- */
.hero {
    text-align: center;
    padding: 48px 12px 32px;
}
.hero h1 { font-size: 2rem; margin-bottom: 12px; }
.hero p { color: var(--ink-soft); max-width: 640px; margin: 0 auto 24px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
}
.btn:hover { opacity: 0.9; text-decoration: none; }
.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin: 20px 0;
}
.stat-box {
    background: var(--accent-soft);
    border-radius: var(--radius);
    padding: 18px;
    text-align: center;
}
.stat-box .value { font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.stat-box .label { font-size: 0.85rem; color: var(--ink-soft); }

.value-list { list-style: none; padding: 0; margin: 0; }
.value-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.value-list li:last-child { border-bottom: none; }
.value-need { font-weight: 600; }
.value-answer { color: var(--ink-soft); font-size: 0.92rem; }

/* 홈 상단 2열('지금 틱로그는' | 공지사항·사용법, app/templates/home.html). 위젯 칼럼 높이가
   서로 달라도 자연스러운 .dashboard-grid-2col(나만의 대시보드 꾸미기)과 달리, 여기는 두
   카드의 높이를 맞춰야 해서 align-items를 stretch(기본값)로 둔 별도 클래스를 쓴다. */
.home-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) {
    .home-top-grid { grid-template-columns: 1fr; }
}

/* 공지사항/틱로그 사용법 탭 - JS 없이 라디오+라벨 조합만으로 전환한다(체크된 라디오의
   형제인 라벨/패널을 ~ 결합자로 선택). 라디오 자체는 화면에 안 보이게 숨기고 라벨을
   버튼처럼 스타일링한다. */
.home-guide-tabs input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.home-guide-tab-labels { display: flex; gap: 8px; margin-bottom: 14px; flex: 0 0 auto; }
.home-guide-tab-labels label {
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.home-guide-tab-panel { display: none; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#home-tab-notice:checked ~ .home-guide-tab-labels label[for="home-tab-notice"],
#home-tab-howto:checked ~ .home-guide-tab-labels label[for="home-tab-howto"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
#home-tab-notice:checked ~ #home-panel-notice,
#home-tab-howto:checked ~ #home-panel-howto {
    display: flex;
}

/* 카드 안에서 페이저(◀▶)와 '전체보기' 링크를 항상 카드 하단에 고정한다 - 글 개수/설명
   줄바꿈에 따라 목록 높이가 달라져도 화살표 위치는 바뀌지 않는다. .home-guide-card가
   .home-top-grid의 기본 align-items:stretch로 왼쪽 카드와 같은 높이를 갖고, 그 안에서
   .home-guide-tabs → 선택된 .home-guide-tab-panel까지 flex:1로 이어받아 높이를 채운 뒤,
   .home-guide-panel-footer가 margin-top:auto로 맨 아래에 붙는다. */
.home-guide-card { display: flex; flex-direction: column; }
.home-guide-tabs { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.home-guide-panel-footer {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
}
.home-guide-panel-footer .home-guide-pager { grid-column: 2; justify-self: center; }
.home-guide-panel-footer .home-view-all-link { grid-column: 3; justify-self: end; margin: 0; }

/* '전체보기' 링크 - 홈 화면의 세 섹션(공지사항/틱로그 사용법 탭, 틱로그 이야기) 모두 같은
   작은 글씨 크기를 쓴다. */
.home-view-all-link { font-size: 0.85rem; }

/* 탭 아래 글 목록 - 클릭하지 않아도 제목(굵게)+설명 한 줄(회색)로 내용을 짐작할 수
   있게 한다(.value-need/.value-answer는 app/templates/home.html의 '지금 틱로그는'
   저널 카드와 같은 조합을 재사용). 목록 전체가 링크라 클릭하면 글 상세로 이동한다. */
.home-guide-list { list-style: none; padding: 0; margin: 0; }
.home-guide-list li { border-bottom: 1px solid var(--border); }
.home-guide-list li:last-child { border-bottom: none; }
.home-guide-list a {
    display: block;
    padding: 10px 2px;
    text-decoration: none;
    color: inherit;
}
.home-guide-list a .value-need { display: block; }
.home-guide-list a .value-answer { display: block; margin-top: 2px; }

/* 공지사항 행 - 사용법과 같은 .home-guide-list를 쓰되 설명 없이 제목+날짜만 한 줄로 보여준다. */
.home-guide-list a.home-guide-list-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.home-guide-list-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.home-guide-list a.home-guide-list-row .value-need {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-guide-doc-no { flex: 0 0 auto; min-width: 22px; color: var(--ink-soft); font-size: 0.82rem; text-align: right; }
.home-guide-date { flex: 0 0 auto; color: var(--ink-soft); font-size: 0.82rem; }

/* /guide 목록·상세(공지사항·틱로그 사용법)의 표시 번호(display_number) - display를
   지정하지 않아 쓰는 자리에 따라 모양이 달라진다: 공지사항 목록(.guide-notice-left
   안의 span, 숫자만, 인라인이라 margin-bottom은 무시됨)과 사용법 카드/상세(div,
   "No.n" 형태로 제목 위 한 줄, margin-bottom으로 제목과 간격을 둠)가 이 한 클래스를
   공유한다. */
.board-doc-no { display: inline; color: var(--ink-soft); font-size: 0.85rem; font-weight: 400; margin-bottom: 4px; }
div.board-doc-no { display: block; }
/* /journal 목록(그리드형)에서만 발행번호 줄에 발행일을 같이 보여준다
   (app/templates/journal/_post_list.html의 grid_show_date) - 번호는 왼쪽, 날짜는
   같은 줄 오른쪽 끝에 배치한다(.guide-notice-row-top과 같은 방식). */
div.board-doc-no.board-doc-no--with-date { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.board-doc-date { flex: 0 0 auto; font-size: 0.8rem; }

/* /guide 공지사항 목록 행 - 번호+제목을 왼쪽에, 날짜를 같은 줄 오른쪽 끝에 배치한다
   (틱로그 사용법 카드형 목록과 달리 한 줄짜리 목록이라 .value-list를 그대로 쓴다). */
.guide-notice-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.guide-notice-left { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.guide-notice-date { flex: 0 0 auto; font-size: 0.8rem; }

/* 페이저 - 관리자가 '전체 설정'에서 정한 개수(home_notice_count/home_howto_count)를
   넘는 노출 대상 글이 있을 때만 보이는 좌우 화살표(§ home() 페이지네이션). */
.home-guide-pager {
    display: flex;
    align-items: center;
    gap: 14px;
}
.home-guide-pager-btn {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.85rem;
    cursor: pointer;
}
.home-guide-pager-btn:hover { color: var(--accent); }
.home-guide-pager-btn.is-disabled {
    color: var(--border);
    cursor: default;
}
.home-guide-pager-status { font-size: 0.85rem; color: var(--ink-soft); }

.element-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 700;
    color: #fff;
}

/* 게시글 본문(app/templates/guide/detail.html, journal/detail.html) - 관리자가 작성한
   HTML이 저장 시점에 이미 화이트리스트로 정제되어(app/content.py의 sanitize_post_html())
   |safe로 그대로 출력되므로, 그 안에서 쓰일 수 있는 기본 태그에 최소한의 기본값을 준다. */
.post-content img { max-width: 100%; height: auto; border-radius: 8px; }
.post-content h1, .post-content h2, .post-content h3 { margin: 1.2em 0 0.5em; }
.post-content p { margin: 0 0 1em; }
.post-content ul, .post-content ol { padding-left: 1.4em; margin: 0 0 1em; }
.post-content blockquote {
    margin: 0 0 1em;
    padding: 4px 16px;
    border-left: 3px solid var(--accent);
    color: var(--ink-soft);
}
.post-content pre {
    background: var(--accent-soft);
    padding: 12px 14px;
    border-radius: 8px;
    overflow-x: auto;
}
.post-content table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
.post-content th, .post-content td { border: 1px solid var(--border); padding: 8px; text-align: left; }

/* --- Forms --- */
.form-grid { display: grid; gap: 18px; max-width: 480px; margin-left: auto; margin-right: auto; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
.hint { color: var(--ink-soft); font-size: 0.82rem; margin-top: 4px; }
.field input,
.field select,
.field textarea,
.field button { font-family: inherit; }

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field input[type="time"],
.field input[type="datetime-local"],
.field textarea,
.field select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 0.95rem;
    color: var(--ink);
}
.field .checkbox-row { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.field .radio-row, .field .checkbox-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-weight: 400;
}
.field select[multiple] { min-height: 130px; }
.chip-options { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 0.9rem;
    background: #fff;
}
.chip-option input { accent-color: var(--accent); }
.chip-option-tooltip { position: relative; }
.chip-tooltip {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    width: 260px;
    max-width: 80vw;
    background: var(--ink);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.55;
    font-weight: 400;
    text-align: left;
    white-space: pre-line;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    z-index: 20;
}
.chip-option-tooltip:hover .chip-tooltip,
.chip-option-tooltip:focus-within .chip-tooltip {
    display: block;
}
.category-eval-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.category-eval-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.category-select {
    flex: 0 0 auto;
    min-width: 150px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 0.9rem;
}
.category-score-slider {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 160px;
}
/* 점수 슬라이더는 가운데(0, 보통)를 기준으로 좋음 쪽은 파란 톤, 나쁨 쪽은 붉은 톤으로
   채워진다. background(그라데이션)는 app.js가 값이 바뀔 때마다 인라인으로 계산해서 넣고,
   트랙 의사요소는 그 값을 그대로 물려받아 보여준다. */
.category-score-slider input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: var(--score-track);
    outline: none;
}
.category-score-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: inherit;
}
.category-score-slider input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: inherit;
}
.category-score-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--ink-soft);
    cursor: pointer;
}
.category-score-slider input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--ink-soft);
    cursor: pointer;
}
.category-score-slider input[type="range"]:disabled { opacity: 0.35; cursor: not-allowed; }
.category-score-slider input[type="range"]:disabled::-webkit-slider-thumb { cursor: not-allowed; }
.category-score-slider input[type="range"]:disabled::-moz-range-thumb { cursor: not-allowed; }
.category-score-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    width: var(--score-value-width, 90px);
    flex: 0 0 auto;
    text-align: right;
}
.category-remove-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
}
.category-remove-btn:hover { color: var(--bad); }
.category-add-btn[hidden] { display: none; }
.form-errors { color: var(--bad); font-size: 0.82rem; margin-top: 4px; }
.form-actions { margin-top: 6px; }

/* 암호화되어 저장되는 입력값(생년월일/출생시각/출생지) 옆 안내 - 관리자도 원문을 볼 수
   없다는 점을 눈에 띄게 보여준다(회원가입/개인설정 폼). */
.encrypted-notice { color: var(--bad); font-weight: 700; font-size: 0.82rem; margin: 2px 0 6px; }

/* --- Saju card --- */
.pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
    margin: 16px 0;
}
.pillar-box {
    background: var(--accent-soft);
    border-radius: 10px;
    padding: 14px 8px;
    text-align: center;
}
.pillar-box .pillar-name { font-size: 0.78rem; color: var(--ink-soft); }
.pillar-box .pillar-value { font-size: 1.1rem; font-weight: 700; margin-top: 4px; }
/* 간지를 "정사(丁巳)"처럼 풀어쓰지 않고 한자 두 글자만 위(간)/아래(지)로 쌓아서 보여준다.
   각 글자 색은 그 글자의 오행에 맞춰 인라인 style로 붙는다(_macros.html의 pillar_grid). */
.pillar-hanja { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.15; }
.pillar-hanja span { font-size: 1.35em; }

/* 틱 타임라인의 "이 순간의 사주 보기"처럼 좁은 카드 안에서도 항상 4칸이 한 줄에 들어가야
   하는 곳에 쓴다 - auto-fit 대신 4열을 고정하고, 폭이 좁아지면 줄바꿈 대신 칸 자체가
   좁아지도록 값 크기를 줄인다. */
.pillar-grid-inline {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 8px 0 0;
}
.pillar-grid-inline .pillar-box { padding: 8px 4px; }
.pillar-grid-inline .pillar-name { font-size: 0.68rem; }
.pillar-grid-inline .pillar-value { font-size: 0.85rem; margin-top: 2px; }

.oheng-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.oheng-row { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; }
.oheng-row .oheng-label { width: 46px; flex-shrink: 0; font-weight: 700; }
.oheng-row .oheng-track { display: flex; gap: 2px; flex: 1; }
.oheng-row .oheng-cell { flex: 1; height: 10px; border-radius: 2px; background: var(--border); }
.oheng-row .oheng-count { width: 20px; text-align: right; color: var(--ink-soft); }

/* --- Timeline --- */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-meta { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 2px; }
.timeline-edit-link { font-size: 0.8rem; }
.timeline-categories { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.tag { display: inline-block; white-space: nowrap; font-size: 0.78rem; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); margin: 2px 0; }
/* 대시보드 틱 타임라인의 분야 뱃지: 점수가 나쁨(-)이면 연한 빨강, 좋음(+)이면 연한 파랑
   (0점은 기본 톤 그대로). */
.tag-bad { background: #fbe2e0; }
.tag-good { background: #dfeaf9; }
/* mood 태그: 카테고리 뱃지(tag-good/tag-bad)와 다른 색으로 시각적 구분 */
.tag-mood { background: #ede9fb; color: #5a4a8a; font-size: 0.78rem; }

/* mood 이모지 선택 UI (/ticks/new, /ticks/<id>/edit) */
.mood-label { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 4px; }
.mood-picker { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.mood-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: var(--surface); border: 2px solid var(--border);
    border-radius: 10px; padding: 8px 12px; cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    font-size: 1rem; line-height: 1;
}
.mood-btn:hover { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.08); }
.mood-btn--active { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.mood-emoji { font-size: 1.5rem; line-height: 1; }
.mood-val-label { font-size: 0.72rem; color: var(--ink-soft); }
.category-avg-list { display: flex; flex-direction: column; gap: 8px; }
.category-avg-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}
.category-avg-row:last-child { border-bottom: none; }
.category-avg-value { font-weight: 700; color: var(--accent); }
.timeline-content { font-size: 0.92rem; }
.tick-saju-toggle summary { cursor: pointer; color: var(--accent); font-size: 0.82rem; margin-top: 6px; }

/* --- TrendCase cards (나만의 흐름 분석) --- */
/* 판정별 톤: 경향 발견=은은하게 긍정적, 미발견/데이터 부족=중립. 절대 "채택/기각" 같은
   단정적 색상(예: 진한 빨강 "기각")을 쓰지 않는다 - 분석케이스체계 기술서 §4 참고. */
.trendcase-card {
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 10px;
    font-size: 0.92rem;
    border: 1px solid var(--border);
}
.trendcase-card.verdict-trend { background: var(--accent-soft); border-color: var(--accent); }
.trendcase-card.verdict-none { background: var(--bg); }
.trendcase-card.verdict-insufficient { background: var(--bg); color: var(--ink-soft); }
.trendcase-name { font-weight: 700; margin-bottom: 4px; }
.trendcase-disclaimer { margin-top: 12px; margin-bottom: 0; }

/* --- Trend chart --- */
.trend-range-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.trend-range-tabs a {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--ink-soft);
    font-size: 0.85rem;
}
.trend-range-tabs a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.trend-chart-area { transition: opacity 0.15s ease; }
/* 탭을 바꾸면 app.js가 fetch로 이 영역만 새로고침한다(dashboard.tv004_refresh) - TV-007의
   .pentagon-chart-area[aria-busy]와 같은 패턴으로 갱신 중임을 알려준다. */
.trend-chart-area[aria-busy="true"] { opacity: 0.45; }
.trend-chart { width: 100%; height: auto; color: var(--accent); }
.chart-dot { fill: var(--accent); }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-label { font-size: 18px; fill: var(--ink-soft); }

/* --- Radar chart (TV-003 오행 반응성 8각형) --- */
.radar-chart-wrap { display: flex; justify-content: center; }
.radar-chart { width: 100%; max-width: 340px; height: auto; color: var(--accent); }
.radar-fill { fill: var(--accent-soft); opacity: 0.7; }
/* 성과/건강/애정 등 카테고리 축 라벨. 관리자가 '틱뷰 관리'에서 axis_font_size를 설정하면
   app/charts.py가 이 기본값 대신 인라인 style로 덮어쓴다(.radar-axis-label-element와 같은
   패턴). */
.radar-axis-label { font-size: 12px; font-weight: 600; }
.tickview-disclaimer { margin-top: 12px; margin-bottom: 0; }
/* 위젯 제목 + 대상 기간을 한 줄에, 제목은 왼쪽, 대상 기간은 그 줄의 오른쪽 끝에 배치한다. */
.tickview-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tickview-period-row { display: flex; justify-content: flex-end; }
.tickview-period-label { margin: 0; font-size: 0.85rem; white-space: nowrap; }

/* --- TV-007 오행 스파이더 (5각형, 카테고리별 시리즈 오버레이) --- */
.radar-chart-multi { max-width: 340px; }
.chart-grid-zero { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; }
/* 목/화/토/금/수 축 라벨 - TV-003의 8각형 카테고리 라벨(.radar-axis-label)과는 별도
   클래스로 둔다. 거기는 글자가 작아도 되는 카테고리 이름이지만, 여기는 한 글자짜리
   오행 이름이라 더 크고 굵게 보여도 겹치지 않는다. 관리자가 '틱뷰 관리'에서
   axis_font_size를 설정하면 app/charts.py가 이 기본값 대신 인라인 style로 덮어쓴다. */
.radar-axis-label-element { font-size: 17px; font-weight: 800; }

.pentagon-widget { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }

.pentagon-range-tabs { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.pentagon-range-tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pentagon-range-tabs label {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--ink-soft);
    font-size: 0.68rem;
    line-height: 1.6;
    cursor: pointer;
}
.pentagon-range-tabs input:checked + label { background: var(--accent); border-color: var(--accent); color: #fff; }
.pentagon-range-tabs input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.pentagon-pillars { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.pentagon-chart-area { display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity 0.15s ease; }
/* 체크박스/라디오를 바꾸면 app.js가 fetch로 이 영역만 새로고침한다(dashboard.tv007_refresh) -
   요청이 오가는 동안 살짝 흐려 보이게 해서 "그냥 멈춘 게 아니라 갱신 중"임을 알려준다. */
.pentagon-chart-area[aria-busy="true"] { opacity: 0.45; }
.pentagon-categories { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.pentagon-chip-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }

.pentagon-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 0.68rem;
    line-height: 1.6;
    background: #fff;
}
.pentagon-chip input { accent-color: var(--chip-color, var(--accent)); width: 11px; height: 11px; }
.pentagon-category-chip:has(input:checked) {
    background: var(--chip-color, var(--accent-soft));
    border-color: var(--chip-color, var(--accent));
    color: #fff;
}
.pentagon-pillar-chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }

@media (max-width: 560px) {
    .pentagon-pillars { flex-direction: column; }
    .pentagon-categories { flex-direction: column; }
}

/* 대시보드 카드는 사용자가 '나만의 대시보드 꾸미기'에서 고른 순서 그대로 위에서 아래로
   쌓인다(app/blueprints/dashboard/__init__.py의 widgets_col0/widgets_col1 목록 순서).
   2번째 칼럼에 배치한 위젯이 하나도 없으면 단일 칼럼으로, 있으면 2단 그리드로 보여준다. */
.dashboard-stack { max-width: 720px; margin: 0 auto; }
.dashboard-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.dashboard-grid-2col .dashboard-stack { max-width: none; margin: 0; }
@media (max-width: 760px) {
    .dashboard-grid-2col { grid-template-columns: 1fr; }
    .hero h1 { font-size: 1.5rem; }
}

.btn-sm { padding: 6px 14px; font-size: 0.82rem; }

/* --- 게시글 편집기의 "기존 이미지에서 선택" 갤러리 (app/static/js/board_editor.js) ---
   썸네일 입력칸과 언어별 CKEditor 본문이 공유하는 단일 모달로, 같은 게시글(post_id)의
   다른 언어 번역본에서 이미 쓰인 이미지를 새로 업로드하지 않고 재사용할 수 있게 한다. */
.image-gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.image-gallery-modal[hidden] { display: none; }
.image-gallery-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(58, 46, 38, 0.55);
}
.image-gallery-panel {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    width: min(640px, 100%);
    max-height: 80vh;
    overflow-y: auto;
}
.image-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    font-weight: 600;
    color: var(--ink);
}
.image-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}
.image-gallery-grid[hidden] { display: none; }
.image-gallery-item {
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    overflow: hidden;
    cursor: pointer;
}
.image-gallery-item:hover { border-color: var(--accent); }
.image-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* "이 글의 이미지" / "공용 이미지"(app/common_images.py) 탭 전환 - 공용 이미지 탭은
   가이드·저널 어디서든 공통으로 재사용하는 이미지를 폴더째로 읽기 전용 탐색만 한다
   (수정·삭제는 <관리자> 공동이미지 관리 탭에서만). */
.image-gallery-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.image-gallery-tab {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink-soft);
    font-size: 0.85rem;
    cursor: pointer;
}
.image-gallery-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.image-gallery-breadcrumb { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 10px; min-height: 1.2em; }
.image-gallery-breadcrumb .link-button { color: var(--accent); }
.image-gallery-folders { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.image-gallery-folder-item {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--ink);
    font-size: 0.85rem;
    cursor: pointer;
}
.image-gallery-folder-item:hover { border-color: var(--accent); }
.link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

/* --- 이미지 확대 미리보기 / 상세정보 오버레이 ---
   에디터의 "공용 이미지" 갤러리(삽입 전 미리보기, app/static/js/board_editor.js)와
   <관리자> 공용이미지 관리(썸네일 클릭 미리보기·"정보" 버튼, app/static/js/
   common_images.js)가 함께 쓰는 컴포넌트다. .image-gallery-modal 위에 한 번 더
   뜨는 경우(에디터 쪽)도 있어 z-index를 더 높게 둔다. */
.image-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.image-preview-overlay[hidden] { display: none; }
.image-preview-overlay .image-gallery-backdrop { background: rgba(0, 0, 0, 0.75); }
.image-preview-panel {
    position: relative;
    max-width: min(720px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.image-preview-panel img {
    max-width: 100%;
    max-height: 60vh;
    border-radius: 8px;
    background: var(--bg);
    object-fit: contain;
}
.image-preview-actions { display: flex; gap: 8px; }
.image-info-list {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 0.9rem;
}
.image-info-list dt { color: var(--ink-soft); }
.image-info-list dd { margin: 0; color: var(--ink); }
.common-image-card img[data-preview-url] { cursor: zoom-in; }

/* --- 나만의 대시보드 꾸미기 --- */
/* 선택 가능한 틱뷰(위) - 선택한 틱뷰(아래) 순서로 세로 배치한다. 그 사이의 추가/제거
   버튼도 위아래 이동을 뜻하므로 화살표를 세로 방향(↓/↑)으로 맞췄다. */
.customize-move-row { display: flex; justify-content: center; gap: 12px; margin: 14px 0; }

.customize-columns { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; }
.customize-column { flex: 1 1 220px; min-width: 200px; display: flex; flex-direction: column; }
.customize-list {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    min-height: 260px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    font-size: 0.92rem;
    background: var(--surface);
}
.customize-list option { padding: 8px 10px; border-radius: 6px; }
.customize-arrows, .customize-reorder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
}
.customize-arrows .btn, .customize-reorder .btn { min-width: 44px; }
@media (max-width: 600px) {
    .customize-columns { flex-direction: column; }
    .customize-arrows, .customize-reorder { flex-direction: row; justify-content: center; }
}

/* 관리자 프리셋 편집 화면: 제공이 꺼진 틱뷰는 옵션 목록에 그대로 남아있되(프리셋 구성
   자체는 보존해야 하므로) 흐리게 표시해 지금은 사용자 화면에 나타나지 않는다는 걸 알린다. */
.option-disabled { color: var(--ink-soft); font-style: italic; }

.preset-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.preset-row:last-child { border-bottom: none; }
.preset-row-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* '나만의 대시보드 꾸미기'의 프리셋 목록: 이름+구성 미리보기를 누르면 바로 적용되는
   버튼이지만, .preset-row 안에서는 일반 텍스트처럼 보이게 기본 버튼 스타일을 지운다. */
.preset-row-main {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    color: inherit;
}
.preset-row-main:hover strong { text-decoration: underline; }

/* --- Admin --- */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.admin-tabs a {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--ink-soft);
    font-size: 0.9rem;
}
.admin-tabs a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 관리자 '전체 설정' 탭 카드들을 2열로 배치한다(넓은 화면 기준) - 카드 폭이 좁아지는
   화면(모바일 등)에서는 auto-fit이 자동으로 1열로 접는다. */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th, .admin-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
}
/* 모든 관리자 표 공통 - 값(td)은 기본적으로 왼쪽 정렬을 유지하되, 레이블(th)만 칸
   가운데로 정렬해 값 영역 한가운데 오도록 한다. */
.admin-table td { text-align: left; }
.admin-table th { text-align: center; color: var(--ink-soft); font-weight: 600; font-size: 0.82rem; }
/* 틱관리/회원관리/가이드관리/저널관리 표(.admin-table-centered) - 위 기본값과 달리 값도
   칸 가운데로 정렬한다. 다만 제목 칼럼(.col-title, 가이드·저널 관리의 글 제목)은 긴
   텍스트라 가운데 정렬하면 오히려 읽기 불편해서 왼쪽 정렬을 그대로 유지한다. */
.admin-table-centered td { text-align: center; }
.admin-table-centered td.col-title { text-align: left; }
/* 틱관리/회원관리/가이드관리/저널관리 검색 필터 폼(.board-filter-form) - 레이블이 각
   입력/select 칸의 왼쪽에 붙어 보이지 않도록, 칸(.field) 안에서 가운데 정렬한다. */
.board-filter-form label { text-align: center; }
/* 틱 관리 표: 분야(카테고리) 칸만 태그가 많으면 여러 줄로 늘어나도 되고, 나머지 칸은
   전부 한 줄에 표시한다 - 넘치는 칸이 있으면 줄바꿈 대신 표를 감싸는
   overflow-x:auto 컨테이너가 가로 스크롤로 처리한다. */
.admin-table-nowrap th,
.admin-table-nowrap td {
    white-space: nowrap;
}
/* 다른 칸들이 전부 nowrap이라 자동 표 레이아웃이 분야 칸에는 남는 폭만 몰아주는데,
   그러면 태그 한 개 폭보다 좁아져서 오히려 줄바꿈이 지저분해 보인다 - 태그 2개
   정도는 여유 있게 들어갈 최소 폭을 보장한다. */
.admin-table-nowrap .col-wrap {
    min-width: 170px;
    white-space: normal;
}
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.badge-admin { background: var(--accent); color: #fff; }
.badge-user { background: var(--accent-soft); color: var(--ink); }
.badge-active { background: #e7f3e3; color: var(--good); }
.badge-inactive { background: #fbe7e3; color: var(--bad); }
.admin-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: 0.88rem; }
.admin-pagination a, .admin-pagination span { padding: 4px 10px; }

/* 페이지 번호 공통 컴포넌트(app/templates/_pagination_macro.html) - 가이드 목록,
   관리자 회원관리/틱관리에서 함께 쓴다. 카드 폭의 70%를 차지하도록 가운데 배치하고,
   페이지 번호(.paged-nav-numbers)는 서버가 전부 렌더링해둔 뒤 app/static/js/app.js가
   실제 렌더 폭을 측정해 그 70% 안에 들어가는 만큼만 보여주고 나머지는 "..."로 줄인다 -
   한 줄에 다 들어가면 굳이 줄이지 않는다. JS가 꺼져 있을 때는 overflow:hidden +
   justify-content:center로 현재 페이지 주변만 양쪽이 잘린 채 보이는 정도로 대체된다. */
.paged-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 70%;
    margin: 16px auto 0;
    justify-content: center;
    font-size: 0.88rem;
}
@media (max-width: 760px) {
    .paged-nav { width: 100%; }
}
.paged-nav-edge { flex: 0 0 auto; padding: 4px 10px; white-space: nowrap; }
.paged-nav-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* flex-grow:0 - 페이지 번호가 적을 때 이 영역이 70% 폭 전체를 억지로 채우면서
       "처음으로"/"끝으로"가 가운데 번호들과 멀리 떨어져 보이는 문제가 있었다(번호가
       실제로 차지하는 만큼만 너비를 갖고, .paged-nav의 justify-content:center가
       "처음으로 1 2 … 끝으로" 전체를 한 덩어리로 가운데 정렬한다). flex-shrink:1은
       그대로 둬 번호가 많아 70% 폭을 넘칠 때는 여전히 줄어들고, 그 줄어든
       clientWidth를 app/static/js/app.js의 "..." 축약 폭 계산에 그대로 쓴다. */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}
.paged-nav-num { flex: 0 0 auto; padding: 4px 10px; white-space: nowrap; }
.paged-nav-ellipsis { flex: 0 0 auto; padding: 4px 2px; color: var(--ink-soft); white-space: nowrap; }
.inline-form { display: inline; }
.category-manage-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 14px;
}

/* --- 공동이미지 관리(app/templates/admin/common_images.html) --- */
.common-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.common-image-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    background: var(--surface);
}
.common-image-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin-bottom: 8px;
    background: var(--bg);
}
.common-image-card form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.common-image-card input[type="text"] { flex: 1; min-width: 0; }
.common-image-card select { flex: 1 1 100%; min-width: 0; }

.disclaimer {
    font-size: 0.78rem;
    color: var(--ink-soft);
    text-align: center;
    padding: 18px 0;
    margin: 0;
}

/* --- 틱로그 저널 목록 레이아웃 (app/templates/journal/_post_list.html) ---
   관리자 '전체 설정 > 저널 목록 레이아웃'(AppSettings.journal_list_layout /
   home_journal_list_layout)에서 고른 값에 따라 /journal 목록과 홈 화면 '틱로그 저널'
   섹션이 같은 마크업(.journal-item)을 4가지 중 하나의 컨테이너 클래스로 감싸 보여준다.
   리스트형 피처 이미지 노출/위치, 그리드 카드 크기, 웹진형 큰 카드 개수, 핀터레스트형
   열 개수는 화면을 가리지 않고 같은 값을 쓰는 레이아웃별 세부 설정(AppSettings의
   journal_list_thumbnail_*/journal_grid_card_size/journal_magazine_featured_count/
   journal_pinterest_columns)이다. */
.journal-item {
    display: block;
    text-decoration: none;
    color: inherit;
}
.journal-item .journal-title { font-size: 1rem; margin: 0 0 4px; color: var(--ink); }
.journal-item .journal-excerpt { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }
.journal-item .journal-tags { margin-top: 8px; }
.journal-item .journal-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 8px;
    background: var(--bg);
    display: block;
}

/* 그리드/카드형 - 카드 하나하나가 .card 스타일을 그대로 쓴다. 관리자가 고른 카드 크기
   프리셋(작게/보통/크게)에 따라 열 최소 폭과 썸네일 비율이 달라진다. */
.journal-list--grid {
    display: grid;
    gap: 18px;
}
.journal-list--grid .journal-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}
.journal-list--grid .journal-item .journal-thumb { margin-bottom: 10px; }
.journal-list--grid-small { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.journal-list--grid-small .journal-item .journal-thumb { aspect-ratio: 200 / 140; }
.journal-list--grid-medium { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.journal-list--grid-medium .journal-item .journal-thumb { aspect-ratio: 260 / 180; }
.journal-list--grid-large { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.journal-list--grid-large .journal-item .journal-thumb { aspect-ratio: 320 / 220; }

/* 리스트형 - 썸네일(고정 폭) + 제목/요약이 가로로 한 줄씩 쌓인다. 관리자가 피처 이미지를
   끄면 썸네일 없이 텍스트만, 위치를 오른쪽으로 바꾸면 .journal-item--thumb-right가
   flex 순서를 뒤집는다. */
.journal-list--list { display: flex; flex-direction: column; gap: 14px; }
.journal-list--list .journal-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.journal-list--list .journal-item:last-child { border-bottom: none; }
.journal-list--list .journal-item.journal-item--thumb-right { flex-direction: row-reverse; }
.journal-list--list .journal-item .journal-thumb {
    width: 140px;
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
}
.journal-list--list .journal-item .journal-body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) {
    .journal-list--list .journal-item .journal-thumb { width: 96px; }
}

/* 웹진형 - 관리자가 정한 개수(1~3)만큼 최신글을 큰 카드로 먼저 보여주고, 나머지는 작은
   카드 그리드로 이어붙인다. */
.journal-list--magazine { display: flex; flex-direction: column; gap: 20px; }
.journal-list--magazine .journal-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.journal-list--magazine .journal-featured-grid .journal-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
}
.journal-list--magazine .journal-featured-grid .journal-item .journal-thumb { aspect-ratio: 16 / 10; margin-bottom: 10px; }
.journal-list--magazine .journal-featured-grid .journal-item .journal-title { font-size: 1.15rem; }
.journal-list--magazine .journal-rest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.journal-list--magazine .journal-rest-grid .journal-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}
.journal-list--magazine .journal-rest-grid .journal-item .journal-thumb { margin-bottom: 8px; }
.journal-list--magazine .journal-rest-grid .journal-item .journal-title { font-size: 0.92rem; }

/* 핀터레스트형 - CSS 다단(columns)으로 마사이먼트를 흉내낸다. 썸네일에 고정 비율을 강제하지
   않고 원본 비율 그대로 두어(막힌 aspect-ratio 없음) 카드 높이가 제각각이 되게 한다. 관리자가
   고른 열 개수(cols-2/3/4)는 화면이 좁아지면 아래 미디어쿼리로 자동으로 줄어든다. */
.journal-list--pinterest { column-gap: 18px; }
.journal-list--pinterest.cols-2 { columns: 2; }
.journal-list--pinterest.cols-3 { columns: 3; }
.journal-list--pinterest.cols-4 { columns: 4; }
.journal-list--pinterest .journal-item {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    margin-bottom: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
}
.journal-list--pinterest .journal-item .journal-thumb {
    aspect-ratio: auto;
    margin-bottom: 8px;
}
@media (max-width: 700px) {
    .journal-list--pinterest.cols-3, .journal-list--pinterest.cols-4 { columns: 2; }
}
@media (max-width: 460px) {
    .journal-list--pinterest.cols-2, .journal-list--pinterest.cols-3, .journal-list--pinterest.cols-4 { columns: 1; }
}
.site-footer { border-top: 1px solid var(--border); margin-top: 40px; }