동기강화상담 슬라이드 통합 (1

<!doctype html>
<html lang="ko" style="overflow: hidden;">
<head>
<meta charset="utf-8"/>
<meta content="width=1280, height=720" name="viewport"/>
<title>정신건강 임상에서의 동기강화상담</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Noto Sans KR', sans-serif;
            background: #f8f9fa;
            width: 1280px;
            height: 720px;
            overflow: hidden;
        }
        .slide-container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px;
            background: #ffffff;
        }
        .title-text {
            font-size: 48px;
            font-weight: 700;
            color: #1e3a5f;
            margin-bottom: 20px;
            text-align: center;
            letter-spacing: -0.5px;
        }
        .subtitle-text {
            font-size: 24px;
            color: #5a6c7d;
            text-align: center;
            font-weight: 400;
            line-height: 1.5;
        }
        .accent-line {
            width: 80px;
            height: 4px;
            background: #1e3a5f;
            margin: 30px auto;
            border-radius: 2px;
        }
    </style>
</head>
<body>
<div class="slide-container">
<div class="w-full max-w-4xl text-center">
<h1 class="title-text">
                정신건강 임상에서의<br/>
<span class="text-blue-600">동기강화상담</span>
</h1>
<div class="accent-line"></div>
<p class="subtitle-text">
                변화를 촉진하는 대화의 기술<br/>
                
            </p>
</div>
</div>

/* Central Hub */
        .center-hub {
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #1e3a5f;
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 16px;
            z-index: 20;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
            text-align: center;
        }

/* SVG Connections */
        svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }
        .connector {
            stroke: #cbd5e1;
            stroke-width: 3;
            fill: none;
            stroke-dasharray: 8 4;
            animation: dash 30s linear infinite;
        }
        @keyframes dash {
            to {
                stroke-dashoffset: 1000;
            }
        }
        
        /* Info Panel Styles */
        .info-title {
            font-size: 20px;
            font-weight: 700;
            color: #1e3a5f;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #cbd5e1;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .stage-item {
            display: flex;
            margin-bottom: 15px;
            align-items: flex-start;
        }
        .stage-dot {
            width: 8px;
            height: 8px;
            background: #1e3a5f;
            border-radius: 50%;
            margin-top: 8px;
            margin-right: 12px;
            flex-shrink: 0;
        }
        .stage-content h4 {
            font-size: 15px;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 2px;
        }
        .stage-content p {
            font-size: 13px;
            color: #5a6c7d;
            line-height: 1.4;
        }
        .arrow-head {
            fill: #cbd5e1;
        }
    </style>
</head>
<body>

<div class="header">
<h1 class="title">왜 환자는 변하지 않는가?</h1>
</div>

<div class="content-area">

<div class="diagram-container">

<svg preserveaspectratio="none" viewbox="0 0 800 500">
<defs>
<marker id="arrowhead" markerheight="7" markerwidth="10" orient="auto" refx="9" refy="3.5">
<polygon fill="#94a3b8" points="0 0, 10 3.5, 0 7"></polygon>
</marker>
</defs>


<line marker-end="url(#arrowhead)" stroke="#94a3b8" stroke-width="3" x1="400" x2="400" y1="210" y2="260"></line>

<line marker-end="url(#arrowhead)" stroke="#94a3b8" stroke-width="3" x1="240" x2="330" y1="350" y2="300"></line>

<line marker-end="url(#arrowhead)" stroke="#94a3b8" stroke-width="3" x1="560" x2="470" y1="350" y2="300"></line>

<path class="connector" d="M 245 320 Q 400 100 555 320"></path>
<path class="connector" d="M 555 420 Q 400 500 245 420"></path>
</svg>

<div class="center-hub">
                변화의<br/>복잡성
            </div>

<div class="node node-top">
<i class="fas fa-history node-icon"></i>
<h3 class="node-title">변화 과정</h3>
<p class="node-desc">단순 결심이 아닌<br/>준비-행동-유지의<br/>순환적 과정</p>
</div>

<div class="node node-left">
<i class="fas fa-balance-scale node-icon"></i>
<h3 class="node-title">양가감정</h3>
<p class="node-desc">변화를 원하면서도<br/>동시에 현상유지를<br/>원하는 모순된 마음</p>
</div>

<div class="node node-right">
<i class="fas fa-handshake node-icon"></i>
<h3 class="node-title">관계의 힘</h3>
<p class="node-desc">지시가 아닌<br/>협동적 파트너십이<br/>변화를 촉진함</p>
</div>
</div>

