@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@700&family=IBM+Plex+Sans+KR:wght@500&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  /* Brand — 실무서 (Field Manual) */
  --wp-ink: #1c1b19;
  --wp-graphite: #5a5752;
  --wp-seal: #c8411d;
  --wp-rule: #d6cfc2;
  --wp-paper: #f4efe6;

  /* Supporting neutrals */
  --wp-ink-2: #34322e;
  --wp-stone: #8a857c;
  --wp-paper-deep: #ebe4d7;
  --wp-sheet: #fbf8f2;

  /* Status (muted, print-like) */
  --wp-green: #3f6b4a;
  --wp-amber: #9a6a12;
  --wp-red: #9e2a1a;

  /* Semantic */
  --wp-text: var(--wp-ink);
  --wp-text-muted: var(--wp-graphite);
  --wp-text-inverse: var(--wp-paper);
  --wp-bg: var(--wp-paper);
  --wp-surface: var(--wp-sheet);
  --wp-surface-deep: var(--wp-paper-deep);
  --wp-border: var(--wp-rule);
  --wp-accent: var(--wp-seal);
  --wp-focus: 0 0 0 2px var(--wp-paper), 0 0 0 4px var(--wp-ink);

  /* Typography */
  --wp-font: "Pretendard Variable", system-ui, -apple-system, sans-serif;
  --wp-font-serif: "Gowun Batang", "Noto Serif KR", serif;
  --wp-font-meta: "IBM Plex Sans KR", "Pretendard Variable", sans-serif;
  --wp-fs-display: clamp(36px, 5vw, 60px);
  --wp-fs-h2: clamp(26px, 3.2vw, 38px);
  --wp-fs-h3: 19px;
  --wp-fs-lead: clamp(17px, 1.5vw, 19px);
  --wp-fs-body: 16px;
  --wp-fs-small: 14px;
  --wp-fs-meta: 12px;
  --wp-tracking-meta: 0.12em;

  /* Spacing (4px base) */
  --wp-space-1: 4px;
  --wp-space-2: 8px;
  --wp-space-3: 12px;
  --wp-space-4: 16px;
  --wp-space-5: 24px;
  --wp-space-6: 32px;
  --wp-space-7: 48px;
  --wp-space-8: 64px;
  --wp-space-9: 96px;
  --wp-space-10: 120px;

  /* Shape — square, ruled, no shadows */
  --wp-radius: 2px;
  --wp-rule-thin: 1px solid var(--wp-rule);
  --wp-rule-ink: 1px solid var(--wp-ink);
  --wp-rule-heavy: 2px solid var(--wp-ink);
}

/* Wepeace components — 실무서 (Field Manual). All classes prefixed wp- to avoid Odoo/Bootstrap collisions. */

.wp *, .wp *::before, .wp *::after { box-sizing: border-box; }
.wp { font-family: var(--wp-font); color: var(--wp-text); background: var(--wp-bg); letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
.wp h1, .wp h2, .wp h3, .wp p, .wp a, .wp b, .wp span, .wp button, .wp input, .wp li { font-family: inherit; }

/* Layout */
.wp-section { padding: var(--wp-space-9) 0; }
.wp-section--tight { padding-top: 0; }
.wp-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--wp-space-5); }
.wp-rule { border: 0; border-top: var(--wp-rule-thin); margin: var(--wp-space-6) 0; }
.wp-rule--ink { border-top: var(--wp-rule-ink); }
.wp-rule--heavy { border-top: var(--wp-rule-heavy); }

/* Typography */
.wp .wp-display { font-family: var(--wp-font-serif); font-size: var(--wp-fs-display); font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; margin: 0 0 var(--wp-space-5); }
.wp-display em { font-style: normal; color: var(--wp-accent); }
.wp .wp-h2 { font-family: var(--wp-font-serif); font-size: var(--wp-fs-h2); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 var(--wp-space-3); }
.wp-h3 { font-size: var(--wp-fs-h3); font-weight: 700; line-height: 1.4; margin: 0 0 var(--wp-space-2); }
.wp-lead { font-size: var(--wp-fs-lead); line-height: 1.8; color: var(--wp-text-muted); margin: 0; }
.wp-body { font-size: var(--wp-fs-body); line-height: 1.75; color: var(--wp-text-muted); margin: 0; }
.wp .wp-caption { font-family: var(--wp-font-meta); font-size: var(--wp-fs-meta); color: var(--wp-stone); }
.wp .wp-kicker { display: inline-block; font-family: var(--wp-font-meta); font-size: var(--wp-fs-meta); font-weight: 500; letter-spacing: var(--wp-tracking-meta); text-transform: uppercase; color: var(--wp-accent); margin-bottom: var(--wp-space-4); }

