/* =============================================================
   app.css - 공통 스타일 (모바일 우선 반응형)
   포인트 색상은 청록(teal) 한 가지만 사용
   ============================================================= */

:root{
    --c-point:      #0F766E;   /* 포인트 (버튼, 선택 상태) */
    --c-point-dark: #0B5D57;
    --c-point-bg:   #E6F2F1;   /* 포인트 연한 배경 (선택 카드 등) */
    --c-bg:         #F5F6F8;   /* 페이지 배경 */
    --c-card:       #FFFFFF;
    --c-text:       #1F2937;
    --c-sub:        #6B7280;
    --c-line:       #E2E5EA;
    --c-danger:     #C0392B;
    --radius:       14px;
    --shadow:       0 1px 4px rgba(30,40,60,.08);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
    font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
                "Malgun Gothic","맑은 고딕",system-ui,sans-serif;
    font-size:16px; line-height:1.6;
    color:var(--c-text); background:var(--c-bg);
    -webkit-font-smoothing:antialiased;
}
a{ color:var(--c-point); text-decoration:none; }
img{ max-width:100%; }

/* ---------- 레이아웃 ---------- */
.page{ max-width:560px; margin:0 auto; padding:20px 16px 40px; }
.page-wide{ max-width:1080px; }

.card{
    background:var(--c-card); border:1px solid var(--c-line);
    border-radius:var(--radius); box-shadow:var(--shadow);
    padding:22px 20px; margin-bottom:16px;
}

.h1{ font-size:24px; font-weight:700; margin-bottom:6px; }
.h2{ font-size:19px; font-weight:700; margin-bottom:14px; }
.sub{ color:var(--c-sub); font-size:15px; }
.center{ text-align:center; }
.mt8{margin-top:8px} .mt16{margin-top:16px} .mt24{margin-top:24px}
.mb8{margin-bottom:8px} .mb16{margin-bottom:16px}

/* ---------- 폼 ---------- */
.field{ margin-bottom:16px; }
.field label{
    display:block; font-size:15px; font-weight:600;
    margin-bottom:6px; color:var(--c-text);
}
.field .req{ color:var(--c-danger); margin-left:2px; }

.inp, select.inp, textarea.inp{
    width:100%; height:52px; padding:0 14px;
    font-size:16px; font-family:inherit; color:var(--c-text);
    background:#fff; border:1.5px solid var(--c-line); border-radius:10px;
    outline:none; -webkit-appearance:none;
}
textarea.inp{ height:auto; min-height:120px; padding:12px 14px; line-height:1.6; resize:vertical; }
.inp:focus{ border-color:var(--c-point); box-shadow:0 0 0 3px rgba(15,118,110,.12); }
.inp::placeholder{ color:#AEB4BD; }

.field .err{ display:none; color:var(--c-danger); font-size:13.5px; margin-top:5px; }
.field.invalid .inp{ border-color:var(--c-danger); }
.field.invalid .err{ display:block; }

/* 체크박스 (터치 영역 크게) */
.chk{
    display:flex; align-items:center; gap:10px;
    font-size:15px; cursor:pointer; user-select:none; padding:6px 0;
}
.chk input{ width:22px; height:22px; accent-color:var(--c-point); flex:none; }

/* ---------- 버튼 ---------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:52px; padding:0 22px; border-radius:12px;
    font-size:17px; font-weight:600; font-family:inherit;
    border:1.5px solid transparent; cursor:pointer;
    transition:background .15s; text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:translateY(1px); }
.btn-block{ display:flex; width:100%; }
.btn-primary{ background:var(--c-point); color:#fff; }
.btn-primary:hover{ background:var(--c-point-dark); }
.btn-primary:disabled{ background:#9CC4C0; cursor:default; }
.btn-line{ background:#fff; color:var(--c-point); border-color:var(--c-point); }
.btn-gray{ background:#fff; color:var(--c-text); border-color:var(--c-line); }
.btn-sm{ height:40px; padding:0 14px; font-size:14.5px; border-radius:9px; }

/* ---------- 알림 ---------- */
.alert{
    padding:13px 15px; border-radius:10px; font-size:14.5px;
    margin-bottom:16px; display:none;
}
.alert.show{ display:block; }
.alert-error{ background:#FBEDEB; color:var(--c-danger); }
.alert-info{ background:var(--c-point-bg); color:var(--c-point-dark); }

/* 토스트 */
#toast{
    position:fixed; left:50%; bottom:88px; transform:translateX(-50%);
    background:rgba(31,41,55,.94); color:#fff; font-size:15px;
    padding:12px 20px; border-radius:24px; z-index:999;
    opacity:0; pointer-events:none; transition:opacity .25s;
    max-width:88%; text-align:center;
}
#toast.show{ opacity:1; }

/* ---------- 로딩 스피너 ---------- */
.spinner{
    width:22px; height:22px; border:3px solid rgba(255,255,255,.35);
    border-top-color:#fff; border-radius:50%;
    animation:spin .7s linear infinite; display:inline-block;
    vertical-align:middle;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- 인증(로그인/가입) 전용 ---------- */
.auth-wrap{
    min-height:100vh; display:flex; flex-direction:column;
    justify-content:center; max-width:440px; margin:0 auto; padding:32px 20px;
}
.auth-logo{ text-align:center; margin-bottom:28px; }
.auth-logo .name{ font-size:28px; font-weight:800; color:var(--c-point); letter-spacing:-.5px; }
.auth-logo .tag{ color:var(--c-sub); font-size:15px; margin-top:6px; }
.auth-links{
    display:flex; justify-content:center; gap:8px;
    margin-top:18px; font-size:14.5px; color:var(--c-sub);
}
.auth-links a{ color:var(--c-sub); padding:6px 8px; }
.auth-links .bar{ color:var(--c-line); align-self:center; }
.divider{
    display:flex; align-items:center; gap:12px;
    color:#AEB4BD; font-size:13.5px; margin:22px 0;
}
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--c-line); }

