/* ==========================================================
   어원 학습 · 검색 단어장 (2026-09-28)
   - #power  : 영단컷의 두 무기 (첫 화면 아래 요약)
   - #etym   : 어원 학습 (어휘설명 · 같은 뿌리 · 조각 퀴즈)
   - #search : 단어 검색 · 검색 단어장
   카드 모양(.fam-card)은 sections.css 것을 같이 쓴다.
   ========================================================== */

/* ---------- 조각 풀이 식 (공용) ---------- */
.pc {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 10px 16px; border-radius: 16px; background: var(--white);
  border: 1px solid var(--line); box-shadow: 0 8px 18px rgba(8, 24, 53, .06);
}
.pc b { font-size: 24px; font-weight: 900; letter-spacing: -.03em; color: var(--blue-deep); line-height: 1.1; white-space: nowrap; }
.pc small { margin-top: 4px; font-size: 14px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.pc.ans { background: var(--blue); border-color: var(--blue); }
.pc.ans b, .pc.ans small { color: var(--white); }

/* 검색창 모양 (공용) */
.ps-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px; background: var(--white);
  border: 2px solid var(--blue); font-size: 18px; font-weight: 800; color: var(--navy);
}
.ps-bar i { font-style: normal; font-size: 22px; color: var(--blue); line-height: 1; }

/* ---------- #power 두 무기 ---------- */
.power-sec { background: var(--white); }
.power-sec .sec-desc b { color: var(--navy); }
.power-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.power-card {
  display: flex; flex-direction: column; padding: 42px 38px; border-radius: var(--r);
  color: var(--text); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.power-card:hover { transform: translateY(-4px); }
.power-card.etym { background: linear-gradient(150deg, var(--ice), var(--white) 75%); border: 1px solid var(--line); }
.power-card.search { background: var(--navy); color: var(--white); box-shadow: 0 30px 70px rgba(8, 24, 53, .22); }
.power-tag {
  align-self: flex-start; padding: 8px 16px; border-radius: 999px;
  background: var(--blue); color: var(--white); font-size: 16px; font-weight: 900;
}
.power-card h3 { margin-top: 20px; font-size: clamp(28px, 3vw, 38px); font-weight: 900; line-height: 1.22; letter-spacing: -.05em; color: var(--navy); }
.power-card.search h3 { color: var(--white); }
.power-formula { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.power-formula > i, .ec-parts > i { font-style: normal; font-size: 24px; font-weight: 900; color: var(--blue); }
.power-search { margin-top: 26px; display: grid; gap: 10px; }
.ps-hit {
  padding: 12px 18px; border-radius: 16px; background: rgba(255, 255, 255, .08);
  font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, .8);
}
.ps-hit b { margin-right: 8px; font-size: 20px; font-weight: 900; color: var(--white); }
.power-card ul { margin-top: 26px; display: grid; gap: 10px; }
.power-card li { position: relative; padding-left: 26px; font-size: 18px; font-weight: 700; }
.power-card li::before { content: "✓"; position: absolute; left: 2px; font-weight: 900; color: var(--blue); }
.power-card.search li { color: rgba(255, 255, 255, .85); }
.power-card.search li::before { color: var(--sky); }
.power-card li b { font-weight: 900; color: var(--navy); }
.power-card.search li b { color: var(--white); }
.power-more { margin-top: auto; padding-top: 28px; font-size: 17px; font-weight: 900; color: var(--blue); }
.power-card.search .power-more { color: var(--sky); }

/* ---------- #etym 어원 학습 ---------- */
.etym-sec .sec-desc b { color: var(--navy); }
.etym-demo { margin-top: 60px; display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 26px; align-items: stretch; }
.etym-card {
  padding: 34px 32px; border-radius: var(--r); background: var(--white);
  box-shadow: 0 24px 56px rgba(8, 24, 53, .12);
}
.ec-head b { display: block; font-size: clamp(40px, 4.4vw, 52px); font-weight: 900; letter-spacing: -.05em; line-height: 1; color: var(--navy); }
.ec-head span { display: block; margin-top: 8px; font-size: 17px; font-weight: 800; color: var(--muted); }
.ec-parts { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ec-logic { margin-top: 18px; font-size: 21px; font-weight: 900; letter-spacing: -.03em; color: var(--navy); }
.ec-logic em { font-style: normal; color: var(--blue); }
.ec-origin { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--muted); }
.ec-rel { margin-top: 22px; display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.ec-rel div { display: flex; align-items: baseline; gap: 12px; }
.ec-rel dt { flex: none; width: 52px; font-size: 14px; font-weight: 900; color: var(--blue); }
.ec-rel dd { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-rel dd span { padding: 5px 11px; border-radius: 999px; background: var(--ice); font-size: 15px; font-weight: 800; color: var(--navy); }
.ec-cap { margin-top: 20px; font-size: 13px; font-weight: 800; color: var(--muted); }

.etym-root { padding: 36px 34px; border-radius: var(--r); background: var(--navy); color: var(--white); }
.etym-root .tag { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--blue); font-size: 15px; font-weight: 900; }
.etym-root ul { margin-top: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.etym-root li { padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .07); }
.etym-root li b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.03em; color: var(--white); }
.etym-root li span { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .72); }
.etym-more { margin-top: 20px; font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, .7); }
.etym-more b { font-weight: 900; color: var(--sky); }