<div class="info-panel">
<div class="info-title">
<i class="fas fa-book-reader"></i>
                Prochaska 변화단계 이론
            </div>
<div class="stage-item">
<div class="stage-dot"></div>
<div class="stage-content">
<h4>전숙고 (Pre-contemplation)</h4>
<p>문제 인식 없음, 변화 의도 부재</p>
</div>
</div>
<div class="stage-item">
<div class="stage-dot"></div>
<div class="stage-content">
<h4>숙고 (Contemplation)</h4>
<p>문제 인식, 양가감정 경험, 6개월 내 변화 고려</p>
</div>
</div>
<div class="stage-item">
<div class="stage-dot"></div>
<div class="stage-content">
<h4>준비 (Preparation)</h4>
<p>구체적 계획 수립, 1개월 내 시도 의향</p>
</div>
</div>
<div class="stage-item">
<div class="stage-dot"></div>
<div class="stage-content">
<h4>행동 (Action)</h4>
<p>실제 행동 수정, 6개월 미만</p>
</div>
</div>
<div class="stage-item">
<div class="stage-dot"></div>
<div class="stage-content">
<h4>유지 (Maintenance)</h4>
<p>6개월 이상 행동 지속, 재발 방지</p>
</div>
</div>
</div>
</div>

.step-icon {
            font-size: 32px;
            color: #1e3a5f;
        }

.step-year {
            font-size: 24px;
            font-weight: 900;
            color: #1e3a5f;
            margin-bottom: 12px;
            background: #e2e8f0;
            padding: 4px 16px;
            border-radius: 50px;
        }

.step-content {
            font-size: 16px;
            color: #475569;
            text-align: center;
            line-height: 1.5;
            word-break: keep-all;
            font-weight: 500;
        }

/* Connector Arrow Styles */
        .connector {
            flex: 1;
            height: 4px;
            background: #cbd5e1;
            position: relative;
            margin: 0 10px;
            border-radius: 2px;
            z-index: 1;
            /* Center vertically relative to the boxes is tricky with height diffs, 
               but here we align items center in flex container */
        }
        
        .connector::after {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 12px solid #cbd5e1;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
        }
        
        /* Active State (Blue) */
        .connector.active {
            background: #1e3a5f;
        }
        .connector.active::after {
            border-left-color: #1e3a5f;
        }

/* Final Box Style */
        .step-box.final {
            background: #1e3a5f;
            border-color: #1e3a5f;
            transform: scale(1.05);
        }
        .step-box.final .step-icon-circle {
            border-color: white;
            background: rgba(255,255,255,0.1);
        }
        .step-box.final .step-icon {
            color: white;
        }
        .step-box.final .step-year {
            background: rgba(255,255,255,0.2);
            color: white;
        }
        .step-box.final .step-content {
            color: #e2e8f0;
        }

/* Emphasis */
        .highlight {
            color: #2563eb;
            font-weight: 700;
        }
        .step-box.final .highlight {
            color: #60a5fa;
        }

</style>
</head>
<body>
<div class="slide-container">

<h1 class="title-text">MI 발전사와 근거기반 실천</h1>

<div class="timeline-wrapper">
<div class="process-flow">

<div class="step-box">
<div class="step-icon-circle">
<i class="fas fa-file-signature step-icon"></i>
</div>
<div class="step-year">1983년</div>
<div class="step-content">
<p class="highlight">Miller, W.R.</p>
<p>첫 논문 발표</p>
<p style="margin-top:8px; font-size:14px;">동기면담(MI) 개념 제시</p>
</div>
</div>

<div class="connector active"></div>

<div class="step-box">
<div class="step-icon-circle">
<i class="fas fa-handshake step-icon"></i>
</div>
<div class="step-year">1991년</div>
<div class="step-content">
<p class="highlight">Rollnick, W.</p>
<p>협업 시작</p>
<p style="margin-top:8px; font-size:14px;">정신건강 전 영역으로<br/>적용 확대</p>
</div>
</div>

<div class="connector active"></div>

<div class="step-box">
<div class="step-icon-circle">
<i class="fas fa-chart-line step-icon"></i>
</div>
<div class="step-year">2000년대</div>
<div class="step-content">
<p class="highlight">근거기반 실천</p>
<p>확립</p>
<p style="margin-top:8px; font-size:14px;">200+ 편의<br/>연구 논문 발표</p>
</div>
</div>