/* Buttons — square, ink-first */
.wp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--wp-space-2); padding: 13px 20px; border-radius: 0; font-size: 15px; font-weight: 600; line-height: 1.1; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .15s, color .15s; }
.wp-btn:hover { text-decoration: none; }
.wp-btn:focus-visible { outline: none; box-shadow: var(--wp-focus); }
.wp-btn--primary { background: var(--wp-ink); color: var(--wp-paper); border-color: var(--wp-ink); }
.wp-btn--primary:hover { background: var(--wp-ink-2); color: var(--wp-paper); }
.wp-btn--seal { background: var(--wp-seal); color: #fff; border-color: var(--wp-seal); }
.wp-btn--seal:hover { background: #b23a19; color: #fff; }
.wp-btn--outline { background: transparent; color: var(--wp-ink); border-color: var(--wp-ink); }
.wp-btn--outline:hover { background: var(--wp-ink); color: var(--wp-paper); }
.wp-btn--text { background: transparent; color: var(--wp-ink); border: 0; border-bottom: 1.5px solid var(--wp-ink); padding: 6px 2px; }
.wp-btn--sm { padding: 9px 14px; font-size: var(--wp-fs-small); }
.wp-btn--lg { padding: 16px 26px; font-size: 17px; }
.wp-btn[disabled], .wp-btn--disabled { opacity: .4; pointer-events: none; }

/* Badges — printed labels */
.wp .wp-badge { display: inline-flex; align-items: center; font-family: var(--wp-font-meta); font-size: 11px; font-weight: 500; letter-spacing: .06em; padding: 3px 7px; border: 1px solid currentColor; border-radius: 0; line-height: 1.2; }
.wp-badge--neutral { color: var(--wp-graphite); }
.wp-badge--seal { color: var(--wp-seal); }
.wp-badge--success { color: var(--wp-green); }
.wp-badge--warning { color: var(--wp-amber); }
.wp-badge--danger { color: var(--wp-red); }
.wp .wp-badge--solid { background: var(--wp-seal); color: #fff; border-color: var(--wp-seal); }

/* Cards */
.wp-card { background: var(--wp-surface); border: var(--wp-rule-thin); border-radius: var(--wp-radius); padding: 28px 26px; height: 100%; }
.wp-card--deep { background: var(--wp-surface-deep); border-color: transparent; }
.wp-card--featured { border-top: 3px solid var(--wp-ink); }
.wp .wp-card__number { display: block; font-family: var(--wp-font-meta); font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--wp-accent); margin-bottom: var(--wp-space-4); }

/* Hero */
.wp-hero { padding: var(--wp-space-9) 0 var(--wp-space-8); border-bottom: var(--wp-rule-heavy); background: var(--wp-bg); }
.wp-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--wp-space-7); align-items: end; }
@media (min-width: 992px) { .wp-hero__grid--lead { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.wp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-space-4); margin-top: var(--wp-space-6); }

/* Table of contents */
.wp-toc { list-style: none; margin: 0; padding: 0; border-top: var(--wp-rule-ink); }
.wp .wp-toc__title { font-family: var(--wp-font-meta); font-size: var(--wp-fs-meta); letter-spacing: var(--wp-tracking-meta); color: var(--wp-graphite); text-transform: uppercase; margin: 0 0 var(--wp-space-3); }
.wp-toc__item { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--wp-space-3); align-items: baseline; padding: 14px 0; border-bottom: var(--wp-rule-thin); color: var(--wp-ink); text-decoration: none; font-size: 15px; }
a.wp-toc__item:hover { color: var(--wp-seal); text-decoration: none; }
.wp .wp-toc__no { font-family: var(--wp-font-meta); font-size: 13px; color: var(--wp-accent); }
.wp .wp-toc__meta { font-family: var(--wp-font-meta); font-size: 12px; color: var(--wp-stone); white-space: nowrap; }

/* Lesson card */
.wp-lesson { display: block; background: var(--wp-surface); border: var(--wp-rule-thin); border-top: 3px solid var(--wp-ink); padding: 22px 24px; color: var(--wp-ink); text-decoration: none; }
a.wp-lesson:hover { text-decoration: none; color: var(--wp-ink); border-top-color: var(--wp-seal); }
.wp .wp-lesson__chapter { font-family: var(--wp-font-meta); font-size: var(--wp-fs-meta); letter-spacing: var(--wp-tracking-meta); color: var(--wp-accent); text-transform: uppercase; }
.wp .wp-lesson__title { display: block; font-family: var(--wp-font-serif); font-size: 21px; font-weight: 700; line-height: 1.4; margin: 10px 0 14px; }
.wp .wp-lesson__foot { display: flex; align-items: center; gap: var(--wp-space-3); font-family: var(--wp-font-meta); font-size: 12px; color: var(--wp-stone); }