.etym-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.etym-grid .fam-card { background: var(--white); }
.etym-note { margin-top: 30px; text-align: center; font-size: 16px; font-weight: 700; color: var(--muted); }
.inline-link { color: var(--blue); font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- #search 검색 단어장 ---------- */
.search-sec { background: var(--ice); }
.search-sec .sec-desc b { color: var(--navy); }
.search-flow { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sf-step { display: flex; flex-direction: column; padding: 34px 28px; border-radius: var(--r); background: var(--white); box-shadow: 0 18px 40px rgba(8, 24, 53, .08); }
.sf-no { align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: var(--ice); color: var(--blue); font-size: 15px; font-weight: 900; }
.sf-step h3 { margin-top: 16px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 900; line-height: 1.25; letter-spacing: -.05em; color: var(--navy); }
.sf-step > p { margin-top: auto; padding-top: 20px; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--text); }
.sf-step > p b { font-weight: 900; color: var(--navy); }

.sf-ui { margin-top: 22px; padding: 18px; border-radius: 22px; background: var(--gray); border: 1px solid var(--line); }
.sf-results { margin-top: 12px; display: grid; gap: 8px; }
.sf-results li, .sf-ui.book li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--white); }
.sf-results b, .sf-ui.book li b { font-size: 18px; font-weight: 900; color: var(--navy); white-space: nowrap; }
.sf-results span, .sf-ui.book li span { font-size: 14px; font-weight: 700; color: var(--muted); text-align: right; }

.sf-ui.dict { background: var(--white); }
.sd-word b { font-size: 28px; font-weight: 900; letter-spacing: -.04em; color: var(--navy); }
.sd-word span { margin-left: 8px; font-size: 15px; font-weight: 700; color: var(--muted); }
.sd-pos { margin-top: 12px; display: inline-block; padding: 3px 10px; border-radius: 8px; background: var(--ice); font-size: 13px; font-weight: 900; color: var(--blue); }
.sf-ui.dict ol { margin-top: 8px; padding-left: 22px; list-style: decimal; display: grid; gap: 6px; }
.sf-ui.dict li { font-size: 15px; font-weight: 700; color: var(--text); }
.sf-ui.dict li::marker { font-weight: 900; color: var(--blue); }
.sf-ui.dict li b { font-weight: 900; color: var(--navy); }
.sf-ui.dict li small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sf-ui.dict li.on { margin-left: -8px; padding: 6px 8px; border-radius: 10px; background: #FFF6D6; }
.sd-idiom { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; font-weight: 700; color: var(--muted); }
.sd-idiom b { color: var(--navy); }

.sb-head { font-size: 16px; font-weight: 900; color: var(--navy); }
.sb-head b { margin-left: 4px; color: var(--blue); }
.sf-ui.book ul { margin-top: 10px; display: grid; gap: 8px; }
.sf-ui.book li.dim { justify-content: center; font-size: 14px; font-weight: 800; color: var(--muted); background: transparent; }
.sb-btn { display: block; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--blue); color: var(--white); text-align: center; font-size: 16px; font-weight: 900; }

.search-band { margin-top: 26px; padding: 44px 40px; border-radius: var(--r); background: var(--navy); color: var(--white); }
.sbd-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: center; }
.sbd-nums .n { font-size: clamp(36px, 4.4vw, 54px); font-weight: 900; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.sbd-nums .n small { margin-left: 4px; font-size: 18px; color: var(--sky); }
.sbd-nums .l { margin-top: 10px; font-size: 16px; font-weight: 800; color: rgba(255, 255, 255, .72); }
.sbd-flow { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.sbd-flow span { padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .09); font-size: 16px; font-weight: 900; white-space: nowrap; }
.sbd-flow span.on { background: var(--blue); }
.sbd-flow i { font-style: normal; font-weight: 900; color: var(--sky); }
.sbd-note { margin-top: 26px; text-align: center; font-size: 16px; font-weight: 700; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.sbd-note b { color: var(--white); font-weight: 900; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1024px) {
  .power-grid, .etym-demo, .search-flow { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .power-grid, .etym-demo, .search-flow { margin-top: 40px; }
  .power-card { padding: 30px 22px; }
  .power-card li { font-size: 16px; }
  .pc { padding: 8px 12px; }
  .pc b { font-size: 20px; }
  .etym-card, .etym-root { padding: 28px 22px; }
  .etym-root ul { grid-template-columns: 1fr; }
  .etym-grid { grid-template-columns: 1fr; }
  .sf-step { padding: 28px 22px; }
  .search-band { padding: 34px 22px; }
  .sbd-nums { grid-template-columns: 1fr; gap: 22px; }
  .sbd-flow span { font-size: 14px; padding: 8px 12px; }
}