<div class="connector active"></div>

<div class="step-box final">
<div class="step-icon-circle">
<i class="fas fa-globe step-icon"></i>
</div>
<div class="step-year">2013년</div>
<div class="step-content">
<p class="highlight">3판 교재 출간</p>
<p>국제적 표준화 완성</p>
<p style="margin-top:8px; font-size:14px;">보편적 임상 언어로 정착</p>
</div>
</div>
</div>
</div>
</div>

/* Central Hub */
        .center-hub {
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #1e3a5f;
            color: white;
            padding: 16px 30px;
            border-radius: 40px;
            font-weight: 700;
            font-size: 18px;
            z-index: 20;
            box-shadow: 0 6px 12px rgba(30, 58, 95, 0.3);
            text-align: center;
            border: 2px solid white;
            min-width: 280px;
        }

/* SVG Connections */
        svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }
        .arrow-line {
            stroke: #cbd5e1;
            stroke-width: 3;
            fill: none;
            stroke-dasharray: 8 4;
            animation: dash 60s linear infinite;
        }
        @keyframes dash {
            to {
                stroke-dashoffset: 1000;
            }
        }
        
        /* Legend Box */
        .legend-box {
            position: absolute;
            top: 0;
            right: 0;
            background: #f8f9fa;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 15px 20px;
            width: 250px;
        }
        .legend-title {
            font-size: 14px;
            font-weight: 700;
            color: #1e3a5f;
            margin-bottom: 8px;
            border-bottom: 1px solid #cbd5e1;
            padding-bottom: 5px;
        }
        .legend-item {
            font-size: 13px;
            color: #5a6c7d;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
        }
        .legend-dot {
            width: 8px;
            height: 8px;
            background: #1e3a5f;
            border-radius: 50%;
            margin-right: 8px;
        }
    </style>
</head>
<body>

<div class="header">
<h1 class="title">동기의 3요소: 방향·노력·지속성</h1>
</div>

<div class="content-area">
<div class="diagram-container">

<svg viewbox="0 0 900 500">
<defs>
<marker id="arrowhead" markerheight="7" markerwidth="10" orient="auto" refx="9" refy="3.5">
<polygon fill="#94a3b8" points="0 0, 10 3.5, 0 7"></polygon>
</marker>
</defs>


<line class="arrow-line" marker-end="url(#arrowhead)" x1="450" x2="450" y1="200" y2="250"></line>

<line class="arrow-line" marker-end="url(#arrowhead)" x1="200" x2="310" y1="360" y2="290"></line>

<line class="arrow-line" marker-end="url(#arrowhead)" x1="700" x2="590" y1="360" y2="290"></line>
</svg>

<div class="center-hub">
                MI는 균형 있게 유발·강화
            </div>

<div class="node node-top">
<i class="fas fa-battery-half node-icon"></i>
<h3 class="node-title">노력</h3>
<p class="node-desc">얼마나<br/>노력할 것인가</p>
</div>

<div class="node node-left">
<i class="fas fa-compass node-icon"></i>
<h3 class="node-title">방향</h3>
<p class="node-desc">어디로<br/>변화할 것인가</p>
</div>

<div class="node node-right">
<i class="fas fa-calendar-check node-icon"></i>
<h3 class="node-title">지속성</h3>
<p class="node-desc">얼마 동안<br/>지속할 것인가</p>
</div>

<div class="legend-box">
<div class="legend-title">동기강화상담의 역할</div>
<div class="legend-item">
<div class="legend-dot"></div>
<p>방향성 명료화</p>
</div>
<div class="legend-item">
<div class="legend-dot"></div>
<p>노력의 강도 조절</p>
</div>
<div class="legend-item">
<div class="legend-dot"></div>
<p>변화 유지 지원</p>
</div>
</div>
</div>
</div>

body {
      font-family: 'Noto Sans KR', sans-serif;
      background: #f8f9fa;
      width: 1280px;
      height: 720px;
      overflow: hidden;
    }

.slide-container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 40px;
      background: #ffffff;
    }

.title-text {
      font-size: 36px;
      font-weight: 700;
      color: #1e3a5f;
      margin-bottom: 30px;
      text-align: left;
      width: 100%;
      max-width: 1000px;
      letter-spacing: -0.5px;
    }

