:root {
  --ink: #1f2430;
  --ink-soft: #5b6275;
  --card: rgba(255, 255, 255, 0.86);
  --card-hover: rgba(255, 255, 255, 0.96);
  --line: rgba(255, 255, 255, 0.55);
  --accent: #b0566e;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ---------- 대문 ---------- */
body.home {
  min-height: 100vh;
  background: #e9c2b8 url("../img/swan.jpg") 47% 88% / cover no-repeat fixed;
}
.hero { min-height: 100vh; display: flex; flex-direction: column; }
.hero-top {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 9vh 24px 0;
  text-align: center;
}
.hero-title {
  margin: 0;
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(90, 60, 70, 0.35);
}
.hero-sub {
  margin: 6px 0 36px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  text-shadow: 0 1px 10px rgba(90, 60, 70, 0.35);
}
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 22px;
  text-align: left;
  border-radius: 16px;
  background: rgba(120, 85, 100, 0.16);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(80, 50, 60, 0.12);
  transition: transform .2s ease, background .2s ease;
}
.tile:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.42); }
.tile-en { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.9); }
.tile-name { font-size: 22px; font-weight: 700; color: #fff; }
.tile-desc { font-size: 14px; color: rgba(255,255,255,0.95); }
.tile-en, .tile-name, .tile-desc { text-shadow: 0 1px 8px rgba(90, 55, 65, 0.35); }

/* ---------- 영역·글 화면 ---------- */
body.inner {
  min-height: 100vh;
  /* 분홍 안개 위 흰 구름 사진 */
  background: #f1d3cc url("../img/pink-cloud.jpg") 55% 85% / cover no-repeat fixed;
}
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
  padding: 22px 24px;
}
.brand { font-weight: 700; font-size: 20px; }
.topnav nav { display: flex; gap: 18px; font-size: 15px; }
.topnav nav a { color: var(--ink-soft); }
.topnav nav a:hover, .topnav nav a.active { color: var(--ink); font-weight: 700; }

