@charset "utf-8";
@import url('root.css');

/* 전역 폰트: Pretendard GOV (자체 호스팅 — /common/fonts/) */
@font-face {
    font-family: "Pretendard GOV";
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url("/common/fonts/PretendardGOVVariable.woff2") format("woff2-variations"),
         url("/common/fonts/PretendardGOVVariable.woff2") format("woff2");
}

/* ============================================================
   Reset
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-y:scroll}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,picture,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{background:none;border:0;cursor:pointer;font:inherit;color:inherit}
input,select,textarea,button{font:inherit}
fieldset{border:0;padding:0;margin:0}
legend{padding:0}
table{border-collapse:collapse;width:100%}

body{
    margin:0;
    font-family:var(--font-family-base);
    font-size:var(--fs-17);            /* 16 → 17px (고령친화 기본) */
    line-height:var(--lh-base);
    color:var(--color-text);
    background:var(--color-bg);
    -webkit-font-smoothing:antialiased;
    word-break:keep-all;              /* 한글 줄바꿈 자연스럽게 */
}

/* 스크린리더 전용 */
.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* skip nav */
.skip-nav a{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:8px 16px;z-index:9999}
.skip-nav a:focus{left:0}

/* 키보드 포커스 (KWCAG 2.2 - 명확한 포커스 표시) */
:focus-visible{
    outline:3px solid #FFB300;
    outline-offset:2px;
    border-radius:4px;
    box-shadow:0 0 0 6px rgba(255,179,0,.25);
}
/* 모션 줄임 옵션 존중 (KWCAG 2.2) */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}
/* 명도 대비 강화 — root.css 에서 통합 관리 (중복 선언 제거) */

/* ============================================================
   Layout
   ============================================================ */
.container{
    width:100%;
    max-width:var(--container-max);
    margin:0 auto;
    padding:0 var(--container-pad);
}
main{display:block;min-height:60vh;padding:var(--space-5) 0 var(--space-9)}

/* ============================================================
   Header
   ============================================================ */