.three-element-diagram {
      width: 100%;
      max-width: 1000px;
      height: 420px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

.circle {
      width: 220px;
      height: 220px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      background: #f1f5f9;
      border: 3px solid #1e3a5f;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

.circle-left {
      left: 0;
      top: 55%;
      transform: translateY(-50%);
    }

.circle-top {
      left: 50%;
      top: 0;
      transform: translateX(-50%);
    }

.circle-right {
      right: 0;
      top: 55%;
      transform: translateY(-50%);
    }

.circle-icon {
      font-size: 36px;
      color: #1e3a5f;
      margin-bottom: 10px;
    }

.circle-title {
      font-size: 20px;
      font-weight: 700;
      color: #1e3a5f;
      text-align: center;
      line-height: 1.3;
      margin-bottom: 8px;
    }

.circle-content {
      font-size: 14px;
      color: #5a6c7d;
      text-align: center;
      padding: 0 18px;
      line-height: 1.45;
    }

/* ===== 중앙 타원 (양가감정) ===== */
    .center-text {
      position: absolute;
      left: 50%;
      top: 66%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      font-weight: 700;
      color: #1e3a5f;
      text-align: center;
      background: white;
      padding: 14px 26px;
      border-radius: 50px;
      border: 2px solid #1e3a5f;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      z-index: 3;
    }

/* ===== 화살표: 3개 원 → 중앙 타원 ===== */
    .arrow-to-center {
      position: absolute;
      background: #1e3a5f;
      z-index: 0;
    }
    .arrow-to-center::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
    }

/* 왼쪽 원 → 중앙 (→) */
    .arrow-from-left {
      width: 210px;
      height: 2px;
      left: 235px;          /* left circle (220) + 약간 여유 */
      top: 55%;
    }
    .arrow-from-left::after {
      right: -8px;
      top: -4px;
      border-left: 8px solid #1e3a5f;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

/* 오른쪽 원 → 중앙 (←) : 화살표 머리를 왼쪽으로 */
    .arrow-from-right {
      width: 210px;
      height: 2px;
      right: 235px;         /* right circle (220) + 약간 여유 */
      top: 55%;
    }
    .arrow-from-right::after {
      left: -8px;
      top: -4px;
      border-right: 8px solid #1e3a5f;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

/* 위 원 ↓ 중앙 */
    .arrow-from-top {
      width: 2px;
      height: 10px;
      left: 50%;
      top: 230px;           /* top circle 아래쪽에서 시작 */
      transform: translateX(-50%);
    }
    .arrow-from-top::after {
      bottom: -8px;
      left: -4px;
      border-top: 8px solid #1e3a5f;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
    }

.arrow-down-small::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: -4px;
      width: 0;
      height: 0;
      border-top: 8px solid #1e3a5f;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
    }

.clinical-examples {
      width: 100%;
      max-width: 1000px;
      text-align: right;
      margin-top: 18px;
    }

.example-item {
      display: inline-block;
      margin-left: 10px;
      padding: 8px 16px;
      background: #e8f2f7;
      border-radius: 20px;
      font-size: 14px;
      color: #1e3a5f;
      font-weight: 500;
    }
  </style>
</head>

<body>
  <div class="slide-container">
    <div class="title-text">양가감정의 이해</div>

<div class="circle circle-left">
        <i class="fas fa-pills circle-icon"></i>
        <p class="circle-title">중독</p>
        <p class="circle-content">
          "술을 끊고 싶어요"<br/>
          "하지만 회사 회식은 필요해요"
        </p>
      </div>

<div class="circle circle-top">
        <i class="fas fa-brain circle-icon"></i>
        <p class="circle-title">우울증</p>
        <p class="circle-content">
          "치료받고 싶어요"<br/>
          "하지만 약물 부작용이 무서워요"
        </p>
      </div>

<div class="circle circle-right">
        <i class="fas fa-medkit circle-icon"></i>
        <p class="circle-title">약물순응</p>
        <p class="circle-content">
          "약을 꾸준히 먹어야 해요"<br/>
          "근데 기분이 괜찮아서요"
        </p>
      </div>

<div class="arrow-to-center arrow-from-left"></div>
      <div class="arrow-to-center arrow-from-top"></div>
      <div class="arrow-to-center arrow-from-right"></div>

<div class="center-text">양가감정</div>

<div class="arrow-down-small"></div>
    </div>

<div class="clinical-examples">
      <span class="example-item">#중독치료</span>
      <span class="example-item">#우울증치료</span>
      <span class="example-item">#약물순응</span>
    </div>
  </div>

.slide-container{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:40px;
    background:#ffffff;
  }

.title-text{
    font-size:36px;
    font-weight:700;
    color:#1e3a5f;
    margin-bottom:50px;
    text-align:left;
    width:100%;
    max-width:1000px;
    letter-spacing:-0.5px;
  }

.process-flow{
    width:100%;
    max-width:1000px;
    display:flex;
    justify-content:space-between; /* 박스+화살표 포함 전체 분배 */
    align-items:center;
    gap:0; /* 화살표 자체가 간격 역할 */
  }

.step-box{
    width:180px;
    height:140px;
    background:#f1f5f9;
    border:3px solid #1e3a5f;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:relative;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transition:all 0.3s ease;
    flex:0 0 auto;
  }
  .step-box:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
  }

.step-icon{
    font-size:28px;
    color:#1e3a5f;
    margin-bottom:8px;
  }
  .step-title{
    font-size:16px;
    font-weight:700;
    color:#1e3a5f;
    text-align:center;
    line-height:1.3;
  }
  .step-content{
    font-size:13px;
    color:#5a6c7d;
    text-align:center;
    margin-top:6px;
    padding:0 8px;
    line-height:1.4;
  }

/* ✅ 화살표를 flex 아이템으로: absolute 제거 */
  .arrow{
    flex:0 0 70px;          /* 박스 사이 간격(원하면 60~90 조절) */
    height:3px;
    background:#1e3a5f;
    position:relative;
    margin:0 10px;          /* 박스와의 여백 */
    border-radius:999px;
  }
  .arrow::after{
    content:'';
    position:absolute;
    right:-10px;
    top:50%;
    transform:translateY(-50%);
    width:0; height:0;
    border-left:10px solid #1e3a5f;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
  }

.final-box{
    background:#1e3a5f;
    color:#fff;
    border-color:#1e3a5f;
  }
  .final-box .step-icon,
  .final-box .step-title,
  .final-box .step-content{
    color:#fff;
  }

.decision-points{
    position:absolute;
    top:-30px;
    left:50%;
    transform:translateX(-50%);
    background:#e3f2fd;
    color:#1e3a5f;
    padding:4px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    border:2px solid #1e3a5f;
    white-space:nowrap;
  }

.risk-indicator{
    position:absolute;
    top:-15px;
    right:-15px;
    width:30px;
    height:30px;
    background:#ff6b6b;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:700;
  }

.success-rate{
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
    background:#4caf50;
    color:#fff;
    padding:3px 8px;
    border-radius:12px;
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
  }
</style>
</head>

<body>
  <div class="slide-container">
    <div class="title-text">약물치료와의 통합</div>

<div class="process-flow">
      <div class="step-box">
        <i class="fas fa-pills step-icon"></i>
        <p class="step-title">약물 정보 제공</p>
        <p class="step-content">효과·부작용·대안 설명</p>
        <div class="decision-points">공유의사결정</div>
      </div>

/* 핵심: 위에서부터 쌓고(START), 여백을 줄여서 720px에 맞춤 */
  .slide-container{
    width:100%; height:100%;
    display:flex; flex-direction:column;
    justify-content:flex-start;   /* center -> flex-start */
    align-items:center;
    padding:28px 40px;            /* 40 -> 28(상하) */
    background:#ffffff;
  }

.title-text{
    font-size:28px;               /* 32 -> 28 */
    font-weight:700;
    color:#1e3a5f;
    margin-bottom:14px;           /* 25 -> 14 */
    text-align:left;
    width:100%;
    max-width:1040px;
    letter-spacing:-0.5px;
  }

.content-grid{
    width:100%;
    max-width:1040px;             /* 1000 -> 1040 (가로 여유) */
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;                     /* 25 -> 16 */
    margin-top:6px;               /* 10 -> 6 */
  }

.content-box{
    background:#f7fafc;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:14px 16px;            /* 20 -> 14/16 */
    display:flex;
    flex-direction:column;
    text-align:left;              /* center -> left */
  }

/* 핵심: 아이콘+제목을 가로로 배치해서 세로 공간 절감 */
  .box-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
  }
  .icon{
    color:#1e3a5f;
    font-size:22px;               /* 28 -> 22 */
    line-height:1;
    width:28px;                   /* 아이콘 영역 고정 */
    text-align:center;
    flex:0 0 28px;
  }
  .box-title{
    font-size:16px;               /* 18 -> 16 */
    font-weight:700;
    color:#1e3a5f;
    margin:0;
  }