.wrap { max-width: 900px; margin: 0 auto; padding: 8px 24px 80px; }
.intro { padding: 28px 0 18px; }
.intro-en { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.intro h1 { margin: 2px 0 6px; font-size: 34px; }
.intro p { margin: 0; color: var(--ink-soft); }

.subs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 22px; }
.sub {
  font: inherit;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.45);
  color: var(--ink);
  cursor: pointer;
}
.sub.active { background: #fff; font-weight: 700; }

.posts { display: flex; flex-direction: column; gap: 22px; }
.card {
  display: block;
  padding: 26px 30px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 4px 20px rgba(120, 70, 80, 0.08);
  transition: background .2s ease, transform .2s ease;
}
.card:hover { background: var(--card-hover); transform: translateY(-2px); }
.card h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.35; }
.excerpt { margin: 0 0 12px; color: var(--ink-soft); }
.meta { margin: 0; font-size: 13px; color: #7a8193; }
.empty { padding: 28px 30px; border-radius: 12px; background: var(--card); color: var(--ink-soft); }

.article {
  padding: 36px 40px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 24px rgba(120, 70, 80, 0.1);
}
.back { font-size: 14px; color: var(--ink-soft); }
.article h1 { margin: 12px 0 4px; font-size: 32px; line-height: 1.3; }
.content { margin-top: 24px; font-size: 17px; }
.content a { color: var(--accent); text-decoration: underline; }
.content img { max-width: 100%; border-radius: 8px; }
.content pre { overflow-x: auto; padding: 14px 16px; border-radius: 8px; background: #f3f5f9; }
.content code { font-size: 0.92em; }

/* ---------- 모바일 ---------- */
@media (max-width: 760px) {
  body.home { background-attachment: scroll; background-position: 47% 100%; }
  body.inner { background-attachment: scroll; }
  .hero-top { padding-top: 7vh; }
  .hero-sub { margin-bottom: 22px; font-size: 14px; }
  .tiles { grid-template-columns: 1fr; gap: 10px; }
  .tile { padding: 14px 18px; }
  .tile-name { font-size: 19px; }
  .tile-desc { display: none; }
  .topnav { flex-wrap: wrap; gap: 6px 14px; }
  .topnav nav { order: 3; width: 100%; margin-left: 0; }
  .topnav nav { gap: 14px; font-size: 14px; }
  .card { padding: 20px 20px; }
  .article { padding: 26px 20px; }
}

/* ---------- 언어 전환 ---------- */
.lang { display: flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: 0.04em; }
.lang a { color: var(--ink-soft); padding: 2px 4px; }
.lang a.on { color: var(--ink); font-weight: 700; }
.lang span { color: var(--ink-soft); opacity: .6; }
.home-lang { position: absolute; top: 20px; right: 24px; z-index: 2; }
.home-lang .lang a, .home-lang .lang span { color: rgba(255,255,255,0.85); text-shadow: 0 1px 8px rgba(90,55,65,.35); }
.home-lang .lang a.on { color: #fff; }
.topnav nav { margin-left: auto; }
.card.pinned { border-left: 4px solid rgba(176, 86, 110, 0.55); }
.content h2 { margin-top: 1.8em; font-size: 21px; }

/* ---------- 교재 글 컴포넌트 ---------- */
.content { word-break: keep-all; overflow-wrap: anywhere; }
.content p { margin: 0 0 1em; }
.content h2 { display: flex; align-items: center; gap: 10px; margin: 2.4em 0 .7em; padding-top: 1.2em; border-top: 1px solid #ecdfe3; font-size: 23px; line-height: 1.4; }
.content h2 .no { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #f6e4e9; color: var(--accent); font-size: 15px; }
.content h3 { margin: 1.6em 0 .5em; font-size: 18px; }
.content strong { color: #7d3349; }
svg.i { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -.18em; flex: none; }

/* 한 문장 핵심 */
.keyline { margin: 1.4em 0; padding: 20px 24px; border-radius: 14px; background: #fbf1f4; border-left: 5px solid var(--accent); font-size: 20px; font-weight: 700; line-height: 1.55; color: #5a2233; }
.keyline small { display: block; margin-top: 6px; font-size: 15px; font-weight: 400; color: var(--ink-soft); }

/* 원리 3칸 */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 1em 0 1.4em; }
.facts > div { padding: 16px; border-radius: 12px; background: #f7f8fb; border: 1px solid #e7e9f0; font-size: 15px; line-height: 1.6; }
.facts b { display: block; margin-bottom: 4px; font-size: 16px; color: var(--ink); }
.facts .n { display: inline-block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--accent); }

/* 세팅 지도 */
.setup-map { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px; margin: 1.2em 0; }
.setup-map .node { padding: 18px 16px; border-radius: 14px; background: #fff; border: 1px solid #e6dde0; text-align: center; }
.setup-map .node .ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 8px; }
.setup-map .node .ic svg { width: 28px; height: 28px; fill: currentColor; }
.setup-map .node b { display: block; font-size: 17px; line-height: 1.35; }
.setup-map .node span { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.setup-map .arrow { align-self: center; font-size: 28px; font-weight: 700; color: var(--accent); opacity: .55; }
.setup-map .c1 .ic { background: #e3f1fb; color: #0b7fc2; }
.setup-map .c2 .ic { background: #eee8fb; color: #6f47c7; }
.setup-map .c3 .ic { background: #fbe9e1; color: #c0603a; }
.setup-map .node.hub { border: 2px solid var(--accent); background: #fffafb; }

/* 규칙 카드 */
.rules { display: grid; gap: 10px; margin: 1em 0 1.4em; counter-reset: r; }
.rule { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; }
.rule .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #f6e4e9; color: var(--accent); }
.rule .ic svg { width: 24px; height: 24px; fill: currentColor; }
.rule b { display: block; font-size: 17px; line-height: 1.45; }
.rule b::before { counter-increment: r; content: counter(r) ". "; color: var(--accent); }
.rule span { display: block; margin-top: 3px; font-size: 15px; color: var(--ink-soft); line-height: 1.6; }

/* 도구 카드 */
.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 1em 0 1.4em; }
.tool { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; }
.tool .h { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.tool .h svg { width: 26px; height: 26px; }
.tool p { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.6; }
.tool .tag { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: #f6e4e9; color: var(--accent); }
.tool .go { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; }
.content .tool .go a { text-decoration: none; }
.tool.wide { grid-column: 1 / -1; }
.t-cloud .h svg { fill: #0b7fc2; } .t-obs .h svg { fill: #6f47c7; } .t-notion .h svg { fill: #37352f; } .t-ai .h svg { fill: #c0603a; } .t-gh .h svg { fill: #24292f; }

/* 프롬프트 복사 상자 */
.prompt { position: relative; margin: 1em 0 1.4em; padding: 18px 20px; border-radius: 14px; background: #f4f0fb; border: 1px solid #e2d8f5; }
.prompt .who { display: block; margin-bottom: 8px; padding-right: 80px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #6f47c7; }
.prompt .txt { display: block; white-space: pre-wrap; font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.prompt .fill { background: #fff3c4; border-radius: 4px; padding: 0 3px; }
.prompt .copy { position: absolute; top: 14px; right: 14px; font: inherit; font-size: 13px; font-weight: 700; color: #6f47c7; background: #fff; border: 1px solid #6f47c7; border-radius: 99px; padding: 3px 12px; cursor: pointer; }
.prompt .copy:focus-visible { outline: 2px solid #6f47c7; outline-offset: 2px; }

/* 문장 → 이유 */
.why { margin: 1em 0 1.4em; border-radius: 14px; border: 1px solid #ebe3e6; background: #fff; overflow: hidden; }
.why > div { display: grid; grid-template-columns: 38% 1fr; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #f1eaec; font-size: 15px; line-height: 1.6; }
.why > div:last-child { border-bottom: 0; }
.why .say { font-weight: 700; color: #4b2f7a; }
.why .say::before { content: "“"; } .why .say::after { content: "”"; }
.why .because { color: var(--ink); }

/* 알림 상자 */
.callout { display: grid; grid-template-columns: 24px 1fr; gap: 12px; margin: 1em 0 1.4em; padding: 14px 18px; border-radius: 12px; font-size: 15px; line-height: 1.65; }
.callout svg { width: 22px; height: 22px; margin-top: 2px; }
.callout.tip { background: #e8f5ef; } .callout.tip svg { fill: #1e7a5a; } .callout.tip b { color: #1e7a5a; }
.callout.warn { background: #fff3dd; } .callout.warn svg { fill: #b06a00; } .callout.warn b { color: #b06a00; }
.folder-tree { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: #fff; font-size: 15px; line-height: 1.55; }
.folder-tree div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 3px 0; }
.folder-tree strong { color: #195c45; }
.folder-tree span { color: var(--ink-soft); }
.folder-tree .depth-1 { padding-left: 15px; }
.folder-tree .depth-2 { padding-left: 34px; }
.folder-open { display: grid; gap: 6px; margin: 10px 0; }
.folder-open div { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.folder-open code { overflow-wrap: anywhere; }
.callout .folder-open + p { margin: 10px 0 0; }

/* 확인 목록 */
.checks { margin: 1em 0 1.4em; padding: 6px 18px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; list-style: none; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f1eaec; font-size: 16px; }
.checks li:last-child { border-bottom: 0; }
.checks li svg { width: 22px; height: 22px; margin-top: 3px; fill: #1e7a5a; }

@media (max-width: 760px) {
  .content h2 { font-size: 20px; }
  .keyline { font-size: 18px; padding: 16px 18px; }
  .facts { grid-template-columns: 1fr; }
  .setup-map { grid-template-columns: 1fr; }
  .setup-map .arrow { justify-self: center; transform: rotate(90deg); }
  .tools { grid-template-columns: 1fr; }
  .why > div { grid-template-columns: 1fr; gap: 4px; }
  .prompt { padding: 16px; }
}

/* 관계도 */
.kmap { display: grid; grid-template-columns: 1fr auto 1.3fr auto 1fr; align-items: center; gap: 8px; margin: 1.2em 0 1.4em; }
.kside { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.klabel { align-self: center; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); background: #f3edef; border-radius: 99px; padding: 1px 12px; }
.kcard { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 12px; border-radius: 14px; background: #fff; border: 1px solid #e6dde0; }
.kcard.opt { border-style: dashed; }
.kcard img { width: 44px; height: 44px; }
.kcard b { font-size: 16px; }
.kcard span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.kcard em { position: absolute; top: 8px; right: 8px; font-style: normal; font-size: 11px; font-weight: 700; color: #6f47c7; background: #eee8fb; border-radius: 99px; padding: 1px 8px; }
.pair { display: inline-flex; gap: 6px; }
.kcard .pair img { width: 38px; height: 38px; }
.karrow { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--accent); font-weight: 700; }
.karrow::before { content: "⟷"; font-size: 26px; line-height: 1; opacity: .7; }
.kcenter { padding: 14px; border-radius: 18px; background: linear-gradient(180deg, #e8f4fd, #f5fbff); border: 2px solid #9fd0f2; }
.kcloud { display: grid; grid-template-columns: 40px 1fr; column-gap: 10px; align-items: center; margin-bottom: 10px; }
.kcloud img { width: 40px; height: 40px; grid-row: span 2; }
.kcloud b { font-size: 16px; line-height: 1.3; }
.kcloud span { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.kfolder { padding: 12px; border-radius: 12px; background: #fff; border: 2px solid var(--accent); }
.kfolder-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-weight: 700; font-size: 16px; color: #5a2233; }
.kfolder-h svg { fill: #e0a93b; width: 22px; height: 22px; }
.kfolder-h small { font-weight: 400; color: var(--ink-soft); }
.kfile { display: grid; grid-template-columns: 22px 1fr; column-gap: 6px; padding: 6px 4px; border-top: 1px solid #f1eaec; font-size: 14px; line-height: 1.45; }
.kfile svg { width: 18px; height: 18px; fill: #8a8f9c; grid-row: span 2; margin-top: 2px; }
.kfile span { color: var(--ink-soft); font-size: 13px; }

.kroles { display: grid; gap: 8px; margin: 1em 0 1.4em; }
.kr { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; }
.kr > img, .kr > .ico, .kr > .pair { width: 48px; height: 48px; }
.kr > .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-items: center; }
.kr > .pair img { width: 23px; height: 23px; }
.kr > .ico { display: grid; place-items: center; border-radius: 12px; background: #f6e4e9; color: var(--accent); }
.kr > .ico svg { width: 26px; height: 26px; }
.kr b { font-size: 17px; margin-right: 8px; }
.kr p { margin: 4px 0 0; font-size: 15px; color: var(--ink-soft); line-height: 1.6; }
.kr.later { background: #fafafa; border-style: dashed; }
.need { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 99px; padding: 1px 9px; vertical-align: 2px; }
.need.must { background: #f6e4e9; color: var(--accent); }
.need.opt { background: #eee8fb; color: #6f47c7; }
.need.later { background: #eceef2; color: #5b6275; }

.tool .h img { width: 28px; height: 28px; }
.tool .h .pair img { width: 26px; height: 26px; }
.tool .h small { font-weight: 400; font-size: 14px; color: var(--ink-soft); }

@media (max-width: 760px) {
  .kmap { grid-template-columns: 1fr; }
  .karrow::before { content: "↕"; }
  .kside { flex-direction: row; align-items: center; }
  .kside .kcard { flex: 1; }
  .klabel { writing-mode: horizontal-tb; }
}

/* ---------- 두 노트북 동기화 그림 ---------- */
.content h2 small { font-size: 14px; font-weight: 400; color: var(--ink-soft); }
.sync { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center; gap: 10px; margin: 1.2em 0 1.4em; }
.pc { padding: 12px; border-radius: 16px; background: #f7f8fb; border: 1px solid #e3e6ee; }
.pc.other { opacity: .78; border-style: dashed; }
.pc-h { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.pc-h svg { width: 20px; height: 20px; fill: #5b6275; }
.pc-h small { font-weight: 400; }
.openers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.openers span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; background: #fff; border: 1px solid #e6dde0; font-size: 13px; font-weight: 700; }
.openers span.opt { border-style: dashed; color: var(--ink-soft); }
.openers img, .openers svg { width: 18px; height: 18px; fill: var(--accent); }
.openers em { font-style: normal; font-size: 11px; color: #6f47c7; background: #eee8fb; border-radius: 99px; padding: 0 6px; }
.down { margin: 6px 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.sync .kfolder { background: #fffdf5; border-color: #e0a93b; }
.sync-mid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: linear-gradient(180deg, #e8f4fd, #f5fbff); border: 1px solid #b9dcf5; }
.sync-mid img { width: 40px; height: 40px; }
.sync-mid b { font-size: 15px; }
.sync-mid i { font-style: normal; font-size: 28px; line-height: 1; color: #2f7fc1; }
.sync-mid span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }

/* ---------- 주소 읽는 법 ---------- */
.addr { margin: 1em 0 1.2em; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; }
.addr-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; }
.addr-line > span:not(.sep) { display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 10px; }
.addr-line b { font-family: ui-monospace, Consolas, monospace; font-size: 18px; }
.addr-line small { font-size: 12px; color: var(--ink-soft); }
.addr-line .sep { align-self: flex-start; padding-top: 7px; font-family: ui-monospace, Consolas, monospace; font-size: 18px; font-weight: 700; color: #9aa0ad; }
.addr .c1 { background: #eceef2; } .addr .c2 { background: #e8f5ef; } .addr .c3 { background: #fff3dd; }
.addr .c4 { background: #e3f1fc; } .addr .c5 { background: #f6e4e9; }
.addr p { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.addr-pair { display: grid; gap: 6px; margin: .6em 0 1.2em; }
.addr-pair > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #f7f8fb; }
.addr-pair span { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.addr-pair code { font-size: 14px; word-break: break-all; }

@media (max-width: 760px) {
  .sync { grid-template-columns: 1fr; }
  .sync-mid { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
  .sync-mid i { transform: rotate(90deg); }
  .sync-mid br { display: none; }
}

/* 이유 카드 묶음 */
.whyg { margin: 1em 0 1.2em; padding: 16px; border-radius: 16px; background: #fbf6f8; border: 1px solid #efe3e7; display: grid; gap: 10px; }
.wg-h { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: #5a2233; }
.wg-h span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 14px; }
.wc { padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #ebe3e6; }
.wq { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 8px; background: #f4f0fb; color: #4b2f7a; font-weight: 700; font-size: 15px; }
.wq::before { content: "“"; } .wq::after { content: "”"; }
.wc p { margin: 0 0 6px; font-size: 15.5px; line-height: 1.7; }
.wc p:last-child { margin-bottom: 0; }
.wc.shot { display: grid; grid-template-columns: 1fr 200px; gap: 16px; align-items: start; }
.wc.shot figure { margin: 0; text-align: center; }
.wc.shot img { width: 200px; border-radius: 10px; border: 1px solid #e6dde0; }
.wc.shot figcaption { margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.states { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.st { display: inline-grid; grid-template-columns: 26px auto; column-gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.st i { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 15px; }
.st small { font-weight: 400; color: var(--ink-soft); font-size: 13px; }
.st.cloud { background: #eaf4fc; } .st.cloud i { color: #0b7fc2; background: #fff; border: 1.5px solid #0b7fc2; }
.st.keep { background: #e8f5ef; } .st.keep i { color: #fff; background: #1e9e5a; }
@media (max-width: 760px) {
  .wc.shot { grid-template-columns: 1fr; }
  .wc.shot img { width: 160px; }
}

/* md 비교 */
.mdcmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1em 0 1.2em; }
.mdv { border-radius: 12px; border: 1px solid #e6dde0; overflow: hidden; background: #fff; }
.mdh { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--ink-soft); background: #f5f2f3; border-bottom: 1px solid #ece4e7; }
.mdh img { width: 18px; height: 18px; }
.mdv.raw pre { margin: 0; border-radius: 0; background: #fff; font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.mdr { padding: 12px 16px; font-size: 15px; }
.mdr h4 { margin: 0 0 4px; font-size: 20px; }
.mdr h5 { margin: 0 0 4px; font-size: 16px; color: #6f47c7; }
.mdr ul { margin: 0; padding-left: 20px; }
@media (max-width: 760px) { .mdcmp { grid-template-columns: 1fr; } }
.ghstrip { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; margin: 10px 0 1.2em; padding: 12px 16px; border-radius: 14px; border: 1.5px dashed #c9ccd4; background: #fafafa; }
.ghstrip img { width: 40px; height: 40px; }
.ghstrip b { font-size: 16px; margin-right: 8px; }
.ghstrip p { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.sync-col { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.sync-gh { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 8px 6px; border-radius: 14px; background: #fafafa; border: 1.5px dashed #c9ccd4; }
.sync-gh img { width: 30px; height: 30px; }
.sync-gh b { font-size: 14px; }
.sync-gh em { font-style: normal; font-size: 11px; font-weight: 700; color: #5b6275; background: #eceef2; border-radius: 99px; padding: 0 8px; }
.sync-gh span { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 760px) {
  .sync-gh { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
  .sync-gh br { display: none; }
}

/* 행동 → 결과 */
.act { display: grid; gap: 6px; margin-top: 8px; }
.act > div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.6; color: var(--ink); }
.act .d, .act .r { display: inline-block; text-align: center; font-size: 12px; font-weight: 700; border-radius: 99px; padding: 2px 0; margin-top: 2px; }
.act .d { background: #f4f0fb; color: #6f47c7; }
.act .r { background: #e8f5ef; color: #1e7a5a; }
.act q { quotes: "“" "”"; font-weight: 700; color: #4b2f7a; }
.rule .act { margin-top: 6px; }
@media (max-width: 760px) { .act > div { grid-template-columns: 1fr; gap: 2px; } .act .d, .act .r { justify-self: start; padding: 2px 10px; } }
.sub-note { font-size: 14.5px; color: var(--ink-soft); margin-top: -.4em; }
.sync-gh { padding: 6px 6px 8px; gap: 0; }
.sync-gh .gh-top { display: flex; align-items: center; justify-content: center; gap: 4px; }
.sync-gh img { width: 18px; height: 18px; }
.sync-gh b { font-size: 12.5px; }
.sync-gh em { font-size: 10px; padding: 0 6px; }
.sync-gh i { font-style: normal; font-size: 20px; line-height: 1.1; color: #8a8f9c; }
.sync-gh span { font-size: 11.5px; }
@media (max-width: 760px) { .sync-gh i { transform: rotate(90deg); } }
.content h3.ih { display: flex; align-items: center; gap: 10px; margin: 2em 0 .6em; padding-top: 1.1em; border-top: 1px dashed #e3d4d9; font-size: 19px; }
.content h3.ih img { width: 32px; height: 32px; }

/* 가독성: 큰 글씨, 진한 글씨 (교재 본문) */
.content { font-size: 18px; line-height: 1.8; --ink-soft: #3a4050; }
.keyline { font-size: 22px; }
.keyline small { font-size: 17px; color: var(--ink); }
.lead-note { margin: 1.2em 0; font-size: 19px; line-height: 1.8; font-weight: 500; color: var(--ink); }
.sub-note { font-size: 17px; color: var(--ink); margin-top: 0; }
.callout { font-size: 17px; line-height: 1.75; }
.prompt .txt { font-size: 17px; }
.prompt .who { font-size: 14px; }
.wc p, .act > div, .tool p, .kr p, .ghstrip p, .checks li, .facts > div { font-size: 17px; }
.wq { font-size: 16.5px; }
.act .d, .act .r { font-size: 13px; }
.need { font-size: 13px; }
.openers span, .down, .pc-h { font-size: 15px; }
.kfile, .kfile span { font-size: 15px; }
.sync-mid b { font-size: 16px; }
.sync-mid span, .sync-gh span { font-size: 14px; color: var(--ink); }
.sync-gh b { font-size: 14px; }
.sync-gh em { font-size: 12px; }
.mdh { font-size: 14.5px; color: var(--ink); }
.mdv.raw pre { font-size: 16px; }
.mdr { font-size: 17px; }
.st { font-size: 15.5px; } .st small { font-size: 14.5px; color: var(--ink); }
.wc.shot figcaption { font-size: 15px; color: var(--ink); }
.tool .go { font-size: 16px; }
.content h2 { font-size: 26px; }
.content h3, .content h3.ih { font-size: 21px; }
@media (max-width: 760px) {
  .content { font-size: 17.5px; }
  .content h2 { font-size: 23px; }
}
.sync-mid .mt { font-size: 13px; font-weight: 700; color: #0b7fc2; background: #fff; border-radius: 99px; padding: 0 8px; }

/* 채팅창 vs 데스크탑 */
.twoai { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1em 0; }
.ta { padding: 18px; border-radius: 14px; background: #fff; border: 1px solid #e6dde0; border-top: 5px solid; }
.ta.chat { border-top-color: #0b7fc2; } .ta.desk { border-top-color: var(--accent); }
.ta-h { font-size: 20px; font-weight: 700; }
.ta-h small { font-size: 15px; font-weight: 500; color: var(--ink-soft); margin-left: 6px; }
.ta-m { display: inline-block; margin: 6px 0 8px; padding: 2px 12px; border-radius: 99px; font-size: 16px; font-weight: 700; }
.ta.chat .ta-m { background: #e3f1fb; color: #0b6aa3; } .ta.desk .ta-m { background: #f6e4e9; color: #7d3349; }
.ta p { margin: 0 0 6px; font-size: 17px; }
.ta .ta-e { font-size: 15.5px; color: var(--ink-soft); margin: 0; }

/* 캡처 안내 */
.snap { margin: 1em 0 1.4em; padding: 18px; border-radius: 16px; background: #e8f5ef; }
.snap-h { font-size: 19px; font-weight: 700; color: #1e6b4d; margin-bottom: 12px; }
.snap-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.ss { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 12px 14px; border-radius: 12px; background: #fff; text-align: center; }
.ss .sn { position: absolute; top: -10px; left: -6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #1e7a5a; color: #fff; font-weight: 700; font-size: 15px; }
.ss img { max-width: 100%; height: 44px; object-fit: contain; border-radius: 8px; }
.ss img.ico { width: 56px; height: 56px; }
.ss .say { padding: 8px 12px; border-radius: 12px; background: #f4f0fb; color: #4b2f7a; font-weight: 700; font-size: 16px; line-height: 1.5; }
.ss p { margin: 0; font-size: 16.5px; line-height: 1.55; }
.snap-mac { margin: 12px 0 0; font-size: 16px; }
@media (max-width: 760px) { .twoai, .snap-steps { grid-template-columns: 1fr; } .ss { gap: 8px; } }
.wshot { margin: 10px 0 8px; }
.wshot img { display: block; width: 100%; border-radius: 10px; border: 1px solid #e6dde0; }
.wshot figcaption { margin-top: 6px; font-size: 16px; color: var(--ink); }
.seq { display: grid; gap: 14px; margin: 12px 0 10px; }
.seq figure { position: relative; margin: 0; padding: 14px 14px 12px; border-radius: 12px; background: #faf7f8; border: 1px solid #ece3e6; }
.seq .sn { position: absolute; top: -10px; left: -8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 16px; }
.seq img { display: block; width: 100%; border-radius: 8px; border: 1px solid #e6dde0; background: #fff; }
.seq figcaption { margin-top: 8px; font-size: 17px; color: var(--ink); }
.wg-h { font-size: 20px; gap: 10px; }
.wg-h span { width: 36px; height: 36px; border-radius: 10px; font-size: 20px; }
.seq .sn { width: 26px; height: 26px; font-size: 14px; }
.wshot.obs .obs-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 17px; font-weight: 700; color: #5b3aa6; }
.wshot.obs .obs-h img { width: 28px; height: 28px; border: 0; border-radius: 0; }
.prompt.mini { margin: 10px 0 0; padding: 12px 16px; } .prompt.mini .copy { top: 10px; }
.ta-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ta-i { display: inline-flex; gap: 4px; }
.ta-i img { width: 26px; height: 26px; }
.content h3.step-h { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 2em 0 .6em; font-size: 21px; }
.step-h > span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #1f2430; color: #fff; font-size: 18px; }
.step-h img { width: 30px; height: 30px; }
.step-h small { font-size: 15px; font-weight: 700; color: var(--accent); background: #f6e4e9; border-radius: 99px; padding: 2px 10px; }
.when { margin: 6px 0 10px; padding-left: 22px; } .when li { font-size: 17px; margin: 4px 0; }
.done { margin: 2.4em 0 1em; padding: 26px 24px; border-radius: 18px; background: #e8f5ef; border: 2px solid #9fd6bd; text-align: center; }
.done-t { font-size: 24px; font-weight: 700; line-height: 1.5; color: #1e6b4d; }
.done p { margin: 10px 0 0; font-size: 18px; }

/* ===== 제목 체계 (일관성) =====
   대제목 h2: 꽉 찬 분홍 네모 번호
   소제목 h3: 테두리만 있는 분홍 네모 번호 (또는 아이콘)
   그림 속 순서: 작은 분홍 동그라미 */
.content h2 { font-size: 26px; font-weight: 700; gap: 12px; }
.content h2 .no { width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 19px; font-weight: 700; }
.content h2 small { font-size: 16px; font-weight: 500; color: var(--ink-soft); }
.content h3, .content h3.ih, .content h3.step-h, .whyg .wg-h {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 1.8em 0 .6em; padding-top: 0; border-top: 0;
  font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.4;
}
.whyg .wg-h { margin: 0 0 4px; }
.step-h > span, .whyg .wg-h > span {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 9px;
  background: #fff; color: var(--accent); border: 2px solid var(--accent);
  font-size: 17px; font-weight: 700;
}
.content h3.ih img, .step-h img { width: 30px; height: 30px; }
.ss .sn, .seq .sn { width: 26px; height: 26px; background: var(--accent); color: #fff; font-size: 14px; }
.snap-h { font-size: 18px; color: var(--ink); }
.wshot.obs .obs-h { font-size: 17px; color: var(--ink); }
.sym { display: grid; gap: 8px; margin: 12px 0; }
.sym > div { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.sym .k { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #1f2430; color: #fff; font-family: ui-monospace, Consolas, monospace; font-size: 24px; }
.sym p { margin: 0; font-size: 17px; }

/* 제목과 본문 구분 */
.article h1 { margin-bottom: 10px; }
.article > .meta { padding-bottom: 22px; border-bottom: 2px solid #efe1e6; font-size: 14px; color: #5b6275; }
.article .content { margin-top: 30px; }

/* 문제 → 해결 */
.pf { display: grid; gap: 10px; margin: 1em 0 1.4em; }
.pf-row { display: grid; grid-template-columns: 1fr 32px 1.3fr; align-items: stretch; gap: 8px; }
.pf-p, .pf-s { padding: 14px 16px; border-radius: 12px; font-size: 17px; line-height: 1.6; }
.pf-p { background: #fdf0f0; border: 1px solid #f1d3d3; }
.pf-s { background: #e8f5ef; border: 1px solid #bfe3d1; }
.pf-p span, .pf-s span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; }
.pf-p span { color: #a33b3b; } .pf-s span { color: #1e6b4d; }
.pf-a { align-self: center; text-align: center; font-size: 24px; font-weight: 700; color: var(--accent); }
.done-t a { color: inherit; }
@media (max-width: 760px) { .pf-row { grid-template-columns: 1fr; } .pf-a { transform: rotate(90deg); } }
.pf-p span, .pf-s span { font-size: 14.5px; }
.facts .n { font-size: 14.5px; }

/* 2강 원리 그림 */
.nn, .ucurve { margin: 1em 0 1.2em; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; }
.nn svg, .ucurve svg { display: block; width: 100%; height: auto; }
.nn .edges line { stroke: #c9ccd4; stroke-width: 2; }
.nn .hot { stroke: var(--accent); stroke-width: 5; }
.nn .nodes circle { fill: #fff; stroke: #1f2430; stroke-width: 3; }
.nn .nodes .hotn { fill: #f6e4e9; stroke: var(--accent); stroke-width: 4; }
.nn text, .ucurve text { font-family: inherit; text-anchor: middle; }
.nn .lb, .ucurve .lb { font-size: 18px; font-weight: 700; fill: #1f2430; }
.nn .tag, .ucurve .tag { font-size: 18px; font-weight: 700; fill: var(--accent); }
.ucurve .yl { text-anchor: start; }
.ucurve .ax { stroke: #8a8f9c; stroke-width: 2; }
.ucurve .u { fill: none; stroke: #1e7a5a; stroke-width: 5; stroke-linecap: round; }
.ucurve .pt { fill: #1e7a5a; } .ucurve .pt.low { fill: var(--accent); }
.ucurve figcaption { margin-top: 8px; font-size: 16px; color: var(--ink); }
.nn-key { display: grid; gap: 8px; margin: 0 0 1.2em; }
.nn-key > div { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.nn-key p { margin: 0; font-size: 17px; }
.nn-key .k { display: grid; place-items: center; width: 40px; height: 40px; }
.nn-key .dot::before { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #1f2430; background: #fff; }
.nn-key .ln::before { content: ""; width: 34px; height: 5px; border-radius: 3px; background: var(--accent); }
.nn-key .th { font-size: 28px; font-weight: 700; color: #1f2430; }
.nextw { margin: 1em 0 1.2em; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; }
.nw-q { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.nw-q span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #f6e4e9; color: var(--accent); }
.nw-a { display: grid; gap: 6px; }
.nw-a > div { display: grid; grid-template-columns: 80px 1fr 48px; gap: 10px; align-items: center; font-size: 17px; }
.nw-a i { display: block; height: 14px; border-radius: 7px; background: var(--accent); }
.nw-a em { font-style: normal; font-size: 15px; }
.nw-c { margin: 10px 0 0; font-size: 16px; }
.attn { display: grid; gap: 8px; margin: 1em 0 1.2em; }
.at-row { display: grid; grid-template-columns: 130px 30px 1fr; align-items: center; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid #ebe3e6; font-size: 17px; }
.at-row .x { color: var(--accent); font-weight: 700; text-align: center; }
.at-row b { color: var(--accent); font-size: 19px; }
.refs { padding-left: 20px; } .refs li { font-size: 16px; margin: 4px 0; }
@media (max-width: 760px) { .at-row { grid-template-columns: 1fr; gap: 2px; } .at-row .x { display: none; } }
.nn .tag { paint-order: stroke; stroke: #fff; stroke-width: 7px; stroke-linejoin: round; }
.ucurve .tag { paint-order: stroke; stroke: #fff; stroke-width: 7px; stroke-linejoin: round; }
.nn-key .th svg { width: 34px; height: 26px; }
.nn-key .th polyline { fill: none; stroke: #1f2430; stroke-width: 4; stroke-linejoin: round; }
.nn.big .edges line { stroke: #d5d8df; stroke-width: 0.7; opacity: .8; }
.nn.big .path line { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.nn.big .nodes circle { fill: #fff; stroke: #1f2430; stroke-width: 1.8; }
.nn.big .nodes circle.on { fill: var(--accent); stroke: var(--accent); }
.nn.big figcaption { margin-top: 8px; font-size: 16px; color: var(--ink); }

/* 3강: md 파일 지도 */
.bodymap { display: grid; gap: 8px; margin: 1em 0 .6em; }
.bm-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; }
.bm-part { display: grid; place-items: center; height: 56px; border-radius: 12px; background: #fbf1f4; color: #5a2233; font-size: 20px; font-weight: 700; }
.bm-what > b { display: block; font-size: 18px; margin-bottom: 4px; }
.bm-what code { display: inline-block; margin: 0 4px 4px 0; font-size: 15px; }
.bm-what p { margin: 2px 0 0; font-size: 17px; }
.bm-tag { padding: 4px 12px; border-radius: 99px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.bm-tag.must, .tier.must .tier-h { background: #b0566e; color: #fff; }
.bm-tag.some, .tier.some .tier-h { background: #e3f1fb; color: #0b6aa3; }
.bm-tag.skip, .tier.skip .tier-h { background: #eceef2; color: #4a5060; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 1em 0 1.4em; }
.tier { padding: 0 0 14px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; overflow: hidden; }
.tier-h { padding: 10px 16px; font-size: 18px; font-weight: 700; }
.tier ul { margin: 10px 0 8px; padding: 0 16px 0 34px; font-size: 17px; }
.tier p { margin: 0; padding: 0 16px; font-size: 16px; line-height: 1.65; }
.nm { display: inline-block; padding: 1px 10px; border-radius: 99px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.nm.fixed { background: #1f2430; color: #fff; }
.nm.free { background: #fff3c4; color: #6a5200; }
.fdict { display: grid; gap: 8px; margin: 1em 0 1.4em; }
.fd { display: grid; grid-template-columns: 170px 1fr; gap: 4px 14px; align-items: baseline; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid #ebe3e6; }
.fd code { font-size: 16px; font-weight: 700; background: none; padding: 0; overflow-wrap: anywhere; }
.fd .nm { grid-column: 2; justify-self: start; }
.fd p { grid-column: 1 / -1; margin: 2px 0 0; font-size: 17px; }
.pf.link .pf-p { background: #f4f0fb; border-color: #e2d8f5; }
.pf.link .pf-p span { color: #6f47c7; }
.shots2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0 1.2em; align-items: start; }
.shots2 figure { margin: 0; padding: 14px; border-radius: 12px; background: #faf7f8; border: 1px solid #ece3e6; }
.shots2 img { display: block; width: 100%; max-width: 370px; margin: 0 auto; border-radius: 8px; border: 1px solid #e6dde0; background: #fff; }
.shots2 figcaption { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.flow { counter-reset: fl; list-style: none; margin: 1em 0; padding: 0; display: grid; gap: 8px; }
.flow li { counter-increment: fl; position: relative; padding: 12px 16px 12px 58px; border-radius: 12px; background: #fff; border: 1px solid #ebe3e6; font-size: 17px; }
.flow li::before { content: counter(fl); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; }
.flow li > b { display: block; }
.flow li span { color: var(--ink-soft); }
.where-rule { display: grid; gap: 6px; margin: 1em 0; padding: 14px 18px; border-radius: 14px; background: #fbf1f4; border-left: 5px solid var(--accent); }
.where-rule div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 18px; }
.where-rule i { font-style: normal; font-weight: 700; color: var(--accent); }
.where-rule span { padding: 1px 12px; border-radius: 99px; background: #fff; font-weight: 700; color: #5a2233; }
.where { display: grid; gap: 8px; margin: 1em 0 1.4em; }
.wh { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid #ebe3e6; }
.wh .wq { margin: 0; justify-self: start; }
.wh-to { padding: 3px 12px; border-radius: 99px; background: #1e7a5a; color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; }
.wh p { grid-column: 1 / -1; margin: 0; font-size: 16.5px; color: var(--ink-soft); }
.callout .prompt.mini { margin-top: 10px; }
@media (max-width: 760px) {
  .bm-row { grid-template-columns: 56px 1fr; }
  .bm-part { height: 48px; font-size: 17px; }
  .bm-tag { grid-column: 2; justify-self: start; }
  .tiers, .shots2 { grid-template-columns: 1fr; }
  .fd { grid-template-columns: 1fr; }
  .fd .nm { grid-column: 1; }
}
.bm-what code, .fd code { font-family: inherit; }

/* 여유 있는 문단 간격 (front matter: spacious: true) */
.content.spacious { line-height: 1.85; }
.content.spacious p { margin: 0 0 1.7em; }
.content.spacious h2 { margin-top: 3em; }
.content.spacious h3 { margin: 2.2em 0 .8em; }
.content.spacious .callout,
.content.spacious .prompt,
.content.spacious .seq,
.content.spacious .snap,
.content.spacious .twoai,
.content.spacious .mdcmp,
.content.spacious .whyg,
.content.spacious .checks,
.content.spacious .sync { margin-top: 1.6em; margin-bottom: 2em; }
.content.spacious .callout p,
.content.spacious .wc p { margin-bottom: .6em; }

/* 클로드 / GPT 앱 탭 (CSS만으로 전환) */
.apptabs { margin: 1.6em 0 2em; }
.apptabs > input { position: absolute; opacity: 0; pointer-events: none; }
.apptabs-bar { display: flex; gap: 6px; border-bottom: 2px solid #ecdfe3; }
.apptabs-bar label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; margin-bottom: -2px; border: 2px solid transparent; border-radius: 12px 12px 0 0; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.apptabs-bar label img { width: 20px; height: 20px; border-radius: 4px; }
.apptab-panel { display: none; padding: 18px 20px 6px; border: 2px solid #ecdfe3; border-top: 0; border-radius: 0 0 14px 14px; background: #fff; }
.apptab-panel .seq { margin-top: .6em; }
#apptab-claude:checked ~ .apptabs-bar label[for="apptab-claude"] { color: #c15f3c; background: #fff; border-color: #ecdfe3 #ecdfe3 #fff; }
#apptab-gpt:checked ~ .apptabs-bar label[for="apptab-gpt"] { color: #10a37f; background: #fff; border-color: #ecdfe3 #ecdfe3 #fff; }
#apptab-claude:checked ~ .apptab-panel.claude,
#apptab-gpt:checked ~ .apptab-panel.gpt { display: block; }
#apptab-claude:focus-visible ~ .apptabs-bar label[for="apptab-claude"],
#apptab-gpt:focus-visible ~ .apptabs-bar label[for="apptab-gpt"] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 여유 간격 글: 폴더·단축키 표시를 본문 글씨체로 */
.content.spacious :not(pre) > code { font-family: inherit; font-size: .95em; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: #f6e4e9; color: #7d3349; }
.content.spacious .prompt code { background: #fff; }

/* ---------- 폰 (갤럭시 360~412px · 아이폰 375~430px) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 480px) {
  .wrap { padding-left: 10px; padding-right: 10px; }
  .article { padding: 22px 16px; border-radius: 12px; }
  .article h1 { font-size: 25px; line-height: 1.35; word-break: keep-all; }
  .content.spacious p { margin-bottom: 1.4em; }
  .content.spacious h2 { margin-top: 2.4em; }
  .content.spacious .callout { gap: 10px; padding: 12px 14px; }
  .content.spacious .prompt { padding: 14px 12px; }
  .content.spacious .prompt .who { padding-right: 64px; }
  .content.spacious .prompt .txt { font-size: 16px; line-height: 1.7; }
  .content.spacious .whyg { padding: 12px 10px; }
  .content.spacious .wc { padding: 12px; }
  .content.spacious .ta { padding: 14px; }
  .apptabs-bar label { padding: 8px 12px; font-size: 16px; }
  .apptab-panel { padding: 14px 12px 4px; }
  .sync-gh { gap: 2px 8px; }
}

/* 3강 md 파일 세 단계 (가게 서류 비유) */
.mdtiers { display: grid; gap: 12px; margin: 1.4em 0 2em; }
.mt-tier { padding: 14px 18px; border-radius: 14px; border: 1px solid #ebe3e6; background: #fff; }
.mt-tier.must { border-left: 6px solid var(--accent); }
.mt-tier.some { border-left: 6px solid #5b8fd6; }
.mt-tier.skip { border-left: 6px solid #b8bcc6; background: #fafafb; }
.mt-h { display: inline-block; margin-bottom: 6px; padding: 1px 12px; border-radius: 99px; font-size: 15px; font-weight: 700; color: #fff; background: var(--accent); }
.mt-tier.some .mt-h { background: #5b8fd6; }
.mt-tier.skip .mt-h { background: #9aa0ad; }
.mt-item { padding: 6px 0; font-size: 17px; line-height: 1.6; }
.mt-item + .mt-item { border-top: 1px solid #f1eaec; }
.mt-f { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.content.spacious .mt-f code { font-size: 14.5px; }

/* 좌우 카드(.twoai): 카드 안 문단 간격 정리, 폰에서도 좌우 비교 유지 */
.content.spacious .ta p { margin: 8px 0 0; }
@media (max-width: 760px) { .content.spacious .twoai { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
  .content.spacious .twoai { gap: 8px; }
  .content.spacious .ta { padding: 12px 10px; }
  .content.spacious .ta-h { font-size: 16px; gap: 5px; }
  .content.spacious .ta-h small { display: none; }
  .content.spacious .ta-i img { width: 20px; height: 20px; }
  .content.spacious .ta p { font-size: 15.5px; line-height: 1.55; }
}

/* 1강 관계도: 폴더 줄마다 "누가 여는지" 꼬리표 */
.kfolder-h { flex-wrap: wrap; }
.who { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 2px 10px 2px 6px; border-radius: 99px; font-size: 14px !important; font-weight: 700; line-height: 1.5; }
.kwho { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; }
.kfile .kwho { margin: 4px 0 0; }
.who-t { font-size: 14.5px !important; color: var(--ink) !important; line-height: 1.5; }
.who img { width: 18px; height: 18px; }
.who.ai { background: #fbe9e3; color: #a4462a !important; }
.who.obs { background: #efe8fb; color: #5b3aa6 !important; }
.kfile.same { display: block; padding: 8px 4px; color: var(--ink-soft); }
.sync .pc.other { align-self: center; }
.who .me-glass { width: 18px; height: 18px; fill: #5b3aa6; }
.kdesc { margin: -4px 0 8px 28px; font-size: 15px; color: var(--ink-soft); } .kdesc b, .kfile span b { color: #5a2233; }

/* 1강 관계도: 노트북 모양 + 상자 안의 상자 */
.lapmap { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; gap: 12px; margin: 1.6em 0 2em; }
.lap-screen { padding: 12px; border: 6px solid #3d3a44; border-radius: 14px 14px 4px 4px; background: #fbfbfd; }
.lap-base { height: 12px; margin: 0 -14px; border-radius: 0 0 14px 14px; background: linear-gradient(#57535f, #3d3a44); }
.lap-t { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: #3d3a44; }
.lap-t svg { width: 18px; height: 18px; fill: #3d3a44; }
.lap-t small { font-weight: 400; color: var(--ink-soft); }
.nb { padding: 8px 10px 10px; border-radius: 10px; border: 2px solid; }
.nb + .nb { margin-top: 8px; }
.nb-h { display: flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 700; line-height: 1.4; }
.nb-h img { width: 22px; height: 22px; object-fit: contain; }
.nb-h svg { width: 20px; height: 20px; }
.nb-who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.nb-who img { width: 18px; height: 18px; }
.nb.od { border-color: #7fb8e6; border-style: dashed; background: #f1f8fe; }
.nb.od > .nb-h { color: #1f6fae; }
.nb.me { border-color: #e0a93b; background: #fffdf5; }
.nb.me > .nb-h { color: #5a2233; }
.nb.me > .nb-h svg { fill: #e0a93b; }
.nb.sub { border-width: 1.5px; border-color: #e3dccd; background: #fff; }
.nb.sub .nb-h { font-size: 15px; color: #3a3440; }
.nb.sub .nb-h svg { width: 18px; height: 18px; fill: #8a8f9c; }
.nb.sub .nb-who { margin-bottom: 0; color: var(--ink-soft); }
.lap-sync { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 6px; border-radius: 14px; border: 2px dashed #7fb8e6; background: #f1f8fe; }
.lap-sync img { width: 38px; height: 38px; }
.lap-sync b { font-size: 15px; color: #1f6fae; }
.lap-sync i { font-style: normal; font-size: 26px; line-height: 1; color: #2f7fc1; }
.lap-sync span { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
@media (max-width: 760px) {
  .lapmap { grid-template-columns: 1fr; gap: 14px; }
  .lap-sync { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
  .lap-sync i { transform: rotate(90deg); }
  .lap-sync br { display: none; }
  .lap { margin: 0 14px; }
}
@media (max-width: 480px) { .lap { margin: 0 8px; } .lap-screen { padding: 10px 8px; border-width: 5px; } .nb { padding: 6px 8px 8px; } }

/* 접이식 예비 방법 (기본 접힘) */
.fallback { margin: 1.4em 0 2em; padding: 0 16px; border-radius: 12px; border: 1px solid #e6dde0; background: #fbf8f9; }
.fallback summary { padding: 12px 0; font-size: 16.5px; font-weight: 700; color: #5a2233; cursor: pointer; }
.fallback[open] { padding-bottom: 12px; }
.fallback ol { margin: 0 0 1em; padding-left: 1.3em; }
.fallback li { margin: .3em 0; }
.content.spacious .fallback p { margin: .8em 0 0; }

/* 관계도 폭 정리: 쌓일 때는 글 길이에 맞게 가운데, 받침이 넘치지 않게 */
.lap { padding: 0 10px; }
.lap-base { margin: 0 -10px; }
@media (max-width: 760px) {
  .lap, .lap-sync { width: 100%; max-width: 400px; justify-self: center; margin: 0; }
}
@media (max-width: 480px) { .lap { padding: 0 6px; } .lap-base { margin: 0 -6px; } }

/* 관계도 길이 줄이기: 쌓일 때 두 번째 노트북 숨김, 하위 폴더 좌우 배치 */
.nb.me .nb-subs { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (max-width: 760px) and (min-width: 381px) { .nb.me .nb-subs { grid-template-columns: 1fr 1fr; } }
.nb.me .nb-subs .nb { margin-top: 0; }
@media (max-width: 760px) {
  .lapmap > .lap:last-child { display: none; }
  .lap-sync { flex-direction: row; }
}


/* 관계도 v3: 모든 화면에서 노트북 두 개 좌우 + 가운데 원드라이브 */
.lapmap { grid-template-columns: 1fr auto 1fr !important; gap: 10px; }
.lapmap > .lap:last-child { display: block !important; }
.lap, .lap-sync { width: auto !important; max-width: none !important; margin: 0 !important; }
.lap-sync { flex-direction: column !important; width: 96px !important; padding: 10px 4px; }
.lap-sync i { transform: none !important; }
.nb-ic { display: inline-flex; gap: 3px; margin-left: 4px; }
.nb-ic img { width: 18px; height: 18px; }
.nb.me .nb-subs { display: contents; }
@media (max-width: 760px) {
  .lapmap { gap: 6px; }
  .lap { padding: 0 6px !important; }
  .lap-base { margin: 0 -6px; height: 9px; }
  .lap-screen { padding: 7px 6px; border-width: 4px; }
  .lap-t { font-size: 12.5px; margin-bottom: 5px; }
  .lap-t svg { display: none; }
  .nb { padding: 5px 6px 6px; border-width: 1.5px; }
  .nb + .nb { margin-top: 5px; }
  .nb-h { font-size: 12.5px; gap: 3px; flex-wrap: wrap; line-height: 1.3; }
  .nb-h img, .nb-h svg { width: 14px !important; height: 14px !important; }
  .nb.sub .nb-h { font-size: 12px; }
  .nb-ic img { width: 14px; height: 14px; }
  .nb-who { font-size: 12px; margin: 2px 0 4px; }
  .lap-sync { width: 62px !important; padding: 8px 2px; }
  .lap-sync img { width: 26px; height: 26px; }
  .lap-sync b { font-size: 11.5px; }
  .lap-sync i { font-size: 20px; }
  .lap-sync span { font-size: 11.5px; }
}
@media (max-width: 600px) { .nb-who { display: none; } }
.nb-h, .lap-t { word-break: keep-all; overflow-wrap: normal; }
@media (max-width: 480px) {
  .lap { padding: 0 4px !important; }
  .lap-base { margin: 0 -4px; }
  .lap-screen { padding: 6px 4px; }
  .nb { padding: 4px 4px 5px; }
  .nb-h { font-size: 11.5px; }
  .nb.sub .nb-h { font-size: 11px; }
}

/* 메모장/옵시디언 비교: 560px 넘으면 좌우 나란히 */
@media (max-width: 760px) and (min-width: 561px) { .mdcmp { grid-template-columns: 1fr 1fr; } .mdcmp pre { font-size: 14px; white-space: pre-wrap; } }

/* 풀이 속 작은 사진: 글 옆에 작게, 폰에서도 옆에 */
.wc.shot { grid-template-columns: 1fr 88px !important; gap: 12px; align-items: center; }
.wc.shot img { width: 88px !important; }
.wc.shot figcaption { display: none; }
.content.spacious .done-t { margin-bottom: 0; }

/* 3강: 두 줄짜리 흰 상자 (색 최소) */
.linkbox { margin: 1.2em 0 1.6em; padding: 6px 18px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; }
.linkbox > div { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: baseline; padding: 10px 0; font-size: 17px; line-height: 1.6; }
.linkbox > div + div { border-top: 1px solid #f1eaec; }
.linkbox .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--accent); color: var(--accent); font-size: 14px; font-weight: 700; }
@media (max-width: 480px) { .linkbox { padding: 4px 12px; } .linkbox > div { font-size: 15.5px; } }

/* 3강: md 파일 종류 목록 (흰 상자 하나, 색 최소) */
.mdlist { margin: 1.2em 0 2em; padding: 6px 18px 10px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; }
.ml-h { margin: 14px 0 2px; font-size: 16px; font-weight: 700; color: var(--accent); }
.ml-h:first-child { margin-top: 8px; }
.ml-i { padding: 8px 0 10px; border-bottom: 1px solid #f1eaec; }
.ml-i b { display: block; font-size: 17px; }
.ml-i p { margin: 6px 0 0 !important; font-size: 16px; line-height: 1.6; }
.ml-ai { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #5a2233; }
.ml-ai img { width: 18px; height: 18px; }
.mdlist .ml-i:last-child { border-bottom: 0; }
.ml-r { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid #f1eaec; font-size: 16.5px; line-height: 1.5; }
.ml-r .mt-f { margin-top: 0; }
.mdlist .ml-r:last-child { border-bottom: 0; }
.mdlist .ml-h { margin: 10px 0 0; }

/* 자료 제출 탭 */
.sform { margin: 1em 0 1.2em; padding: 20px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; }
.sf-row { display: block; margin: 0 0 14px; }
.sf-l { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 700; color: var(--ink); }
.sf-l b { color: var(--accent); }
.sform input[type=text], .sform input[type=url] { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #d9cfd3; border-radius: 10px; font: inherit; font-size: 17px; }
.sform input[type=file] { width: 100%; font: inherit; font-size: 16px; }
.sform input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sf-hint { margin: -6px 0 14px; font-size: 15px; color: var(--ink-soft); }
.sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sf-agree { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 16px; font-size: 17px; line-height: 1.5; }
.sf-agree input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.sf-btn { display: block; width: 100%; padding: 15px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-size: 19px; font-weight: 700; cursor: pointer; }
.sf-btn:disabled { opacity: .6; cursor: wait; }
.sf-bar { height: 10px; margin-top: 14px; border-radius: 99px; background: #f3e6ea; overflow: hidden; }
.sf-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.content .sf-status { margin: 12px 0 0; font-size: 17px; font-weight: 700; }
.sf-status.ok { color: #1e6b4d; } .sf-status.err { color: #a33b3b; }
.use-list { margin: .6em 0 1.4em; padding: 14px 18px 14px 36px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; }
.use-list li { margin: 4px 0; font-size: 17px; line-height: 1.7; }

/* 협업 글 도식: GPT ↔ live_collaboration ↔ 클로드 */
.collab { display: flex; align-items: stretch; gap: 8px; margin: 1.4em 0 1.8em; }
.cb-ai { flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; border-radius: 14px; background: #fff; border: 1px solid #ebe3e6; font-size: 17px; }
.cb-ai img { width: 40px; height: 40px; object-fit: contain; }
.cb-arr { flex: 0 0 104px; display: flex; flex-direction: column; justify-content: center; gap: 18px; font-size: 15px; line-height: 1.4; text-align: center; color: var(--ink); }
.cb-arr span { display: block; }
.cb-arr i { display: block; font-style: normal; font-size: 24px; line-height: 1; color: var(--accent); }
.cb-folder { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px; border-radius: 14px; border: 2px solid var(--accent); background: #fbf1f4; }
.cb-folder > b { display: flex; align-items: center; gap: 6px; font-size: 16px; color: #5a2233; }
.cb-folder > b svg { width: 20px; height: 20px; flex: none; fill: var(--accent); }
.cb-file { padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid #ebe3e6; font-size: 15px; line-height: 1.45; word-break: keep-all; }
.cb-note { font-size: 15px; color: var(--ink); }
@media (max-width: 640px) {
  .collab { flex-direction: column; gap: 6px; }
  .cb-ai { flex: none; flex-direction: row; padding: 8px; }
  .cb-ai img { width: 30px; height: 30px; }
  .cb-arr { flex: none; flex-direction: row; justify-content: center; gap: 28px; }
  .cb-arr span { display: flex; align-items: center; gap: 6px; }
  .cb-arr i { transform: rotate(90deg); }
  .cb-arr br { display: none; }
}