/* Figures (stats) */
.wp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: var(--wp-rule-ink); border-bottom: var(--wp-rule-thin); }
.wp-kpi { padding: 18px 16px 16px 0; }
.wp-kpi + .wp-kpi { padding-left: 16px; border-left: var(--wp-rule-thin); }
.wp .wp-kpi b { display: block; font-family: var(--wp-font-serif); font-size: 30px; font-weight: 700; line-height: 1.1; }
.wp .wp-kpi span { display: block; margin-top: 6px; font-family: var(--wp-font-meta); font-size: 12px; color: var(--wp-graphite); }

/* Ink panel (principles) */
.wp-panel-dark { background: var(--wp-ink); color: var(--wp-text-inverse); padding: var(--wp-space-8) var(--wp-space-7); }
.wp-panel-dark__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 40px; }
.wp-panel-dark .wp-h2 { color: var(--wp-paper); }
.wp-panel-dark .wp-lead { color: #b8b2a7; }
.wp-list-item { display: grid; grid-template-columns: 36px 1fr; gap: var(--wp-space-3); border-top: 1px solid rgba(244, 239, 230, .18); padding: 18px 0; }
.wp .wp-list-item__no { font-family: var(--wp-font-meta); font-size: 13px; color: #e0754f; padding-top: 3px; }
.wp-list-item b { color: var(--wp-paper); font-size: 17px; }
.wp-list-item p { margin: 6px 0 0; color: #b8b2a7; font-size: 15px; line-height: 1.7; }

/* CTA */
.wp-cta { text-align: center; border-top: var(--wp-rule-heavy); border-bottom: var(--wp-rule-ink); padding: 64px var(--wp-space-5); }
.wp-cta__lead { margin-bottom: var(--wp-space-5); }

/* Forms */
.wp-field { display: flex; flex-direction: column; gap: 6px; }
.wp-label { font-size: var(--wp-fs-small); font-weight: 600; color: var(--wp-ink); }
.wp-input { font-size: var(--wp-fs-body); padding: 12px 14px; border: 1px solid var(--wp-stone); border-radius: 0; background: var(--wp-sheet); color: var(--wp-ink); }
.wp-input:focus { outline: none; border-color: var(--wp-ink); box-shadow: inset 0 0 0 1px var(--wp-ink); }
.wp-input--error { border-color: var(--wp-red); }
.wp-help { font-size: var(--wp-fs-meta); color: var(--wp-graphite); }
.wp-help--error { color: var(--wp-red); }

/* Logo */
.wp-logo { display: inline-block; line-height: 0; }
.wp-logo svg { display: block; height: 100%; width: auto; }

@media (max-width: 767px) {
  .wp-section { padding: var(--wp-space-8) 0; }
  .wp-hero { padding: 64px 0 48px; }
  .wp-panel-dark { padding: 40px var(--wp-space-5); }
}

/* Site-wide overrides for Odoo chrome (header, footer, app pages) — 실무서 */
body { font-family: var(--wp-font); letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: var(--wp-font-serif); font-weight: 700; letter-spacing: -0.02em; }
h4, h5, h6, .h4, .h5, .h6 { font-family: var(--wp-font); font-weight: 700; }
.btn { font-weight: 600; box-shadow: none !important; }
header#top .navbar { border-bottom: 1px solid var(--wp-rule); box-shadow: none; }
header#top .nav-link { font-size: 15px; }
header#top .o_header_standard, header#top .navbar { background-color: var(--wp-paper) !important; }
footer#bottom, #footer { font-size: 15px; }
#footer .o_footer_copyright, .o_footer_copyright { font-family: var(--wp-font-meta); font-size: 12px; letter-spacing: .04em; }
/* Courses: our header replaces Odoo's page title */
.o_wslides_wrap .container > .d-flex > h1.me-auto { display: none; }
.o_wslides_wrap .container > .d-flex:has(> h1.me-auto) { justify-content: flex-end; }
/* Blog list: editorial rules instead of cards */
.o_wblog_post_list_view .o_wblog_post, #o_wblog_posts_loop .o_wblog_post { border-top: var(--wp-rule-ink); padding-top: 24px; }
#o_wblog_posts_loop .o_blog_post_title { font-family: var(--wp-font-serif); font-weight: 700; }
#o_wblog_index_content .row.justify-content-center { justify-content: flex-start !important; }
#o_wblog_posts_loop_container.o_container_small { max-width: 780px; margin-left: 0 !important; }