.box-content{
    font-size:14px;               /* 16 -> 14 */
    color:#4a5568;
    line-height:1.45;
  }
  .highlight{font-weight:700;color:#1e3a5f;}
  .sub-title{
    font-size:12px;               /* 14 -> 12 */
    color:#718096;
    margin-top:6px;               /* 8 -> 6 */
  }

.culture-example{
    background:#fef5e7;
    border-left:4px solid #f39c12;
    padding:10px;                 /* 12 -> 10 */
    margin-top:8px;               /* 10 -> 8 */
    border-radius:6px;
    font-size:12px;               /* 14 -> 12 */
    color:#2d3748;
  }
  .example-title{
    font-weight:700;
    color:#d68910;
    margin-bottom:3px;
  }

.chart-container{
    width:100%;
    height:90px;                  /* 120 -> 90 */
    margin-top:8px;               /* 10 -> 8 */
    background:#ffffff;
    border-radius:6px;
    padding:6px;                  /* 8 -> 6 */
  }
</style>
</head>

<div class="content-grid">
    
    <div class="content-box">
      <div class="box-header">
        <i class="fas fa-globe-americas icon"></i>
        <div class="box-title">문화적 겸손의 실천</div>
      </div>
      <div class="box-content">
        <p><span class="highlight">호기심 기반 접근:</span> 전문가적 지식보다 내담자의 문화적 경험에 대한 호기심을 우선</p>
        <p class="sub-title">• "이 문제가 당신의 문화에서 어떻게 이해되나요?"</p>
        <p class="sub-title">• "당신의 가족/공동체는 이 상황을 어떻게 바라보시나요?"</p>
        <div class="culture-example">
          <div class="example-title">[사례] 한국계 미국인 환자</div>
          <div>음주 문제 상담 시, 전통적 음주 문화와 가족 기대를 먼저 이해한 후 변화 동기 탐색</div>
        </div>
      </div>
    </div>

<div class="content-box">
      <div class="box-header">
        <i class="fas fa-search icon"></i>
        <div class="box-title">가치 탐색 방법</div>
      </div>
      <div class="box-content">
        <p><span class="highlight">문화적 가치 탐색:</span> 개인적 가치뿐 아니라 문화적 가치를 포함한 탐색</p>
        <p class="sub-title">• 가족 중심적 가치 vs 개인 중심적 가치</p>
        <p class="sub-title">• 종교적·영적 가치의 고려</p>
        <p class="sub-title">• 집단 이익 vs 개인 이익의 균형</p>
        <div class="culture-example">
          <div class="example-title">[사례] 라틴계 환자</div>
          <div>가족 중심 가치를 강조하며, 개인 변화가 가족에 미치는 영향을 함께 탐색</div>
        </div>
      </div>
    </div>

<div class="content-box">
      <div class="box-header">
        <i class="fas fa-adjust icon"></i>
        <div class="box-title">문화적 적응 사례</div>
      </div>
      <div class="box-content">
        <p><span class="highlight">맞춤형 적응:</span> 문화적 맥락에 맞춘 MI 기법 조정</p>
        <p class="sub-title">• 직접적 대화 vs 간접적 대화 스타일</p>
        <p class="sub-title">• 감정 표현의 문화적 차이 고려</p>
        <p class="sub-title">• 권위에 대한 문화적 태도 반영</p>
        <div class="culture-example">
          <div class="example-title">[사례] 중국계 환자</div>
          <div>권위 존중을 고려하여, 전문성 인정과 자율성 강조를 함께 설계</div>
        </div>
      </div>
    </div>

<div class="content-box">
      <div class="box-header">
        <i class="fas fa-chart-line icon"></i>
        <div class="box-title">효과성 연구</div>
      </div>
      <div class="box-content">
        <p><span class="highlight">문화적 맞춤형 MI:</span> 문화적 배경을 고려한 MI의 효과</p>
        <p class="sub-title">• Hispanics: 65% 효과성 향상 (meta-analysis)</p>
        <p class="sub-title">• 아시아계: 45% 참여도 증가</p>
        <p class="sub-title">• 흑인계: 52% 지속 유지율 향상</p>
        <div class="chart-container">
          <canvas id="cultureChart"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>