/* ============================================================
   비밀공간 적응 층 — 규격 v4 「햇살 든 유자」 (2026-10-15)
   secret/index.html 의 맨 끝에 링크한다. 위의 인라인 <style> 을 덮는다.

   작가 개인 작업대다. 공개 포털보다 정보 밀도를 높여 도구를 빨리 찾게 한다.
   - 상단바 56 미색 · 아래 1px 선 · 화면 좌우 끝까지 · 위 빈틈 0
   - 도구 묶음마다 미색 카드 한 장(1px 선 · 모서리 12 · 그림자 1)
     안은 1px 선으로 나눈 촘촘한 행, 행 hover 유자 50
   - PC 는 묶음 카드 2~3열 격자 · 휴대폰은 1열
   - 표식: 로컬 = 외곽선 배지 · 자주 = 유자 배지 (자물쇠·방패 없음)
   - 안내 상자 유자 50 + 왼쪽 2px 원색 선 · 푸터 캔버스 위 한 줄
   토큰만 쓴다. 다크 모드는 켜지 않는다(html 에 data-yj-dark 없음).
   ============================================================ */

/* ── 바탕: 캔버스 ── */
body {
    background: var(--yj-canvas);
    background-image: none;
    color: var(--yj-ink);
    font-family: var(--yj-font-ui);
    overflow-x: clip;
}

/* ── 비밀번호 창: 캔버스 위 가장 앞 카드 한 장 ── */
#modal-overlay {
    background: var(--yj-canvas);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: var(--yj-s5);
}
body .password-modal {
    background: var(--yj-card-hi);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-lg);
    box-shadow: var(--yj-sh-3);
    padding: var(--yj-s6) var(--yj-s5);
    max-width: 380px;
    color: var(--yj-ink);
    transition: border-color var(--yj-m-mid) var(--yj-ease), box-shadow var(--yj-m-mid) var(--yj-ease);
}
body .password-modal.easter {
    border-color: var(--yj-yuja-600);
    box-shadow: var(--yj-sh-3), inset 0 0 0 1px var(--yj-yuja-600);
}
body .password-modal.shake { animation-duration: var(--yj-m-slow); }

#shield-icon {
    color: var(--yj-ink-deep);
    margin: 0 auto var(--yj-s4);
    transition: color var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
#shield-icon.easter { color: var(--yj-leaf-ink); }

#modal-title {
    margin: 0 0 var(--yj-s2);
    font-family: var(--yj-font-serif);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--yj-ink-deep);
}
#modal-desc {
    margin: 0 0 var(--yj-s5);
    font-size: var(--yj-t-small);
    color: var(--yj-sub);
}
body .pw-input {
    height: 52px;
    padding: 0 var(--yj-s4);
    margin-bottom: var(--yj-s3);
    background: var(--yj-card);
    border: 1px solid var(--yj-line-strong);
    border-radius: var(--yj-r-sm);
    color: var(--yj-ink-deep);
    font-size: 24px;
    transition: border-color var(--yj-m-fast) var(--yj-ease), box-shadow var(--yj-m-fast) var(--yj-ease);
}
body .pw-input::placeholder { color: var(--yj-faint); }
body .pw-input:focus {
    background: var(--yj-card-hi);
    border-color: var(--yj-yuja-600);
    box-shadow: inset 0 0 0 1px var(--yj-yuja-600);
}
#pw-error {
    font-size: var(--yj-t-small);
    color: var(--yj-error);
    transition: opacity var(--yj-m-fast) var(--yj-ease);
}

/* ── 유자 얼굴 (상단바 28 · 비밀번호 창 56) ── */
.yj-sp-face { width: 28px; height: 28px; flex: none; }
.yj-sp-face--lg { width: 56px; height: 56px; }
.yj-sp-face__peel { fill: var(--yj-yuja-500); stroke: currentColor; stroke-width: 1.4; }
.yj-sp-face__crown { fill: var(--yj-yuja-300); stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.yj-sp-face__eye { fill: currentColor; }
.yj-sp-face__mouth { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
#main-content > header .yj-sp-face { color: var(--yj-ink-deep); }

/* ── 본문 틀 ── */
#main-content {
    padding: 0;
    animation-duration: var(--yj-m-slow);
    animation-timing-function: var(--yj-ease);
}

/* ── 상단바: 56 · 불투명 미색 · 아래 1px 선 · 좌우 끝까지 ── */
#main-content > header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    height: 56px;
    margin: 0;
    text-align: left;
    background: var(--yj-card);
    border-bottom: 1px solid var(--yj-line);
}
#main-content > header .header-inner {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--yj-s2);
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--yj-s5);
}
#main-content > header .char-img { display: none; }
#main-content > header h1 {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-family: var(--yj-font-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--yj-ink-deep);
    white-space: nowrap;
}
#main-content > header .subtitle {
    display: inline;
    margin: 0;
    font-size: var(--yj-t-small);
    font-weight: 500;
    color: var(--yj-sub);
}
#main-content > header .warning-msg {
    margin: 0 0 0 auto;
    font-size: var(--yj-t-cap);
    font-weight: 500;
    color: var(--yj-sub);
    white-space: nowrap;
}

/* ── 본문 폭: 작업대라 넓게 ── */
#main-content > main {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--yj-s5) var(--yj-s5) 0;
}

/* ── 안내 상자: 유자 50 · 왼쪽 2px 원색 선 ── */
body main .secret-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--yj-s1) var(--yj-s4);
    padding: var(--yj-s3) var(--yj-s5);
    text-align: left;
    background: var(--yj-yuja-50);
    border: 0;
    border-left: 2px solid var(--yj-yuja-500);
    border-radius: var(--yj-r-lg);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}