/* ---------- PC 확장 ---------- */
@media (min-width:768px){
    body{ font-size:16px; }
    .card{ padding:28px 26px; }
}

/* =============================================================
   3단계 추가: 앱 레이아웃 (하단 메뉴 / PC 사이드바 / 대시보드)
   ============================================================= */

/* ---------- 앱 셸 ---------- */
.app-shell{ min-height:100vh; }
.main{ padding-bottom:84px; }  /* 하단 메뉴 높이만큼 여백 */
.content{ max-width:560px; margin:0 auto; padding:16px 16px 24px; }

/* 상단바 (모바일) */
.topbar{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    height:54px; padding:0 16px;
    background:rgba(255,255,255,.96); border-bottom:1px solid var(--c-line);
    backdrop-filter:blur(6px);
}
.topbar-title{ font-size:18px; font-weight:700; }
.topbar-user{ font-size:14px; color:var(--c-sub); }

/* 사이드바 (기본 숨김) */
.sidebar{ display:none; }

/* ---------- 모바일 하단 고정 메뉴 ---------- */
.bottomnav{
    position:fixed; left:0; right:0; bottom:0; z-index:100;
    display:flex; height:64px;
    padding-bottom:env(safe-area-inset-bottom);
    background:#fff; border-top:1px solid var(--c-line);
}
.bn-item{
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px;
    font-size:11.5px; color:#8A919C; text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}
.bn-item svg{ width:23px; height:23px; }
.bn-item.active{ color:var(--c-point); font-weight:600; }
.bn-new{ position:relative; }
.bn-new-btn{
    display:flex; align-items:center; justify-content:center;
    width:46px; height:46px; margin-top:-22px; margin-bottom:1px;
    background:var(--c-point); color:#fff; border-radius:50%;
    box-shadow:0 3px 8px rgba(15,118,110,.35);
}
.bn-new-btn svg{ width:22px; height:22px; }
.bn-new span:last-child{ color:#8A919C; }

/* ---------- 대시보드 ---------- */
.greet .hello{ font-size:21px; font-weight:700; }
.greet .date{ color:var(--c-sub); font-size:14.5px; margin-top:2px; }

.quick-actions{ display:flex; gap:10px; margin:16px 0; }
.quick-actions .btn{ flex:1; height:58px; font-size:16.5px; }

/* 진행률 */
.progress-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.progress-head .pct{ font-size:22px; font-weight:800; color:var(--c-point); }
.progress-bar{
    height:12px; background:#EAEDF1; border-radius:6px; overflow:hidden;
}
.progress-bar .fill{
    height:100%; background:var(--c-point); border-radius:6px;
    transition:width .6s ease;
}
.progress-nums{
    display:flex; justify-content:space-between;
    margin-top:10px; font-size:14px; color:var(--c-sub);
}
.progress-nums b{ color:var(--c-text); }

/* 통계 그리드 */
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stat-box{
    background:var(--c-card); border:1px solid var(--c-line);
    border-radius:12px; padding:14px 8px; text-align:center;
}
.stat-box .num{ font-size:22px; font-weight:800; color:var(--c-point); }
.stat-box .lbl{ font-size:12.5px; color:var(--c-sub); margin-top:2px; }

/* 문서 리스트 아이템 */
.doc-item{
    display:flex; align-items:center; gap:12px;
    padding:14px 2px; border-bottom:1px solid var(--c-line);
    color:var(--c-text); text-decoration:none;
}
.doc-item:last-child{ border-bottom:none; }
.doc-item .info{ flex:1; min-width:0; }
.doc-item .title{
    font-size:15.5px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.doc-item .meta{ font-size:13px; color:var(--c-sub); margin-top:2px; }
.doc-item .arrow{ color:#C3C9D1; flex:none; }

/* 상태 배지 */
.badge{
    display:inline-block; padding:3px 9px; border-radius:20px;
    font-size:12px; font-weight:600; flex:none;
}
.badge-T{ background:#F1F3F6; color:#6B7280; }   /* 임시저장 */
.badge-G{ background:#E8F0FE; color:#1A56DB; }   /* AI 생성완료 */
.badge-F{ background:var(--c-point-bg); color:var(--c-point-dark); } /* 최종완료 */
.badge-S{ background:#EFE9FB; color:#6D28D9; }   /* 제출완료 */

/* 섹션 헤더 (더보기 링크) */
.sec-head{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:6px;
}
.sec-head .more{ font-size:13.5px; color:var(--c-sub); }

/* 빈 상태 */
.empty{
    text-align:center; color:var(--c-sub); font-size:14.5px;
    padding:26px 10px;
}

/* 체험 모드 배너 */
.guest-banner{
    background:#FFF7E6; border:1px solid #F5DFA8; color:#8A6D1A;
    border-radius:12px; padding:12px 14px; font-size:14px; margin-bottom:14px;
}
.guest-banner a{ color:#8A6D1A; font-weight:700; text-decoration:underline; }

/* 양식 카드 */
.form-card{
    display:flex; align-items:center; gap:14px;
    background:var(--c-card); border:1.5px solid var(--c-line);
    border-radius:var(--radius); padding:18px 16px; margin-bottom:10px;
    color:var(--c-text); text-decoration:none;
}
.form-card:active{ border-color:var(--c-point); }
.form-card .fc-name{ font-size:16px; font-weight:700; }
.form-card .fc-desc{ font-size:13.5px; color:var(--c-sub); margin-top:2px; }
.form-card.disabled{ opacity:.45; pointer-events:none; }
.form-card .fc-soon{
    margin-left:auto; flex:none; font-size:12px; color:var(--c-sub);
    background:#F1F3F6; padding:3px 9px; border-radius:20px;
}

/* ---------- PC 레이아웃 (1024px~) ---------- */
@media (min-width:1024px){
    .app-shell{ display:flex; }
    .bottomnav{ display:none; }
    .topbar{ display:none; }
    .main{ flex:1; padding-bottom:40px; }
    .content{ max-width:720px; margin:0; padding:36px 40px; }

    .sidebar{
        display:flex; flex-direction:column;
        width:230px; flex:none; min-height:100vh;
        background:#fff; border-right:1px solid var(--c-line);
        padding:24px 14px; position:sticky; top:0; height:100vh;
    }
    .side-logo{
        font-size:21px; font-weight:800; color:var(--c-point);
        text-decoration:none; padding:4px 12px 22px;
    }
    .side-nav{ display:flex; flex-direction:column; gap:4px; }
    .side-item{
        display:flex; align-items:center; gap:11px;
        padding:12px 12px; border-radius:10px;
        font-size:15.5px; color:#4B5563; text-decoration:none;
    }
    .side-item svg{ width:21px; height:21px; }
    .side-item:hover{ background:#F3F5F7; }
    .side-item.active{ background:var(--c-point-bg); color:var(--c-point-dark); font-weight:700; }
    .side-bottom{
        margin-top:auto; padding:12px;
        display:flex; justify-content:space-between; font-size:14px;
    }
}

/* =============================================================
   4단계 추가: 작성 위저드 (단계 카드, 선택 칩, 하단 액션바)
   ============================================================= */

/* 상단 진행 표시줄 */
.wz-progress{ margin-bottom:18px; }
.wz-progress .wz-label{
    display:flex; justify-content:space-between; align-items:baseline;
    margin-bottom:8px;
}
.wz-progress .wz-title{ font-size:17px; font-weight:700; }
.wz-progress .wz-count{ font-size:13.5px; color:var(--c-sub); }
.wz-progress .track{ height:6px; background:#EAEDF1; border-radius:3px; overflow:hidden; }
.wz-progress .track .fill{
    height:100%; background:var(--c-point); border-radius:3px;
    transition:width .3s ease;
}

/* 단계 섹션 (한 번에 하나만 표시) */
.wstep{ display:none; }
.wstep.on{ display:block; animation:stepIn .22s ease; }
@keyframes stepIn{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:none;} }

/* 선택 칩 */
.chip-grid{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
    display:inline-flex; align-items:center;
    padding:12px 15px; min-height:46px;
    background:#fff; border:1.5px solid var(--c-line); border-radius:12px;
    font-size:14.5px; color:var(--c-text); cursor:pointer; user-select:none;
    -webkit-tap-highlight-color:transparent; transition:all .12s;
}
.chip.on{
    background:var(--c-point-bg); border-color:var(--c-point);
    color:var(--c-point-dark); font-weight:700;
}
.chip.on::before{ content:"✓ "; margin-right:4px; }

/* 세부활동 그룹 헤딩 */
.dt-group{ margin-bottom:18px; }
.dt-group .dt-head{
    font-size:15px; font-weight:700; color:var(--c-point-dark);
    margin-bottom:9px; padding-left:2px;
}

/* 선택 개수 뱃지 */
.sel-count{
    display:inline-block; margin-left:6px; padding:1px 8px;
    background:var(--c-point); color:#fff; border-radius:12px;
    font-size:12px; font-weight:700; vertical-align:2px;
}

/* 시간 계산 안내 박스 */
.time-calc{
    display:flex; justify-content:space-between; align-items:center;
    background:var(--c-point-bg); border-radius:10px;
    padding:12px 14px; font-size:14.5px; color:var(--c-point-dark);
}
.time-calc b{ font-size:16px; }

/* 2열 필드 */
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; min-width:0; }

/* 하단 고정 액션바 */
.wz-actions{
    position:fixed; left:0; right:0; z-index:90;
    bottom:calc(64px + env(safe-area-inset-bottom));
    display:flex; gap:10px; padding:10px 16px;
    background:rgba(255,255,255,.97); border-top:1px solid var(--c-line);
}
.wz-actions .btn{ height:50px; }
.wz-actions .btn-prev{ flex:1; }
.wz-actions .btn-next{ flex:2; }
.wz-spacer{ height:86px; }
.wz-savenote{
    text-align:center; font-size:12.5px; color:#AEB4BD; margin-top:6px;
}

/* 최종 확인 요약 */
.sum-row{ padding:11px 0; border-bottom:1px solid var(--c-line); }
.sum-row:last-child{ border-bottom:none; }
.sum-row .sum-label{ font-size:13px; color:var(--c-sub); margin-bottom:3px; }
.sum-row .sum-value{ font-size:15px; line-height:1.55; }
.sum-row .sum-value .tag{
    display:inline-block; background:#F1F3F6; border-radius:8px;
    padding:3px 9px; margin:2px 4px 2px 0; font-size:13.5px;
}

@media (min-width:1024px){
    .wz-actions{
        position:static; padding:16px 0 0; border-top:none; background:none;
    }
    .wz-spacer{ display:none; }
}

/* =============================================================
   5단계 추가: AI 생성 화면
   ============================================================= */

/* 생성 중 로딩 */
.gen-loading{ text-align:center; padding:52px 20px; }
.gen-loading .big-spinner{
    width:44px; height:44px; margin:0 auto 18px;
    border:4px solid #E2ECEB; border-top-color:var(--c-point);
    border-radius:50%; animation:spin .8s linear infinite;
}
.gen-loading .msg{ font-size:16px; font-weight:600; }
.gen-loading .sub-msg{ font-size:13.5px; color:var(--c-sub); margin-top:6px; }

/* 생성 실패 */
.gen-error{ text-align:center; padding:40px 20px; }
.gen-error .icon{ font-size:38px; margin-bottom:10px; }

/* 결과 편집기 */
textarea.editor{
    width:100%; min-height:440px; padding:16px;
    font-size:15.5px; line-height:1.75; font-family:inherit;
    color:var(--c-text); background:#fff;
    border:1.5px solid var(--c-line); border-radius:12px;
    outline:none; resize:vertical;
}
textarea.editor:focus{ border-color:var(--c-point); }

/* 재생성 액션 칩 줄 */
.regen-row{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.regen-row .chip{ padding:9px 13px; min-height:40px; font-size:13.5px; }

/* 요약 한 줄 */
.gen-brief{
    display:flex; flex-wrap:wrap; gap:6px 14px;
    font-size:14px; color:var(--c-sub); margin-bottom:14px;
}
.gen-brief b{ color:var(--c-text); }

/* =============================================================
   6단계 추가: 내 문서 목록 (필터 탭, 페이징)
   ============================================================= */

.tab-row{
    display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
    margin-bottom:14px; -webkit-overflow-scrolling:touch;
}
.tab-row .chip{ flex:none; padding:9px 14px; min-height:40px; font-size:14px; border-radius:20px; }
.tab-row .chip.on::before{ content:""; margin:0; }

.search-row{ display:flex; gap:8px; margin-bottom:14px; }
.search-row .inp{ flex:1; height:46px; }
.search-row .btn{ height:46px; flex:none; }

.pager{
    display:flex; justify-content:center; align-items:center; gap:14px;
    margin-top:18px;
}
.pager .btn{ min-width:88px; }
.pager .pg-info{ font-size:14px; color:var(--c-sub); }

/* 상세보기 */
.view-meta{ margin-bottom:4px; }
.view-meta .row{
    display:flex; padding:9px 0; border-bottom:1px solid var(--c-line);
    font-size:14.5px;
}
.view-meta .row:last-child{ border-bottom:none; }
.view-meta .lbl{ width:96px; flex:none; color:var(--c-sub); }
.view-content{
    white-space:pre-wrap; font-size:15.5px; line-height:1.8;
    padding:4px 2px; word-break:break-word;
}
.view-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.view-actions .btn{ flex:1; min-width:calc(50% - 8px); }

/* =============================================================
   7단계 추가: 관리자 페이지
   ============================================================= */

.adm-page{ max-width:860px; margin:0 auto; padding:18px 16px 60px; }
.adm-head{
    display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.adm-head .adm-logo{ font-size:19px; font-weight:800; color:var(--c-point); }
.adm-head .adm-title{ font-size:15px; color:var(--c-sub); }
.adm-head .adm-links{ margin-left:auto; display:flex; gap:12px; font-size:14px; }

/* 목록 행 (항목 관리 공용) */
.li-row{
    display:flex; align-items:center; gap:8px;
    padding:10px 2px; border-bottom:1px solid var(--c-line);
}
.li-row:last-child{ border-bottom:none; }
.li-row .li-name{ flex:1; min-width:0; font-size:15px; word-break:break-all; }
.li-row .li-name.off{ color:#B0B6BE; text-decoration:line-through; }
.li-row .li-meta{ font-size:12.5px; color:var(--c-sub); flex:none; }
.li-row .ibtn{
    flex:none; width:36px; height:36px; border-radius:8px;
    border:1px solid var(--c-line); background:#fff; cursor:pointer;
    font-size:14px; color:#555; font-family:inherit;
}
.li-row .ibtn:hover{ background:#F3F5F7; }
.li-row .ibtn.warn{ color:var(--c-danger); }

/* 추가 입력줄 */
.add-row{ display:flex; gap:8px; margin-bottom:12px; }
.add-row .inp{ flex:1; height:46px; }
.add-row .btn{ height:46px; flex:none; }

/* 선택 셀렉트 줄 */
.filter-row{ display:flex; gap:8px; margin-bottom:14px; }
.filter-row select{ flex:1; }

/* 통계 표 */
table.adm-tbl{ width:100%; border-collapse:collapse; font-size:14px; }
table.adm-tbl th, table.adm-tbl td{
    padding:9px 8px; border-bottom:1px solid var(--c-line); text-align:left;
}
table.adm-tbl th{ color:var(--c-sub); font-weight:600; font-size:13px; }