/* DFW 정착 가이드 플레이북 v3 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;800&display=swap');

:root {
  --f: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;
  --amber: #C6781E;
  --amber-h: #d98222;
  --green: #3C7846;
  --text: #111111;
  --text-2: #555555;
  --text-3: #999999;
  --border: #e8e8e8;
  --border-2: #ebebeb;
  --bg: #ffffff;
  --bg-2: #fafafa;
  --bg-amber: #fffaf6;
  --bg-amber-l: #FFF8F0;
  --bg-green: #f4fbf5;
  --r: 10px;
}

.dfwg-page { font-family: var(--f); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
.dfwg-page * { box-sizing: border-box; }
.dfwg-page a { text-decoration: none; }

/* ── BACK ── */
.dfwg-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-3); padding: 16px 0; margin: 0 40px; cursor: pointer; transition: color .15s; }
.dfwg-back:hover { color: var(--amber); }

/* ── HERO ── */
.dfwg-hero { max-width: 700px; margin: 0 auto; padding: 88px 24px 64px; text-align: center; }
.dfwg-hero__eyebrow { font-size: 13px; color: var(--amber); font-weight: 600; margin-bottom: 20px; }
.dfwg-hero__title { font-size: clamp(36px, 6vw, 54px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--text); margin-bottom: 12px; }
.dfwg-hero__tag { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: #bbb; margin-bottom: 24px; display: block; }
.dfwg-hero__desc { font-size: 16px; color: var(--text-2); line-height: 1.75; margin-bottom: 8px; }
.dfwg-hero__sub { font-size: 14px; color: var(--text-3); margin-bottom: 38px; }
.dfwg-hero__btns { display: flex; gap: 10px; justify-content: center; margin-bottom: 22px; flex-wrap: wrap; }
.dfwg-hero__beginner-label { font-size: 13px; color: var(--text-3); margin-bottom: 10px; }
.dfwg-hero__visual { max-width: 680px; margin: 0 auto 60px; padding: 0 24px; }
.dfwg-hero__visual-inner { background: #FEF3E8; border-radius: 14px; padding: 48px; text-align: center; border: 1px solid #F5DFC0; }
.dfwg-hero__visual-icons { font-size: 44px; margin-bottom: 14px; }
.dfwg-hero__visual-inner p { font-size: 15px; color: var(--amber); font-weight: 600; }
.dfwg-hero__visual-inner span { font-size: 13px; color: #bbb; }

/* ── BUTTONS ── */
.dfwg-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--f); font-weight: 600; font-size: 15px; padding: 13px 28px; border-radius: 8px; cursor: pointer; border: none; transition: all .18s; }
.dfwg-btn--fill { background: var(--amber); color: #fff; }
.dfwg-btn--fill:hover { background: var(--amber-h); color: #fff; }
.dfwg-btn--line { background: #fff; color: var(--text); border: 1.5px solid var(--border); }
.dfwg-btn--line:hover { border-color: #999; color: var(--text); }
.dfwg-btn--beginner { background: #fff; color: var(--text-2); border: 1.5px solid #e4e4e4; font-size: 14px; font-weight: 400; padding: 10px 24px; min-width: 220px; }
.dfwg-btn--beginner:hover { border-color: #bbb; color: var(--text); }

/* ── CURRICULUM ── */
.dfwg-curr { max-width: 900px; margin: 0 auto; padding: 16px 40px 80px; }
.dfwg-curr__title { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 28px; }
.dfwg-curr__divider { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #bbb; text-transform: uppercase; margin: 0 0 12px; padding-left: 4px; }
.dfwg-curr__footer { margin-top: 24px; font-size: 15px; color: var(--text-2); }
.dfwg-curr__start { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--amber); font-weight: 600; }
.dfwg-curr__start:hover { text-decoration: underline; }

/* ── ROW ── */
.dfwg-row { display: flex; align-items: center; padding: 20px 24px; border: 1px solid var(--border-2); border-radius: var(--r); margin-bottom: 7px; cursor: pointer; transition: all .15s; color: var(--text); text-decoration: none; }
.dfwg-row:hover { border-color: var(--amber); background: var(--bg-amber); }
.dfwg-row--pre { border-color: #e8e0d5; background: #fdfbf8; }
.dfwg-row--pre:hover { border-color: var(--amber); background: var(--bg-amber); }
.dfwg-row--final { border-color: #e0e8e0; background: #f8fdf8; }
.dfwg-row--final:hover { border-color: var(--green); background: var(--bg-green); }
.dfwg-row__day { font-size: 11px; font-weight: 700; letter-spacing: .14em; width: 56px; flex-shrink: 0; }
.dfwg-row__day--amber { color: var(--amber); }
.dfwg-row__day--green { color: var(--green); }
.dfwg-row__title { font-size: 16px; font-weight: 600; color: var(--text); flex: 1; letter-spacing: -.01em; }
.dfwg-row__title em { font-style: normal; font-weight: 400; color: var(--text-2); }
.dfwg-row__tags { font-size: 13px; color: #aaa; flex: 2; text-align: right; padding-right: 14px; }
.dfwg-row__prog { width: 80px; height: 4px; background: var(--border-2); border-radius: 99px; overflow: hidden; margin-right: 14px; flex-shrink: 0; }
.dfwg-row__prog-fill { height: 100%; background: var(--amber); border-radius: 99px; }
.dfwg-row__badge { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 9px; font-weight: 700; color: #ccc; }
.dfwg-row__badge--pre { border-color: #8B6914; color: #8B6914; }
.dfwg-row__badge--done { background: var(--green); border-color: var(--green); color: #fff; font-size: 11px; }
.dfwg-row__badge--going { border-color: var(--amber); color: var(--amber); font-size: 10px; }
.dfwg-row__badge--final { border-color: var(--green); color: var(--green); font-size: 9px; }

/* ── CHAPTER WRAP ── */
.dfwg-ch-wrap { display: flex; max-width: 1100px; margin: 0 auto; min-height: 600px; }

/* ── SIDEBAR ── */
.dfwg-sidebar { width: 270px; flex-shrink: 0; border-right: 1px solid var(--border-2); padding: 20px 0; }
.dfwg-sb__group { padding: 10px 20px 4px; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #bbb; text-transform: uppercase; }
.dfwg-sb__item { display: block; padding: 10px 20px; font-size: 14px; color: #666; cursor: pointer; border-left: 3px solid transparent; transition: all .12s; line-height: 1.4; text-decoration: none; }
.dfwg-sb__item:hover { color: var(--text); background: var(--bg-2); }
.dfwg-sb__item--on { color: var(--amber); font-weight: 600; border-left-color: var(--amber); background: var(--bg-amber); }
.dfwg-sb__item--green.dfwg-sb__item--on { color: var(--green); border-left-color: var(--green); background: var(--bg-green); }
.dfwg-sb__item--dim { color: #ccc; }

/* ── MAIN ── */
.dfwg-main { flex: 1; padding: 36px 48px; min-width: 0; }
.dfwg-crumb { font-size: 12px; color: #bbb; margin-bottom: 28px; }
.dfwg-crumb em { color: var(--amber); font-style: normal; }
.dfwg-main__title { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; color: var(--text); margin-bottom: 28px; line-height: 1.25; }
.dfwg-main__title span { font-size: 20px; font-weight: 500; color: #888; }

/* ── TABS ── */
.dfwg-tabs { display: flex; border-bottom: 1.5px solid var(--border-2); margin-bottom: 0; }
.dfwg-tab { font-family: var(--f); font-size: 14px; font-weight: 500; padding: 9px 18px; cursor: pointer; color: #aaa; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1.5px; transition: all .15s; }
.dfwg-tab--on { color: var(--amber); border-bottom-color: var(--amber); font-weight: 600; }
.dfwg-tab em { font-style: normal; font-size: 12px; font-weight: 400; margin-left: 4px; color: #bbb; }
.dfwg-tab-panel { padding: 28px 0; }

/* ── CONTENT ── */
.dfwg-content h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: var(--text); margin: 28px 0 12px; }
.dfwg-content h3:first-child { margin-top: 0; }
.dfwg-content p { font-size: 15px; color: #444; line-height: 1.85; margin-bottom: 12px; }
.dfwg-content strong { color: var(--text); font-weight: 700; }

.dfwg-goal-block { border-left: 3px solid var(--border-2); padding: 4px 18px; margin-bottom: 24px; }
.dfwg-goal-block p { font-size: 16px; color: var(--text-2); font-style: italic; line-height: 1.75; font-weight: 300; }

.dfwg-info-box { background: var(--bg-amber-l); border: 1px solid #F0DCC0; border-radius: 8px; padding: 14px 18px; font-size: 14px; color: #4a3520; line-height: 1.75; margin: 14px 0; display: flex; gap: 10px; }
.dfwg-info-box > span { color: var(--amber); flex-shrink: 0; font-weight: 700; font-size: 15px; margin-top: 2px; }

.dfwg-warn-box { background: #FFFBF0; border: 1px solid #F0E0B0; border-radius: 8px; padding: 14px 18px; font-size: 14px; color: #4a3a10; line-height: 1.75; margin: 14px 0; display: flex; gap: 10px; }
.dfwg-warn-box > span { color: #C8A020; flex-shrink: 0; font-weight: 700; font-size: 15px; margin-top: 2px; }

.dfwg-green-box { background: var(--bg-green); border: 1px solid #C0DDC4; border-radius: 8px; padding: 14px 18px; font-size: 14px; color: #1e3a22; line-height: 1.75; margin: 14px 0; display: flex; gap: 10px; }
.dfwg-green-box > span { color: var(--green); flex-shrink: 0; font-weight: 700; font-size: 15px; margin-top: 2px; }

.dfwg-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.dfwg-option-card { border: 1.5px solid var(--border-2); border-radius: var(--r); padding: 18px 20px; transition: all .15s; }
.dfwg-option-card:hover { border-color: var(--amber); background: var(--bg-amber); }
.dfwg-option-card h4 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; letter-spacing: -.01em; }
.dfwg-option-card p { font-size: 13px; color: #888; line-height: 1.6; margin: 0; }
.dfwg-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 99px; margin-bottom: 10px; }
.dfwg-tag--rent { background: #FFF0E0; color: var(--amber); }
.dfwg-tag--buy { background: #E8F5EB; color: var(--green); }

/* ── CHECKLIST ── */
.dfwg-prog-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dfwg-prog-track { flex: 1; height: 5px; background: var(--border-2); border-radius: 99px; overflow: hidden; }
.dfwg-prog-fill { height: 100%; background: var(--amber); border-radius: 99px; transition: width .4s; }
.dfwg-prog-row span { font-size: 13px; color: var(--text-3); white-space: nowrap; }

.dfwg-notice { display: flex; align-items: flex-start; gap: 8px; background: var(--bg-amber-l); border: 1px solid #F0DCC0; border-radius: 8px; padding: 12px 14px; font-size: 13px; color: var(--text-2); margin-bottom: 16px; }
.dfwg-notice span { color: var(--amber); font-weight: 700; }
.dfwg-notice a { color: var(--amber); font-weight: 600; }

.dfwg-clist { list-style: none; }
.dfwg-clist__item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f2f2f2; font-size: 14px; color: var(--text); cursor: pointer; }
.dfwg-clist__item:last-child { border-bottom: none; }
.dfwg-clist__item--done span { text-decoration: line-through; color: #bbb; }
.dfwg-cb { width: 20px; height: 20px; border: 1.5px solid var(--border-2); border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; background: #fff; padding: 0; }
.dfwg-cb svg { width: 10px; height: 9px; stroke: #fff; opacity: 0; transition: opacity .15s; }
.dfwg-cb:hover:not(:disabled) { border-color: var(--amber); background: rgba(198,120,30,.08); }
.dfwg-clist__item--done .dfwg-cb { background: var(--amber); border-color: var(--amber); }
.dfwg-clist__item--done .dfwg-cb svg { opacity: 1; }
.dfwg-cb:disabled { opacity: .4; cursor: default; }

/* ── CHAPTER NAV ── */
.dfwg-ch-nav { display: flex; justify-content: space-between; align-items: flex-start; padding: 28px 0 48px; margin-top: 40px; border-top: 1px solid var(--border-2); gap: 16px; }
.dfwg-ch-nav__btn { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1.5px solid var(--border-2); border-radius: var(--r); max-width: 260px; transition: all .2s; text-decoration: none; }
.dfwg-ch-nav__btn:hover { border-color: var(--amber); }
.dfwg-ch-nav__btn--next { text-align: right; margin-left: auto; }
.dfwg-ch-nav__btn span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.dfwg-ch-nav__btn em { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.4; }
.dfwg-ch-nav__btn:hover em { color: var(--amber); }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .dfwg-ch-wrap { flex-direction: column; }
  .dfwg-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-2); padding: 12px 0; }
  .dfwg-main { padding: 28px 24px; }
  .dfwg-row__tags { display: none; }
  .dfwg-two-col { grid-template-columns: 1fr; }
  .dfwg-curr { padding: 16px 24px 60px; }
  .dfwg-back { margin: 0 24px; }
}
@media (max-width: 560px) {
  .dfwg-hero { padding: 60px 20px 48px; }
  .dfwg-hero__title { font-size: 36px; }
  .dfwg-hero__btns { flex-direction: column; align-items: center; }
}