/* ============================================
   가정통신문 생성기 — style.css
   ============================================ */

:root {
    --nl-primary:    #2ecc71;
    --nl-dark:       #27ae60;
    --nl-bg:         #f0faf4;
    --nl-card:       #ffffff;
    --nl-border:     rgba(46,204,113,.18);
    --nl-shadow:     0 4px 20px rgba(46,204,113,.10);
    --nl-radius:     16px;
    --nl-text:       #2c3e50;
    --nl-soft:       #7f8c8d;
}
body { background: var(--nl-bg); font-family:'Pretendard',sans-serif; }

/* ── 도구 헤더 ───────────────────────────────── */
.tool-header { margin-bottom:24px; padding:24px 28px;
  background:linear-gradient(135deg,#2ecc71,#27ae60); border-radius:var(--nl-radius); color:white; }
.tool-title-row  { display:flex; align-items:center; gap:16px; }
.tool-emoji      { font-size:2.8rem; line-height:1; }
.tool-title      { font-size:1.8rem; font-weight:800; margin:0 0 4px; color:white; }
.tool-subtitle   { font-size:.97rem; margin:0; color:rgba(255,255,255,.88); }

/* ── 2단 레이아웃 ────────────────────────────── */
.editor-layout { display:grid; grid-template-columns:400px 1fr; gap:20px; align-items:start; }
@media(max-width:900px){ .editor-layout{ grid-template-columns:1fr; } }

/* ── 모바일 탭 바 (900px 이하에서만 노출) ────── */
.mobile-tab-bar {
    display: none;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--nl-border);
    padding: 6px;
    gap: 6px;
    margin-bottom: 14px;
    box-shadow: var(--nl-shadow);
}
.mobile-tab {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: var(--nl-soft);
}
.mobile-tab.active {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    box-shadow: 0 2px 8px rgba(46,204,113,0.3);
}
@media(max-width:900px) {
    .mobile-tab-bar { display: flex; }
    /* 모바일에서 패널 탭 전환 */
    .editor-layout.show-preview .settings-panel { display: none; }
    .editor-layout.show-edit .preview-panel { display: none; }
}

/* ── 설정 패널 ───────────────────────────────── */
.settings-panel { display:flex; flex-direction:column; gap:14px; }
.step-section   { background:var(--nl-card); border-radius:var(--nl-radius); padding:20px 22px;
  border:1px solid var(--nl-border); box-shadow:var(--nl-shadow); }
.step-label     { font-size:1rem; font-weight:700; color:var(--nl-text);
  margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.step-num       { display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; background:linear-gradient(135deg,#2ecc71,#27ae60);
  color:white; border-radius:50%; font-size:.82rem; font-weight:800; flex-shrink:0; }
.step-save-hint { font-size:.75rem; font-weight:400; color:var(--nl-soft); }

/* ── 입력 필드 ───────────────────────────────── */
.field-group  { display:flex; flex-direction:column; gap:10px; }
.field-row    { display:flex; flex-direction:column; gap:4px; }
.field-row label { font-size:.82rem; font-weight:600; color:var(--nl-soft); }
.field-row input,.field-row textarea,.field-row select {
  border:2px solid var(--nl-border); border-radius:10px; padding:8px 12px;
  font-family:inherit; font-size:.9rem; color:var(--nl-text); outline:none;
  transition:border-color .2s; background:white; }
.field-row input:focus,.field-row textarea:focus { border-color:var(--nl-primary); }
.field-row textarea { min-height:70px; resize:vertical; }
.field-optional { font-size:.72rem; color:#aaa; margin-left:4px; }

/* 체크박스 필드 토글 */
.field-header { display:flex; align-items:center; gap:7px; cursor:pointer;
  margin-bottom:5px; user-select:none; }
.field-check  { width:15px; height:15px; accent-color:var(--nl-primary);
  cursor:pointer; flex-shrink:0; }
.field-lbl    { font-size:.82rem; font-weight:600; color:var(--nl-soft); }
.field-disabled .field-lbl { text-decoration:line-through; opacity:.4; }
.field-disabled .field-input-wrap { display:none; }

/* ── 카테고리 탭 ─────────────────────────────── */
.category-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.cat-tab { padding:5px 12px; border-radius:50px; border:2px solid var(--nl-border);
  background:white; color:var(--nl-soft); font-family:inherit; font-size:.82rem;
  font-weight:600; cursor:pointer; transition:all .18s; white-space:nowrap; }
.cat-tab:hover  { border-color:var(--nl-primary); color:var(--nl-primary); }
.cat-tab.active { background:var(--nl-primary); border-color:transparent; color:white;
  box-shadow:0 3px 10px rgba(46,204,113,.3); }

/* ── 행사 그리드 ─────────────────────────────── */
.event-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.event-btn { display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px; border:2px solid var(--nl-border); border-radius:12px;
  background:white; cursor:pointer; font-family:inherit; transition:all .18s; text-align:center; }
.event-btn:hover   { border-color:var(--nl-primary); transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(46,204,113,.15); }
.event-btn.selected{ background:linear-gradient(135deg,#2ecc71,#27ae60); border-color:transparent;
  color:white; box-shadow:0 4px 14px rgba(46,204,113,.35); transform:translateY(-2px); }
.ev-emoji { font-size:1.4rem; line-height:1; }
.ev-label { font-size:.75rem; font-weight:600; line-height:1.3; }

/* ── 레이아웃 선택기 ─────────────────────────── */
.layout-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.layout-btn  { display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 4px; border:2px solid var(--nl-border); border-radius:12px;
  background:white; cursor:pointer; font-family:inherit; transition:all .2s; text-align:center; }
.layout-btn:hover   { border-color:var(--nl-primary); transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(46,204,113,.15); }
.layout-btn.active  { background:linear-gradient(135deg,#2ecc71,#27ae60); border-color:transparent;
  color:white; box-shadow:0 4px 14px rgba(46,204,113,.35); transform:translateY(-2px); }
.layout-icon { font-size:1.3rem; line-height:1; }
.layout-name { font-size:.75rem; font-weight:700; }
.layout-desc { font-size:.65rem; line-height:1.3; opacity:.75; }
@media(max-width:900px){ .layout-grid{ grid-template-columns:repeat(5,1fr); } }

/* ── 생성 버튼 ───────────────────────────────── */
.generate-area { text-align:center; padding:8px 0; }
.btn-generate  { padding:14px 40px; font-size:1.05rem; font-weight:800; font-family:inherit;
  background:linear-gradient(135deg,#2ecc71,#27ae60); color:white; border:none;
  border-radius:50px; cursor:pointer; transition:all .25s;
  box-shadow:0 6px 20px rgba(46,204,113,.35); }
.btn-generate:hover     { transform:translateY(-3px); box-shadow:0 10px 28px rgba(46,204,113,.45); }
.btn-generate:disabled  { background:#d0d0d0; box-shadow:none; cursor:not-allowed; transform:none; }
.generate-hint { font-size:.82rem; color:var(--nl-soft); margin-top:8px; }

/* ── 미리보기 패널 ───────────────────────────── */
.preview-panel { position:sticky; top:20px; }
.preview-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.preview-header-left { display:flex; align-items:center; gap:10px; }
.preview-title  { font-size:1rem; font-weight:700; color:var(--nl-text); }
.preview-actions{ display:flex; gap:8px; }
.edit-indicator { font-size:.78rem; color:#27ae60; background:rgba(46,204,113,.1);
  padding:3px 10px; border-radius:50px; border:1px solid rgba(46,204,113,.3);
  animation:editPulse 2s ease-in-out infinite; }
@keyframes editPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.65; } }

.btn-variant { padding:7px 14px; border-radius:50px; border:2px solid var(--nl-border);
  background:white; color:var(--nl-text); font-family:inherit; font-size:.85rem;
  font-weight:600; cursor:pointer; transition:all .2s; }
.btn-variant:hover { border-color:var(--nl-primary); color:var(--nl-primary); }
.btn-print { padding:7px 18px; border-radius:50px; border:none;
  background:linear-gradient(135deg,#2ecc71,#27ae60); color:white; font-family:inherit;
  font-size:.88rem; font-weight:700; cursor:pointer; transition:opacity .2s; }
.btn-print:hover { opacity:.88; }

/* ── A4 미리보기 ─────────────────────────────── */
.a4-preview { background:white; border-radius:12px;
  box-shadow:0 4px 24px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.06);
  min-height:500px; overflow:hidden; transition:box-shadow .2s; }
.a4-preview:hover { box-shadow:0 8px 36px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.06); }
.a4-preview[contenteditable="true"] { outline:2px dashed rgba(46,204,113,.5); cursor:text; }
.a4-preview[contenteditable="true"]:focus { outline:2px solid var(--nl-primary); }

.a4-placeholder { display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:480px; color:#bdc3c7; gap:14px; }
.placeholder-icon { font-size:3.5rem; }
.a4-placeholder p  { font-size:.9rem; text-align:center; line-height:1.7; }
.placeholder-sub   { font-size:.8rem !important; color:#d0d7de !important; }

/* ── 내보내기 버튼 행 ─────────────────────── */
.export-row { display:flex; align-items:center; gap:8px; margin-top:12px;
  padding:10px 14px; background:white; border-radius:12px;
  border:1px solid var(--nl-border); flex-wrap:wrap; }
.export-label { font-size:.82rem; font-weight:700; color:var(--nl-soft); margin-right:2px; }
.export-divider { width:1px; height:24px; background:var(--nl-border); margin:0 4px; }
.btn-export { padding:7px 16px; border-radius:50px; border:2px solid;
  font-family:inherit; font-size:.85rem; font-weight:700; cursor:pointer;
  transition:all .2s; white-space:nowrap; }
.btn-export:disabled { opacity:.35; cursor:not-allowed; }
.btn-export.print-btn { border-color:#2ecc71; color:#2ecc71; background:white; }
.btn-export.print-btn:hover { background:#2ecc71; color:white; }
.btn-export.html-btn { border-color:#8e44ad; color:#8e44ad; background:white;
  padding-left:20px; padding-right:20px; }
.btn-export.html-btn:hover:not(:disabled) { background:#8e44ad; color:white; }
.btn-export.png-btn { border-color:#e67e22; color:#e67e22; background:white;
  padding-left:20px; padding-right:20px; }
.btn-export.png-btn:hover:not(:disabled) { background:#e67e22; color:white; }

/* ── AI 티저 ─────────────────────────────────── */
.ai-teaser { margin-top:16px; border-radius:var(--nl-radius);
  border:2px solid rgba(52,152,219,.25);
  background:linear-gradient(135deg,rgba(52,152,219,.04),rgba(155,89,182,.04));
  padding:18px 20px; }
.ai-teaser-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.ai-badge         { background:linear-gradient(135deg,#3498db,#9b59b6); color:white;
  font-size:.72rem; font-weight:800; padding:2px 10px; border-radius:50px; }
.ai-teaser-title  { font-size:.88rem; font-weight:700; color:#3498db; }
.ai-teaser-preview{ font-size:.85rem; line-height:1.7; color:#7f8c8d;
  filter:blur(3px); user-select:none; pointer-events:none;
  margin-bottom:14px; max-height:80px; overflow:hidden; }
.btn-ai-connect { padding:8px 20px; border-radius:50px; border:none;
  background:linear-gradient(135deg,#3498db,#9b59b6); color:white;
  font-family:inherit; font-size:.88rem; font-weight:700; cursor:pointer; transition:opacity .2s; }
.btn-ai-connect:hover { opacity:.88; }


/* ════════════════════════════════════════════
   A4 문서 공통 스타일
   ════════════════════════════════════════════ */
.nl-doc {
  font-family:'Pretendard','맑은 고딕','Malgun Gothic',sans-serif;
  color:#2c3e50; line-height:1.8;
}

/* ── 공통: 회신란 ────────────────────────── */
.nl-reply-box  { margin-top:18px; padding-top:10px; user-select:none; }
.nl-reply-cut  { font-size:.78rem; color:#bbb; margin-bottom:10px; }
.nl-reply-fields { display:flex; gap:16px; }
/* 새 항목별 플레스 홀더 구조 */
.nl-rf-item  { display:flex; align-items:flex-end; gap:6px; flex:1;
  padding-bottom:4px; }
.nl-rf-lbl   { font-size:.8rem; color:#bbb; white-space:nowrap; flex-shrink:0; }
.nl-rf-line  { flex:1; border-bottom:1.5px solid #ccc; min-height:20px; }

/* ── 공통: 서명 ───────────────────────────────── */
.nlc-sign, .nlm-sign { text-align:right; font-size:.88rem; color:#7f8c8d;
  border-top:1px solid #ecf0f1; padding-top:12px; margin-top:16px; }
.nlf-foot { text-align:right; font-size:.88rem; color:#7f8c8d;
  border-top:1px solid rgba(255,255,255,.3); padding-top:12px; margin:10px 20px 0; }

/* ── 공통: 세부사항 표 ────────────────────────── */
.nlc-table { width:100%; border-collapse:collapse; margin:12px 0; }
.nlt-k { font-weight:700; color:#27ae60; width:90px; padding:8px 12px 8px 0;
  border-bottom:1px solid #ecf0f1; vertical-align:top; font-size:.88rem; white-space:nowrap; }
.nlt-v { padding:8px 0; border-bottom:1px solid #ecf0f1; font-size:.88rem; }


/* ════════════════════════════════════════════
   Layout 1: 기본형 (Classic)
   ════════════════════════════════════════════ */
.nl-classic { padding:36px 44px; }
.nlc-header { display:flex; justify-content:space-between; align-items:center;
  font-size:.82rem; color:#95a5a6; margin-bottom:20px;
  padding-bottom:10px; border-bottom:1px solid #ecf0f1; }
.nlc-kinder { font-weight:700; color:#27ae60; }
.nlc-title-wrap { text-align:center; margin-bottom:12px; }
.nlc-label  { font-size:.78rem; letter-spacing:4px; color:#27ae60;
  font-weight:700; margin-bottom:6px; }
.nlc-event  { font-size:1.5rem; font-weight:900; color:#2c3e50; line-height:1.3; }
.nlc-rule   { color:#ddd; font-size:.82rem; margin:14px 0 20px; }
.nlc-p      { font-size:.92rem; line-height:1.9; margin:0 0 12px; color:#34495e; }

/* ════════════════════════════════════════════
   Layout 2: 요약카드형 (Summary)
   ════════════════════════════════════════════ */
.nl-summary { padding:32px 40px; }
.nls-header { display:flex; justify-content:space-between; font-size:.82rem;
  color:#95a5a6; margin-bottom:16px; }
.nls-hero   { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.nls-hero-emoji { font-size:3rem; line-height:1; }
.nls-tag    { font-size:.75rem; letter-spacing:3px; color:#27ae60; font-weight:700; }
.nls-title  { font-size:1.45rem; font-weight:900; margin:4px 0 0; color:#2c3e50; }
.nls-cards  { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.nls-card   { border:1.5px solid rgba(46,204,113,.35); border-radius:12px;
  padding:12px 8px; text-align:center; background:rgba(46,204,113,.04); }
.nls-card-icon { font-size:1.5rem; line-height:1; margin-bottom:4px; }
.nls-card-lbl  { font-size:.7rem; color:#27ae60; font-weight:700; margin-bottom:4px; }
.nls-card-val  { font-size:.85rem; font-weight:800; color:#2c3e50; line-height:1.3; }
.nls-p { font-size:.9rem; line-height:1.9; margin:0 0 10px; color:#34495e; }

/* ════════════════════════════════════════════
   Layout 3: 체크리스트형 (Checklist)
   ════════════════════════════════════════════ */
.nl-checklist { padding:32px 40px; }
.nlk-header   { display:flex; justify-content:space-between; font-size:.82rem;
  color:#95a5a6; margin-bottom:16px; }
.nlk-kinder   { font-weight:700; color:#27ae60; }
.nlk-title-row{ display:flex; align-items:center; gap:14px; margin-bottom:16px;
  padding-bottom:12px; border-bottom:2px solid #f0f0f0; }
.nlk-emoji    { font-size:2.8rem; line-height:1; }
.nlk-tag      { font-size:.75rem; letter-spacing:3px; color:#27ae60; font-weight:700; }
.nlk-event    { font-size:1.3rem; font-weight:800; color:#2c3e50; margin-top:4px; }
.nlk-p        { font-size:.9rem; line-height:1.9; margin:0 0 10px; color:#34495e; }
.nlk-box      { border:2px solid var(--nl-primary); border-radius:14px;
  padding:16px 20px; margin:14px 0;
  background:linear-gradient(135deg,rgba(46,204,113,.03),rgba(46,204,113,.07)); }
.nlk-box-title{ font-size:.92rem; font-weight:800; color:#27ae60;
  margin-bottom:12px; padding-bottom:8px; border-bottom:1px dashed rgba(46,204,113,.3); }
.nlk-item     { padding:6px 0; font-size:.9rem; color:#2c3e50;
  border-bottom:1px solid rgba(46,204,113,.1); display:flex; align-items:baseline; gap:4px; }
.nlk-item:last-child { border-bottom:none; }

/* ════════════════════════════════════════════
   Layout 4: 컬러배너형 (Colorful)
   ════════════════════════════════════════════ */
.nl-colorful  { }
.nlf-banner   { background:linear-gradient(135deg,#2ecc71,#27ae60);
  padding:24px 28px; display:flex; align-items:center; gap:20px; }
.nlf-banner-emoji { font-size:3.5rem; line-height:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
.nlf-banner-sub   { font-size:.75rem; letter-spacing:4px; color:rgba(255,255,255,.8);
  font-weight:700; margin-bottom:4px; }
.nlf-banner-title { font-size:1.6rem; font-weight:900; color:white; margin:0 0 4px; line-height:1.2; }
.nlf-banner-meta  { font-size:.82rem; color:rgba(255,255,255,.8); }
.nlf-pills { display:flex; flex-wrap:wrap; gap:8px; padding:14px 28px; border-bottom:1px solid #f0f0f0; }
.nlf-pill  { display:flex; align-items:center; gap:6px; padding:6px 14px;
  border:1.5px solid rgba(46,204,113,.3); border-radius:50px; background:rgba(46,204,113,.05); }
.nlf-pill-icon{ font-size:1rem; }
.nlf-pill-lbl { font-size:.72rem; font-weight:700; color:#27ae60; }
.nlf-pill-val { font-size:.85rem; font-weight:700; color:#2c3e50; }
.nlf-body-box { padding:18px 28px; margin:0;
  border-left:4px solid var(--nl-primary); margin:14px 20px;
  background:rgba(46,204,113,.03); border-radius:0 8px 8px 0; }
.nlf-p  { font-size:.9rem; line-height:1.9; margin:0 0 10px; color:#34495e; }
.nlf-foot { text-align:right; font-size:.88rem; color:#7f8c8d;
  padding:0 20px 10px; }
.nl-colorful .nl-reply-box { padding:0 20px 20px; }

/* ════════════════════════════════════════════
   Layout 5: 미니멀형 (Minimal)
   ════════════════════════════════════════════ */
.nl-minimal { padding:40px 48px; }
.nlm-top    { display:flex; justify-content:space-between; font-size:.82rem;
  color:#aaa; margin-bottom:10px; }
.nlm-kinder { font-weight:700; color:#2c3e50; }
.nlm-accent { height:3px; background:linear-gradient(90deg,#2ecc71,rgba(46,204,113,.1));
  border-radius:2px; margin-bottom:22px; }
.nlm-title-row { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.nlm-emoji  { font-size:2.5rem; line-height:1; }
.nlm-cat    { font-size:.75rem; letter-spacing:3px; color:#bbb; font-weight:600; }
.nlm-event  { font-size:1.4rem; font-weight:900; color:#2c3e50; margin:4px 0 0; }
.nlm-p      { font-size:.92rem; line-height:2; margin:0 0 10px; color:#4a5568; }
.nlm-details{ margin:16px 0; display:flex; flex-direction:column; gap:8px; }
.nlm-row    { display:flex; align-items:baseline; gap:0;
  border-left:3px solid var(--nl-primary); padding:4px 0 4px 12px; }
.nlm-lbl    { font-size:.82rem; font-weight:700; color:#27ae60; width:80px; flex-shrink:0; }
.nlm-val    { font-size:.88rem; color:#2c3e50; }
.nlm-sign   { text-align:right; font-size:.88rem; color:#7f8c8d;
  border-top:1px solid #e8e8e8; padding-top:14px; margin-top:18px; }


/* ── 인쇄 ────────────────────────────────────── */
@media print {
  .no-print    { display:none !important; }
  body         { background:white; margin:0; padding:0; }
  .a4-preview  { box-shadow:none !important; border-radius:0 !important;
    outline:none !important; }
  .a4-preview[contenteditable="true"] { outline:none !important; }
  .editor-layout,.main-content,.container { display:block !important;
    max-width:100% !important; padding:0 !important; margin:0 !important; }
  .settings-panel { display:none !important; }
  .preview-panel  { position:static !important; }
  .nl-doc { padding:20mm 18mm !important; }
  .nl-colorful { padding:0 !important; }
  @page { size:A4; margin:0; }
}