/* 상단 띠배너 (약속백일 최신글) */
.top-ribbon{ background:#1B4B9B; color:#fff; font-size:14px; }
.top-ribbon-inner{ display:flex; align-items:center; gap:12px; min-height:40px; padding-top:6px; padding-bottom:6px; }
.top-ribbon-link{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; justify-content:center; color:#fff; text-decoration:none; }
.top-ribbon-tag{ flex-shrink:0; background:#FFD24A; color:#16264D; font-size:12px; font-weight:800; border-radius:5px; padding:2px 9px; }
.top-ribbon-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.top-ribbon-link:hover .top-ribbon-txt{ text-decoration:underline; }
.top-ribbon-close{ flex-shrink:0; background:transparent; border:0; color:rgba(255,255,255,.85); font-size:16px; cursor:pointer; padding:4px 6px; line-height:1; border-radius:5px; }
.top-ribbon-close:hover{ background:rgba(255,255,255,.15); color:#fff; }
@media(max-width:600px){ .top-ribbon{ font-size:13px; } .top-ribbon-link{ justify-content:flex-start; } }

.header{
    position:sticky;top:0;z-index:100;
    background:#fff;border-bottom:var(--border-1);
    color:var(--color-text);
}
.header-inner{
    display:flex;align-items:center;justify-content:space-between;
    height:var(--header-h-mo);
    padding:0 var(--container-pad);
}
.header .logo{
    display:flex;align-items:center;gap:8px;
    font-size:var(--fs-18);font-weight:var(--fw-bold);
    color:var(--color-primary);
}
.header .logo-mark{
    width:32px;height:32px;border-radius:8px;
    background:var(--color-primary);color:#fff;
    display:grid;place-items:center;font-weight:var(--fw-bold);
}
.header .gnb{display:none}
.header .btn-menu{
    width:44px;height:44px;display:grid;place-items:center;
    border-radius:8px;
}
.header .btn-menu:hover{background:var(--color-primary-light)}

/* 로고 높이 = 모든 기기 동일(데스크탑 기준) */
.header .logo-img{height:calc(var(--header-h-pc) * 0.5);width:auto;display:block}
@media(min-width:1024px){
    .header-inner{height:var(--header-h-pc)}
    .header .logo-img{height:calc(var(--header-h-pc) * 0.5)}
    .header .btn-menu{display:none}
    .header .gnb{display:flex;gap:calc(var(--space-7) * 1.5);align-items:center}
    .header .gnb a{
        padding:8px 4px;font-size:var(--fs-19);font-weight:var(--fw-bold);
        color:var(--color-text);border-bottom:3px solid transparent;
        transition:color var(--t-fast),border-color var(--t-fast);
    }
    .header .gnb a:hover,.header .gnb a.on{
        color:var(--color-primary);border-bottom-color:var(--color-primary);
    }
}
.header .util{display:flex;gap:var(--space-2);align-items:center}
.header .util a{font-size:var(--fs-15);color:var(--color-text-sub);padding:8px}
.header .util .login-btn{
    background:var(--color-primary);color:#fff;padding:8px 14px;border-radius:var(--radius-pill);font-weight:var(--fw-medium);
}

/* 모바일 GNB 패널 */
.mobile-gnb{
    position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;
    display:none;
}
.mobile-gnb.open{display:block}
.mobile-gnb-panel{
    position:absolute;right:0;top:0;bottom:0;width:80%;max-width:340px;
    background:#fff;padding:var(--space-5);overflow-y:auto;
}
.mobile-gnb-panel .close{
    width:40px;height:40px;display:grid;place-items:center;margin-left:auto;
}
.mobile-gnb-panel nav a{
    display:block;padding:16px 4px;font-size:var(--fs-19);font-weight:var(--fw-bold);
    border-bottom:1px solid var(--color-border);
}

/* ============================================================
   LNB (좌측 메뉴 - 마이페이지/관리자)
   ============================================================ */
.lnb{
    background:#fff;border:var(--border-1);border-radius:var(--radius);
    padding:var(--space-4);
}
.lnb-title{font-size:var(--fs-18);font-weight:var(--fw-bold);margin-bottom:var(--space-3);color:var(--color-primary)}
.lnb ul li a{
    display:block;padding:13px 14px;border-radius:8px;
    color:var(--color-text-sub);font-size:var(--fs-16);
    transition:background var(--t-fast),color var(--t-fast);
}
.lnb ul li a:hover{background:var(--color-primary-light);color:var(--color-primary)}
.lnb ul li a.on{background:var(--color-primary);color:#fff;font-weight:var(--fw-medium)}

/* ============================================================
   Footer
   ============================================================ */
.footer{
    background:#0F2238;color:#C5D1E2;padding:48px 0 28px;
    margin-top:0;
}
.footer .ft-grid{
    display:grid; grid-template-columns:1fr; gap:32px;
    padding-bottom:28px; border-bottom:1px solid #243650;
}
@media(min-width:768px){
    .footer .ft-grid{ grid-template-columns:1.8fr 1fr 1fr; gap:40px; }
}
.footer .ft-title{ color:#fff; font-weight:800; font-size:17px; margin-bottom:12px; }
.footer .ft-desc{ font-size:14px; color:#9EB0C5; line-height:1.7; margin-bottom:14px; word-break:keep-all; }
.footer .ft-meta{ font-size:13px; color:#8294AB; line-height:1.9; }
.footer .ft-col-head{ color:#fff; font-weight:700; font-size:15px; margin-bottom:14px; }
.footer .ft-col ul{ list-style:none; padding:0; margin:0; }
.footer .ft-col li{ margin-bottom:9px; }
.footer .ft-col a{ color:#B6C4D6; font-size:14px; text-decoration:none; transition:color .15s; }
.footer .ft-col a:hover{ color:#fff; }
.footer .ft-bottom{ margin-top:22px; font-size:13px; line-height:1.8; }
.footer .ft-org{ color:#8294AB; }
.footer .ft-copy{ color:#7E90A5; margin-top:4px; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    height:46px;padding:0 var(--space-5);border-radius:var(--radius-sm);
    font-size:var(--fs-16);font-weight:var(--fw-medium);line-height:1;
    transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);
    cursor:pointer;border:1px solid transparent;
}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-dark)}
.btn-outline{background:#fff;color:var(--color-primary);border-color:var(--color-primary)}
.btn-outline:hover{background:var(--color-primary-light)}
.btn-line{background:#fff;color:var(--color-text-sub);border-color:var(--color-border-strong)}
.btn-line:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn-danger{background:var(--color-danger);color:#fff}
.btn-ghost{background:transparent;color:var(--color-text-sub)}
.btn-ghost:hover{background:var(--color-primary-light);color:var(--color-primary)}
.btn-block{display:flex;width:100%}
.btn-lg{height:54px;font-size:var(--fs-17);padding:0 var(--space-6)}
.btn-sm{height:36px;padding:0 12px;font-size:var(--fs-14)}

/* ============================================================
   Form
   ============================================================ */
.form-row{margin-bottom:var(--space-4)}
.form-label{
    display:block;font-size:var(--fs-16);font-weight:var(--fw-semi); /* 14→16px, 굵기 강화 */
    color:var(--color-text);margin-bottom:7px;
}
.form-label .req{color:var(--color-danger);margin-left:2px}
.form-help{font-size:var(--fs-14);color:var(--color-text-mute);margin-top:5px}

.input,.select,.textarea{
    width:100%;height:50px;padding:0 15px;  /* 48→50px, 터치 영역 확대 */
    background:#fff;border:1.5px solid var(--color-border-strong);border-radius:var(--radius-sm);
    color:var(--color-text);font-size:var(--fs-16);  /* 15→16px */
    transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.input:focus,.select:focus,.textarea:focus{
    border-color:var(--color-primary);outline:none;
    box-shadow:0 0 0 3px rgba(0,91,172,.15);
}
.textarea{height:auto;min-height:160px;padding:12px 14px;line-height:var(--lh-base);resize:vertical}
.input.error,.select.error,.textarea.error{border-color:var(--color-danger);box-shadow:0 0 0 3px rgba(200,16,46,.12)}

.form-group{display:grid;gap:var(--space-2)}
.form-group.cols-2{grid-template-columns:1fr 1fr;gap:var(--space-2)}

.checkbox,.radio{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    padding:6px 10px;border-radius:var(--radius-pill);
    font-size:var(--fs-16);  /* 14→16px (고령친화) */
}
.checkbox input,.radio input{width:20px;height:20px;accent-color:var(--color-primary)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
    display:inline-flex;align-items:center;gap:4px;
    padding:9px 16px;background:#fff;border:1.5px solid var(--color-border-strong);
    border-radius:var(--radius-pill);color:var(--color-text-sub);
    font-size:var(--fs-15);cursor:pointer;transition:all var(--t-fast);
}
.chip:hover{border-color:var(--color-primary);color:var(--color-primary)}
.chip.on{background:var(--color-primary);color:#fff;border-color:var(--color-primary);font-weight:var(--fw-medium)}

/* 글자수 카운터 */
.char-count{text-align:right;font-size:var(--fs-13);color:var(--color-text-mute);margin-top:4px}
.char-count.over{color:var(--color-danger);font-weight:var(--fw-medium)}

/* ============================================================
   Cards / Lists
   ============================================================ */
.card{
    background:#fff;border:var(--border-1);border-radius:var(--radius);
    padding:var(--space-5);box-shadow:var(--shadow-sm);
}
.card-title{font-size:var(--fs-18);font-weight:var(--fw-bold);margin-bottom:var(--space-3)}

.list-board{display:flex;flex-direction:column;gap:var(--space-3)}
.list-board .item{
    display:block;background:#fff;border:var(--border-1);border-radius:var(--radius);
    padding:var(--space-4) var(--space-5);transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.list-board .item:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.list-board .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:var(--fs-14);color:var(--color-text-mute);margin-bottom:7px}
.list-board .ttl{font-size:var(--fs-18);font-weight:var(--fw-semi);color:var(--color-text);line-height:var(--lh-tight)}
.list-board .sum{font-size:var(--fs-15);color:var(--color-text-sub);margin-top:5px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list-board .bot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:var(--fs-14);color:var(--color-text-mute)}

/* === 카드 분리 구조 (좋아요 버튼 클릭 가능) === */
.lbc{
    background:#fff;border:var(--border-1);border-radius:var(--radius);
    transition:border-color var(--t-fast),box-shadow var(--t-fast);
    display:flex;flex-direction:column;
}
.lbc:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.lbc-main{
    display:block;padding:var(--space-4) var(--space-5) var(--space-3);
    text-decoration:none;color:inherit;
}
.lbc-main:hover .ttl{color:var(--color-primary)}
.lbc-foot{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:0 var(--space-5) var(--space-3);
    font-size:var(--fs-14);color:var(--color-text-mute);
}
.lbc-info{display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-width:0}
.lbc-info .sep{color:var(--color-border-strong)}

/* 작은 좋아요 버튼 - 카드용 */
.like-btn.like-btn-mini{
    padding:6px 12px;font-size:13px;gap:5px;border-width:1px;
    flex-shrink:0;line-height:1;
}
.like-btn.like-btn-mini .heart{width:16px;height:16px}
.like-btn.like-btn-mini .count{font-size:13px;min-width:10px}

/* ============================================================
   Badge / Status pill
   ============================================================ */
.badge{
    display:inline-flex;align-items:center;
    padding:5px 11px;border-radius:var(--radius-pill);
    font-size:var(--fs-13);font-weight:var(--fw-medium);line-height:1.4;
    background:var(--color-primary-light);color:var(--color-primary);
}
.badge-cat{background:#EEF3FA;color:var(--color-primary)}
.badge-region{background:#FFF6E6;color:#8B5A00}

.status{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 13px;border-radius:var(--radius-pill);
    font-size:var(--fs-14);font-weight:var(--fw-medium);
}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.st-received{color:var(--st-received);background:#E8F1FB}
.status.st-waiting{color:var(--st-waiting);background:#EEF1F4}
.status.st-assigned,.status.st-processing{color:var(--st-processing);background:#FFF4DE}
.status.st-done{color:var(--st-done);background:#E5F4E7}
.status.st-rejected{color:var(--st-rejected);background:#FBE7EA}

/* ============================================================
   Pagination
   ============================================================ */
.pagination{display:flex;justify-content:center;gap:6px;margin:var(--space-7) 0}
.pagination a{
    min-width:44px;height:44px;padding:0 10px;  /* 터치 영역 44px */
    display:inline-flex;align-items:center;justify-content:center;
    border:var(--border-1);border-radius:8px;background:#fff;
    color:var(--color-text-sub);font-size:var(--fs-15);
}
.pagination a:hover{border-color:var(--color-primary);color:var(--color-primary)}
.pagination a.on{background:var(--color-primary);color:#fff;border-color:var(--color-primary);font-weight:var(--fw-medium)}

/* ============================================================
   Alerts
   ============================================================ */
.alert{
    padding:14px 18px;border-radius:var(--radius-sm);font-size:var(--fs-15);
    margin-bottom:var(--space-4);line-height:var(--lh-base);
}
.alert-info{background:#E8F1FB;color:var(--color-primary)}
.alert-success{background:#E5F4E7;color:var(--color-success)}
.alert-warning{background:#FFF4DE;color:#8B5A00}
.alert-danger{background:#FBE7EA;color:var(--color-danger)}

/* ============================================================
   좋아요 (Like) 버튼
   ============================================================ */
.like-btn{
    --like-color:#E5446D;
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 18px;border-radius:var(--radius-pill);
    background:#fff;border:1.5px solid var(--color-border-strong);
    color:var(--color-text-sub);font-size:var(--fs-14);font-weight:var(--fw-medium);
    cursor:pointer;transition:all .2s ease;user-select:none;
    line-height:1;
}
.like-btn:hover:not(:disabled){
    border-color:var(--like-color);color:var(--like-color);
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(229,68,109,.18);
}
.like-btn:disabled{opacity:.55;cursor:not-allowed}
.like-btn .heart{
    width:20px;height:20px;display:inline-block;flex-shrink:0;
    transition:transform .25s cubic-bezier(.4,1.5,.6,1);
}
.like-btn .heart svg{display:block;width:100%;height:100%;stroke:currentColor;stroke-width:2;fill:none;transition:fill .2s,stroke .2s}
.like-btn .count{font-family:var(--font-family-num);font-weight:var(--fw-semi);min-width:14px;text-align:left}

.like-btn.liked{
    background:linear-gradient(135deg,#FFE4EC 0%,#FFD0DC 100%);
    border-color:var(--like-color);color:var(--like-color);
}
.like-btn.liked .heart svg{fill:var(--like-color);stroke:var(--like-color)}
.like-btn.liked .heart{animation:heartPop .55s cubic-bezier(.4,1.6,.6,1)}

/* 부유 하트 (펑!) */
.like-btn.liked .heart::after{
    content:"";position:absolute;
}

@keyframes heartPop{
    0%{transform:scale(1)}
    30%{transform:scale(1.4) rotate(-8deg)}
    55%{transform:scale(.85) rotate(4deg)}
    100%{transform:scale(1) rotate(0)}
}

/* 큰 버전 (상세페이지) */
.like-btn-lg{
    padding:14px 28px;font-size:var(--fs-16);gap:10px;
}
.like-btn-lg .heart{width:26px;height:26px}
.like-btn-lg .count{font-size:var(--fs-18)}

/* 작은 인디케이터 (목록) */
.like-mini{
    display:inline-flex;align-items:center;gap:4px;
    color:var(--color-text-mute);font-size:var(--fs-13);
}
.like-mini svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.like-mini.has{color:var(--like-color,#E5446D)}
.like-mini.has svg{fill:var(--like-color,#E5446D);stroke:var(--like-color,#E5446D)}

/* 댓글 수 미니 표시 */
.cm-mini{
    display:inline-flex;align-items:center;gap:4px;
    color:var(--color-text-mute);font-size:var(--fs-13);
}
.cm-mini svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.cm-mini.has{color:var(--color-primary)}

/* 좋아요 했을 때 떠오르는 작은 효과 */
.heart-burst{
    position:absolute;pointer-events:none;
    width:50px;height:50px;left:50%;top:50%;
    transform:translate(-50%,-50%);
}
.heart-burst span{
    position:absolute;left:50%;top:50%;
    width:6px;height:6px;border-radius:50%;
    background:#E5446D;opacity:0;
    animation:burst .7s ease-out forwards;
}
@keyframes burst{
    0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}
    100%{opacity:0;transform:translate(var(--bx,0),var(--by,0)) scale(.2)}
}

/* ============================================================
   Modal
   ============================================================ */
.modal-back{
    position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;
    display:none;align-items:center;justify-content:center;padding:16px;
}
.modal-back.open{display:flex}
.modal{
    background:#fff;border-radius:var(--radius-lg);width:100%;max-width:480px;
    padding:var(--space-6);box-shadow:var(--shadow-lg);
}
.modal h3{font-size:var(--fs-18);font-weight:var(--fw-bold);margin-bottom:var(--space-3)}
.modal-actions{display:flex;gap:8px;margin-top:var(--space-5)}

/* ============================================================
   Utilities
   ============================================================ */
.text-center{text-align:center}
.text-right{text-align:right}
.text-mute{color:var(--color-text-mute)}
.text-primary{color:var(--color-primary)}
.text-danger{color:var(--color-danger)}
.fw-bold{font-weight:var(--fw-bold)}
.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}
.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}
.mb-4{margin-bottom:var(--space-4)}.mb-5{margin-bottom:var(--space-5)}
.flex{display:flex}.flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}
.hide-mo{display:none}
@media(min-width:768px){
    .hide-mo{display:block}
    .hide-pc{display:none}
}

/* ============================================================
   음성 입력 버튼 (.btn-speech)
   ============================================================ */
.btn-speech{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:8px 10px;min-width:58px;
    background:#fff;border:1.5px solid var(--color-border);border-radius:var(--radius);
    color:var(--color-text-sub);cursor:pointer;font-size:11px;font-family:inherit;
    transition:border-color .15s,background .15s,color .15s;
    flex-shrink:0;align-self:flex-start;margin-top:2px;
}
.btn-speech:hover{border-color:var(--color-primary);color:var(--color-primary);}
.btn-speech svg{display:block;}
.btn-speech-label{line-height:1;white-space:nowrap;}

/* 녹음 중 상태 */
.btn-speech.recording{
    background:var(--color-danger,#C8102E);border-color:var(--color-danger,#C8102E);
    color:#fff;animation:speech-pulse 1s ease-in-out infinite;
}
@keyframes speech-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.4);}
    50%{box-shadow:0 0 0 6px rgba(200,16,46,0);}
}

/* ============================================================
   음성 입력 버튼 (.btn-speech)
   ============================================================ */
.btn-speech{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:8px 10px;min-width:58px;
    background:#fff;border:1.5px solid var(--color-border);border-radius:var(--radius);
    color:var(--color-text-sub);cursor:pointer;font-size:11px;font-family:inherit;
    transition:border-color .15s,background .15s,color .15s;
    flex-shrink:0;align-self:flex-start;margin-top:2px;
}
.btn-speech:hover{border-color:var(--color-primary);color:var(--color-primary);}
.btn-speech svg{display:block;}
.btn-speech-label{line-height:1;white-space:nowrap;}
.btn-speech.recording{
    background:var(--color-danger,#C8102E);border-color:var(--color-danger,#C8102E);
    color:#fff;animation:speech-pulse 1s ease-in-out infinite;
}
@keyframes speech-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.4);}
    50%{box-shadow:0 0 0 6px rgba(200,16,46,0);}
}

/* ============================================================
   카테고리 설명 박스 (.cat-desc-box)
   ============================================================ */
.cat-desc-box {
    margin-top: 8px;
    padding: 10px 14px;
    background: var(--color-primary-light, #EAF3FA);
    border-left: 3px solid var(--color-primary, #005BAC);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: var(--color-text-sub, #525C6B);
    line-height: 1.6;
    animation: desc-fade-in .18s ease;
}
@keyframes desc-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   카테고리 설명 박스
   ============================================================ */
.cat-desc-box{
    margin-top:8px;
    padding:10px 14px;
    background:var(--color-primary-light,#EAF3FA);
    border-left:3px solid var(--color-primary,#005BAC);
    border-radius:0 6px 6px 0;
    font-size:13px;
    color:var(--color-text-sub,#525C6B);
    line-height:1.65;
    animation:catDescIn .15s ease;
}
@keyframes catDescIn{
    from{opacity:0;transform:translateY(-4px)}
    to{opacity:1;transform:translateY(0)}
}

/* 비밀번호 보기 토글 (눈 아이콘) */
.pw-wrap{ position:relative; display:block; }
.pw-wrap .input{ width:100%; padding-right:44px; }
.pw-eye{
    position:absolute; top:50%; right:8px; transform:translateY(-50%);
    background:none; border:0; padding:6px; cursor:pointer;
    color:#8A93A6; display:flex; align-items:center; justify-content:center;
    border-radius:6px;
}
.pw-eye:hover{ color:var(--color-primary); background:rgba(0,0,0,.04); }