body main .secret-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--yj-yuja-500);
}
body main .secret-card .card-icon { display: none; }
body main .secret-card .card-title {
    margin: 0;
    font-family: var(--yj-font-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--yj-ink-deep);
}
body main .secret-card .card-desc {
    flex: 1 1 320px;
    margin: 0;
    font-size: var(--yj-t-small);
    line-height: 1.6;
    color: var(--yj-ink);
}
body main .secret-card .restricted-badge {
    margin: 0;
    padding: 0 10px;
    height: 26px;
    gap: var(--yj-s1);
    background: transparent;
    border: 1px solid var(--yj-line-strong);
    border-radius: var(--yj-r-full);
    color: var(--yj-sub);
}
body main .secret-card .restricted-badge svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.6;
}
body main .secret-card .restricted-badge span {
    font-size: var(--yj-t-cap);
    font-weight: 600;
    color: var(--yj-sub);
}

/* ── 도구 묶음 격자: PC 2~3열 · 휴대폰 1열 ── */
body main .links-grid {
    margin-top: var(--yj-s5);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: var(--yj-s4);
    align-items: start;
}

/* 2열 이상이면 가장 긴 첫 묶음(홍보·출판)이 두 줄을 차지하고 나머지가 옆을 채운다 — 한 화면에 더 많이 */
@media (min-width: 740px) {
    body main .links-grid { grid-auto-flow: row dense; }
    body main .links-grid > .yj-sp-group:first-child { grid-row: span 2; }
}

/* 묶음 카드 한 장 */
.yj-sp-group {
    min-width: 0;
    background: var(--yj-card);
    border: 1px solid var(--yj-line);
    border-radius: var(--yj-r-lg);
    box-shadow: var(--yj-sh-1);
    overflow: hidden;
}
.yj-sp-group__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: var(--yj-s3);
    padding: var(--yj-s4) var(--yj-s5) var(--yj-s3);
    border-bottom: 1px solid var(--yj-line);
}
.yj-sp-group__label {
    grid-column: 1 / -1;
    color: var(--yj-yuja-ink);
}
.yj-sp-group__title {
    margin: 0;
    font-family: var(--yj-font-disp);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--yj-ink-deep);
}
.yj-sp-group__count {
    font-size: var(--yj-t-cap);
    font-weight: 500;
    color: var(--yj-sub);
    font-variant-numeric: tabular-nums;
}

/* 도구 행 — 옛 .secret-link 의 가운데 정렬·홀짝 바탕·들림을 덮는다 */
body .links-grid .secret-link.yj-sp-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--yj-s3);
    padding: var(--yj-s3) var(--yj-s5);
    text-align: left;
    background: var(--yj-card);
    border: 0;
    border-radius: 0;
    color: var(--yj-ink-deep);
    font-size: var(--yj-t-body);
    font-weight: 400;
    text-decoration: none;
    box-shadow: none;
    transform: none;
    transition: background-color var(--yj-m-fast) var(--yj-ease);
}
body .links-grid .secret-link.yj-sp-row + .secret-link.yj-sp-row { border-top: 1px solid var(--yj-line); }
body .links-grid .secret-link.yj-sp-row:hover {
    background: var(--yj-yuja-50) !important;
    box-shadow: none;
    transform: none;
}
body .links-grid .secret-link.yj-sp-row:active { background: var(--yj-yuja-100) !important; }
body .links-grid .secret-link.yj-sp-row:focus-visible {
    outline-offset: -2px;
    border-radius: 0;
}
.yj-sp-row__text { min-width: 0; }
.yj-sp-row__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--yj-s2);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--yj-ink-deep);
}
.yj-sp-row__desc {
    display: block;
    margin-top: 2px;
    font-size: var(--yj-t-small);
    line-height: 1.5;
    color: var(--yj-sub);
}
.yj-sp-row__go {
    color: var(--yj-sub);
    transition: color var(--yj-m-fast) var(--yj-ease), transform var(--yj-m-mid) var(--yj-ease);
}
body .links-grid .secret-link.yj-sp-row:hover .yj-sp-row__go {
    color: var(--yj-yuja-ink);
    transform: translateX(2px);
}

/* 표식 — 유자 배지(자주) · 외곽선 배지(로컬) */
.yj-sp-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--yj-s2);
    border-radius: var(--yj-r-full);
    font-size: var(--yj-t-label);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}
.yj-sp-badge--yuja {
    background: var(--yj-yuja-100);
    color: var(--yj-ink-deep);
}
.yj-sp-badge--line {
    background: transparent;
    border: 1px solid var(--yj-line-strong);
    color: var(--yj-sub);
}

/* ── 푸터: 캔버스 위 한 줄 ── */
#main-content > footer {
    max-width: 1240px;
    margin: var(--yj-s7) auto 0;
    padding: var(--yj-s4) var(--yj-s5) calc(var(--yj-s5) + var(--yj-safe-b));
    border-top: 1px solid var(--yj-line);
    text-align: left;
    font-size: var(--yj-t-cap);
    color: var(--yj-sub);
}

/* ── 휴대폰 ── */
@media (max-width: 639px) {
    #main-content > header .header-inner { padding: 0 var(--yj-s4); }
    #main-content > header .warning-msg { display: none; }
    #main-content > main { padding: var(--yj-s4) var(--yj-s4) 0; }
    body main .secret-card { padding: var(--yj-s3) var(--yj-s4); }
    .yj-sp-group__head { padding: var(--yj-s3) var(--yj-s4); }
    body .links-grid .secret-link.yj-sp-row { padding: var(--yj-s3) var(--yj-s4); }
    #main-content > footer { padding-inline: var(--yj-s4); }
}