@charset "utf-8";
/* =====================================================================
   ONWEB 몽9 디자인 기준 v1   ( mong9-onweb-design.css )
   ---------------------------------------------------------------------
   [설계 원칙]
   1) 몽9 네이티브 클래스로 해결되는 것은 여기서 다시 만들지 않는다.
      - 글자 크기 : m9-f-size / large / xlarge / xxlarge / xxxlarge / big  (+ m- , e- 변형)
      - 여백      : m9-padding-0~3 , m9-padding-width/height/top/bottom-0~3 , m9-margin-*
      - 단 나누기 : m9-grid-N + m9-column-N , m9-float-N (+ m-m9-float-N , e-m9-float-N)
      - 줄간격    : line-height-100~200
      이 파일은 "색 팔레트"와 "반복 컴포넌트의 치수"만 담당한다.

   2) 모든 셀렉터는 .m9-grid-block 하위에 둔다.
      몽9가 ".m9-grid-block *{margin:0;padding:0;border-width:0;color:inherit}" 로
      전역 리셋을 걸기 때문에, 그보다 높은 특이도(클래스 2개)가 필요하다.

   3) 몽9는 저장 시 HTMLPurifier 를 통과시킨다(adm/contentform.php → html_purifier).
      box-shadow / transform / flex / gap / grid / object-fit / gradient / transition 은
      전부 잘려나가므로 이 파일에서도 쓰지 않는다. class 속성은 그대로 보존된다.

   [로드 위치]
   includes/functions/editor-function.php 의 mong9editor_site_enqueue_scripts() 안,
   mong9-e.css 다음에 로드된다. 편집창과 실제 사이트 양쪽에 모두 적용된다.
   이 파일을 지우면 자동으로 비활성화된다(PHP 쪽에서 file_exists 체크).

   [브레이크포인트]  m- = 1024px 이하 / e- = 500px 이하  (2026-09-23 변경)
   ===================================================================== */


/* =====================================================================
   1. 이미지
   ===================================================================== */
.m9-grid-block .ow-img{border-radius:14px;overflow:hidden}
.m9-grid-block .ow-img-lg{border-radius:18px;overflow:hidden}
.m9-grid-block .ow-img-circle{border-radius:50%;overflow:hidden}


/* =====================================================================
   2. 아이콘 배지  — 라운드 사각이 기본, 원형은 ow-badge-circle 추가
      아이콘 크기는 <i> 에 m9-f-xxlarge / m9-f-xxxlarge 로 준다
      <div class="ow-badge ow-a1"><i class="bi bi-heart-pulse-fill m9-f-xxxlarge"><i>&nbsp;</i></i></div>
   ===================================================================== */
.m9-grid-block .ow-badge{display:block;width:80px;height:80px;border-radius:14px;line-height:80px;text-align:center}
.m9-grid-block .ow-badge-sm{width:56px;height:56px;border-radius:12px;line-height:56px}
.m9-grid-block .ow-badge-lg{width:104px;height:104px;border-radius:18px;line-height:104px}
.m9-grid-block .ow-badge-circle{border-radius:50%}
.m9-grid-block .ow-badge i{vertical-align:middle}


/* =====================================================================
   3. 카드  — 흰 바탕 + 얇은 테두리. 색 띠나 그림자를 얹지 않는다
   ===================================================================== */
.m9-grid-block .ow-card{background:#fff;border:1px solid #ededf0;border-radius:16px;padding:1.8em}
.m9-grid-block .ow-card-soft{background:#f6f7f9;border:1px solid #f6f7f9;border-radius:16px;padding:1.8em}
.m9-grid-block .ow-card-c{text-align:center}
/* ⚠️ 카드·이미지 나열은 반드시 <ul class="m9-float-N m9-spacing-1 m-m9-float-N e-m9-float-1"> + <li> 로 짠다.
   - 몽9 에디터가 목록으로 인식해야 항목 추가/삭제가 편하다 (사용자 요구사항)
   - table / table-cell + m-display-block 조합은 반응형이 풀리지 않는다.
     부모가 display:table 로 남아 자식이 다시 익명 셀로 감싸지기 때문에
     태블릿·모바일 모드에서 폭이 화면 밖으로 넘친다. 쓰지 말 것.
   - 2단(사진/본문)은 m9-grid-2 + m9-column-1 을 쓴다. 이건 몽9가 자동으로 1단으로 접는다. */
.m9-grid-block .ow-gap{width:2%}
.m9-grid-block .ow-card-t{font-weight:700;color:#1a1a1a}
.m9-grid-block .ow-card-d{color:#777;line-height:1.7}


/* =====================================================================
   4. 알림바  — 왼쪽 컬러 바 + 옅은 바탕. 악센트 클래스로 색을 바꾼다
      <div class="ow-bar ow-a1"> … </div>
   ===================================================================== */
.m9-grid-block .ow-bar{position:relative;background:#f4f5f7;border-left-width:5px;border-left-style:solid;border-left-color:#aeb3bd;border-radius:5px;padding:1.4em 1.6em}
.m9-grid-block .ow-bar-t{font-weight:700;color:#1a1a1a}


/* =====================================================================
   5. 인용 / 강조 박스  — 본문 중간에서 한 문단을 들어올릴 때
   ===================================================================== */
.m9-grid-block .ow-quote{background:#f6f7fb;border-left-width:3px;border-left-style:solid;border-left-color:#8b90a5;border-radius:12px;padding:2em 2.2em}


/* =====================================================================
   6. 번호 목록  — 박스 없이 숫자 + 가는 구분선만
      <div class="ow-num">
        <div class="ow-num-row table width-100">
          <div class="table-cell ow-num-no ow-t1">01</div>
          <div class="table-cell"> … </div>
        </div>
      </div>
   ===================================================================== */
.m9-grid-block .ow-num{border-top:1px solid #e9eaee}
.m9-grid-block .ow-num-row{border-bottom:1px solid #e9eaee;padding:1.4em 0.2em}
.m9-grid-block .ow-num-no{width:92px;font-weight:700;vertical-align:top}
.m9-grid-block .ow-num-t{font-weight:700;color:#1a1a1a}
.m9-grid-block .ow-num-d{color:#777;line-height:1.7}


/* =====================================================================
   7. 하단 문의(CTA) 패널 + 알약 버튼
   ===================================================================== */
.m9-grid-block .ow-cta{background:#f2f3f5;border-radius:12px;padding:2.4em 1.8em 2.8em;text-align:center}
.m9-grid-block .ow-btn{display:inline-block;background:#0e0e4d;color:#fff;border-radius:50px;padding:0.9em 2.2em;font-weight:700;text-decoration:none}
.m9-grid-block .ow-btn i{color:#fff;display:inline-block;margin-right:10px;vertical-align:middle}


/* =====================================================================
   8. 구분선 / 제목 밑줄 / 섹션 여백
   ===================================================================== */
.m9-grid-block .ow-hr{height:1px;background:#e9eaee;line-height:0;font-size:0}
.m9-grid-block .ow-hr-dot{height:0;border-top:1px dashed #dcdee4;line-height:0;font-size:0}
.m9-grid-block .ow-line{width:36px;height:3px;border-radius:2px;background:currentColor;line-height:0;font-size:0}
.m9-grid-block .ow-sec{padding-top:4.5em}
.m9-grid-block .ow-sec-sm{padding-top:2.4em}


/* =====================================================================
   9. 반응형 보정
   ===================================================================== */
@media screen and (max-width:1024px){
	.m9-grid-block .ow-card,
	.m9-grid-block .ow-card-soft{padding:1.4em}
	.m9-grid-block .ow-badge{width:64px;height:64px;line-height:64px;border-radius:12px}
	.m9-grid-block .ow-badge-lg{width:80px;height:80px;line-height:80px;border-radius:14px}
	.m9-grid-block .ow-bar{padding:1.1em 1.2em}
	.m9-grid-block .ow-quote{padding:1.5em 1.4em}
	.m9-grid-block .ow-cta{padding:2em 1.2em 2.2em}
	.m9-grid-block .ow-num-no{width:62px}
	.m9-grid-block .ow-sec{padding-top:3em}
	.m9-grid-block .ow-sec-sm{padding-top:1.8em}
}
@media screen and (max-width:500px){
	.m9-grid-block .ow-badge{width:56px;height:56px;line-height:56px}
	.m9-grid-block .ow-badge-lg{width:68px;height:68px;line-height:68px}
	.m9-grid-block .ow-num-no{width:48px}
	.m9-grid-block .ow-sec{padding-top:2.4em}
}


/* =====================================================================
   9-2. 아이콘 박스 목록 (ow-ibx)  — 메인 버튼 격자. 구 위젯 gt_btns_3x3 대체
        [2026-09-27 ONWEB]
   ---------------------------------------------------------------------
   ※ 이 절은 transition / transform / flex 를 쓴다.
     HTMLPurifier 는 "저장되는 본문 HTML" 만 거르므로 이 CSS 파일 안의 선언은 잘리지 않는다.
     본문의 인라인 style 에는 여전히 쓰지 말 것.

   <div class="m9-grid-block ow-ibx ow-ibx-line ow-ibx-h2 ow-fx-fill ow-fx-blob">
    <div class="m9-grid-1"><div class="m9-column-1 _not-copy">
     <ul class="m9-float-3 m9-spacing-0 m-m9-float-3 e-m9-float-3 ow-ibx-list">
      <li class="is-on"><a href="#" class="ow-ibx-item">
        <i class="bi bi-phone m9-f-big e-m9-f-xxlarge ow-ibx-ico"><i>&nbsp;</i></i>
        <span class="ow-ibx-txt"><span class="ow-ibx-tit m9-f-large e-m9-f-small">제목</span>
                                 <span class="ow-ibx-sub m9-f-small">자세히보기</span></span>
      </a></li>
      …
   ※ <a> 안에는 span 만 넣는다. HTMLPurifier 가 a 안의 div·h3 같은 블록 요소를 지울 수 있다.

   [열 수 — ul]
     m9-float-N PC | m-m9-float-N 태블릿(1024 이하) | e-m9-float-N 모바일(500 이하)   N = 1~6
     기본 3 / 3 / 3. 격자선·라운드 없음(ow-ibx-line·plain)은 m9-spacing-0, 카드(ow-ibx-card)는 m9-spacing-1

   [설정 클래스 — 바깥 div]
     모양     ow-ibx-line 격자선 | ow-ibx-card 라운드 카드(ul 을 m9-spacing-1 로) | ow-ibx-plain 선 없음
     배치      (기본) 세로 가운데 | ow-ibx-row 아이콘 왼쪽 + 글자 오른쪽
     높이      ow-ibx-h1 140 | h2 180 | h3 220 | h4 260px   (태블릿 85% · 모바일 80% 자동)
     강조색    (기본) 테마 강조컬러 --rb-point | ow-ibx-c0 ~ c8 팔레트 고정
     채움      ow-fx-soft 연한 강조색 | ow-fx-fill 진한 강조색 + 글자 반전 | (없음) 효과 없음
     따라다님  ow-fx-blob  — 강조색 덩어리가 마우스를 따라 미끄러진다
               source/js/mong9-onweb-fx.js 가 켠다. 스크립트가 없거나 편집창·터치 기기면
               일반 호버(soft/fill)로 동작한다. 색 세기는 soft / fill 을 따른다.
   [지정 — li]
     <li class="is-on"> 처음부터 강조된 항목. 다른 항목에 마우스가 가면 잠시 꺼졌다가
     마우스가 목록을 벗어나면 이 자리로 돌아온다. 없애려면 클래스를 지운다.
   [아이콘 색]
     아이콘 <i> 에 ow-t1 ~ ow-t8 을 붙이면 항목마다 다른 색. 없으면 강조색.
   ===================================================================== */
.m9-grid-block.ow-ibx{
	--ibx-pt:var(--rb-point,#3a5fd9);                         /* 강조색 (테마 강조컬러를 따라간다) */
	--ibx-on:var(--rb-point-on,#fff);                         /* 강조색 위 글자색 */
	--ibx-soft:var(--rb-point-12,rgba(58,95,217,.12));        /* 연한 채움 */
	--ibx-deep:var(--rb-point-dark,var(--rb-point,#2c4bb8));  /* 연한 채움 위 제목색 */
	--ibx-line:#e4e6eb;
	--ibx-h:0px;       /* 최소 높이 — ow-ibx-hN 이 정한다 */
	--ibx-rad:14px;    /* 항목(a) 둥글기 */
	--ibx-brad:14px;   /* 물방울 둥글기 (li 테두리 바깥 기준) */
}

/* 모양 */
.m9-grid-block.ow-ibx-line{--ibx-rad:0px;--ibx-brad:0px}
.m9-grid-block.ow-ibx-line .ow-ibx-list{border-top:1px solid var(--ibx-line);border-left:1px solid var(--ibx-line)}
.m9-grid-block.ow-ibx-line .ow-ibx-list>li{border-right:1px solid var(--ibx-line);border-bottom:1px solid var(--ibx-line)}
.m9-grid-block.ow-ibx-card{--ibx-rad:15px;--ibx-brad:16px}
.m9-grid-block.ow-ibx-card .ow-ibx-list>li{background-color:#fff;border:1px solid #ededf0;border-radius:16px}

/* 높이 */
.m9-grid-block.ow-ibx-h1{--ibx-h:140px}
.m9-grid-block.ow-ibx-h2{--ibx-h:180px}
.m9-grid-block.ow-ibx-h3{--ibx-h:220px}
.m9-grid-block.ow-ibx-h4{--ibx-h:260px}

/* 항목 — 목록 ul 이 물방울의 기준(position:relative). li 에는 position 을 주지 않는다 */
.m9-grid-block.ow-ibx .ow-ibx-list{position:relative}
.m9-grid-block.ow-ibx .ow-ibx-item{
	position:relative;z-index:1;   /* 글자를 물방울 위로 */
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	min-height:var(--ibx-h);padding:2em 1em;border-radius:var(--ibx-rad);
	text-align:center;text-decoration:none;word-break:keep-all;color:#1a1a1a;background-color:transparent;
	-webkit-tap-highlight-color:transparent;
	transition:background-color .25s ease,color .25s ease;
}
.m9-grid-block.ow-ibx .ow-ibx-item:focus{outline:none}
.m9-grid-block.ow-ibx .ow-ibx-item:focus-visible{box-shadow:inset 0 0 0 2px var(--ibx-pt)}
/* 아이콘 — 특이도 (0,2,0) 을 일부러 유지한다. 아래 팔레트의 ow-t1~t8 이 뒤에서 이겨야 한다 */
.m9-grid-block .ow-ibx-ico{display:block;line-height:1;color:var(--ibx-pt);transition:color .25s ease,transform .4s cubic-bezier(.3,.7,.2,1)}
.m9-grid-block.ow-ibx .ow-ibx-txt{display:block}
.m9-grid-block.ow-ibx .ow-ibx-tit{display:block;margin-top:.8em;font-weight:700;line-height:1.4;color:inherit}
.m9-grid-block.ow-ibx .ow-ibx-sub{display:block;margin-top:.35em;line-height:1.5;color:#8a8f98;transition:color .25s ease}

/* 배치 — 아이콘 왼쪽 */
.m9-grid-block.ow-ibx-row .ow-ibx-item{flex-direction:row;justify-content:flex-start;text-align:left;padding:1.4em 1.6em}
.m9-grid-block.ow-ibx-row .ow-ibx-ico{margin-right:.28em}
.m9-grid-block.ow-ibx-row .ow-ibx-tit{margin-top:0}

/* ── 강조 상태 ──────────────────────────────────────────────
   "켜진 항목" = 마우스가 올라간 li, 또는 목록에 마우스가 없을 때의 li.is-on, 또는 키보드 초점.
   :not(:hover) 로 거는 이유 — 다른 항목을 가리키는 동안 지정 항목까지 켜져 있으면 두 개가 강조된다. */

/* ★ 물방울이 켜지면(is-fx) 켜진 항목은 CSS 의 :hover 가 아니라 스크립트가 붙이는 li.is-hot 이다.
     :hover 로 두면 마우스가 가만히 있는 채 배치가 바뀌거나 페이지가 열릴 때 mouseenter 가
     안 와서, 글자만 흰색이 되고 물방울은 다른 칸에 있는 상태(흰 바탕에 흰 글씨)가 된다.
     그래서 :hover 규칙은 :not(.is-fx) 로 막고, is-hot 규칙을 따로 둔다. */

/* soft : 연한 강조색 + 제목만 짙은 강조색 */
.m9-grid-block.ow-fx-soft:not(.is-fx) .ow-ibx-list>li:hover>.ow-ibx-item,
.m9-grid-block.ow-fx-soft:not(.is-fx) .ow-ibx-list:not(:hover)>li.is-on>.ow-ibx-item,
.m9-grid-block.ow-fx-soft:not(.is-fx) .ow-ibx-list>li>.ow-ibx-item:focus-visible,
.m9-grid-block.ow-fx-soft.is-fx .ow-ibx-list>li.is-hot>.ow-ibx-item{background-color:var(--ibx-soft);color:var(--ibx-deep)}

/* fill : 진한 강조색 + 글자·아이콘 반전 */
.m9-grid-block.ow-fx-fill:not(.is-fx) .ow-ibx-list>li:hover>.ow-ibx-item,
.m9-grid-block.ow-fx-fill:not(.is-fx) .ow-ibx-list:not(:hover)>li.is-on>.ow-ibx-item,
.m9-grid-block.ow-fx-fill:not(.is-fx) .ow-ibx-list>li>.ow-ibx-item:focus-visible,
.m9-grid-block.ow-fx-fill.is-fx .ow-ibx-list>li.is-hot>.ow-ibx-item{background-color:var(--ibx-pt);color:var(--ibx-on)}
.m9-grid-block.ow-fx-fill:not(.is-fx) .ow-ibx-list>li:hover .ow-ibx-ico,
.m9-grid-block.ow-fx-fill:not(.is-fx) .ow-ibx-list>li:hover .ow-ibx-sub,
.m9-grid-block.ow-fx-fill:not(.is-fx) .ow-ibx-list:not(:hover)>li.is-on .ow-ibx-ico,
.m9-grid-block.ow-fx-fill:not(.is-fx) .ow-ibx-list:not(:hover)>li.is-on .ow-ibx-sub,
.m9-grid-block.ow-fx-fill:not(.is-fx) .ow-ibx-list>li>.ow-ibx-item:focus-visible .ow-ibx-ico,
.m9-grid-block.ow-fx-fill:not(.is-fx) .ow-ibx-list>li>.ow-ibx-item:focus-visible .ow-ibx-sub,
.m9-grid-block.ow-fx-fill.is-fx .ow-ibx-list>li.is-hot .ow-ibx-ico,
.m9-grid-block.ow-fx-fill.is-fx .ow-ibx-list>li.is-hot .ow-ibx-sub{color:var(--ibx-on)}

/* 물방울이 도착할 즈음 글자색이 바뀌게 — 들어올 때만 살짝 늦춘다 */
.m9-grid-block.ow-ibx.is-fx .ow-ibx-list>li.is-hot .ow-ibx-item,
.m9-grid-block.ow-ibx.is-fx .ow-ibx-list>li.is-hot .ow-ibx-ico,
.m9-grid-block.ow-ibx.is-fx .ow-ibx-list>li.is-hot .ow-ibx-sub{transition-delay:.12s}

/* 아이콘 살짝 들어올리기 (마우스 올렸을 때만) */
.m9-grid-block.ow-ibx .ow-ibx-list>li:hover .ow-ibx-ico{transform:translateY(-4px)}

/* ── 따라다니는 물방울 (ow-fx-blob) ─────────────────────────
   물방울 <i class="ow-ibx-blob"> 은 mong9-onweb-fx.js 가 ul 끝에 붙인다(저장되는 본문에는 없다).
   ul 끝에 두는 이유 — 맨 앞에 두면 m9-float 의 nth-child(3n+1) clear 규칙이 한 칸씩 밀린다.
   스크립트가 준비되면 바깥 div 에 is-fx 가 붙고, 그때부터 항목 자체의 배경은 끈다(배경은 물방울이 맡는다). */
.m9-grid-block.ow-fx-blob .ow-ibx-blob{
	position:absolute;z-index:0;left:0;top:0;width:0;height:0;margin:0;float:none;
	opacity:0;pointer-events:none;border-radius:var(--ibx-brad);background-color:var(--ibx-soft);
	transition:left .45s cubic-bezier(.3,.8,.2,1),top .45s cubic-bezier(.3,.8,.2,1),
	           width .45s cubic-bezier(.3,.8,.2,1),height .45s cubic-bezier(.3,.8,.2,1),opacity .25s ease;
}
.m9-grid-block.ow-fx-blob.ow-fx-fill .ow-ibx-blob{background-color:var(--ibx-pt)}
.m9-grid-block.ow-fx-blob.is-fx .ow-ibx-list>li>.ow-ibx-item{background-color:transparent !important}

/* 반응형 — 높이·여백만 줄인다. 열 수는 ul 의 m-/e- 클래스가 정한다 */
@media screen and (max-width:1024px){
	.m9-grid-block.ow-ibx .ow-ibx-item{min-height:calc(var(--ibx-h) * .85);padding:1.6em .8em}
	.m9-grid-block.ow-ibx-row .ow-ibx-item{padding:1.2em 1.2em}
}
@media screen and (max-width:500px){
	.m9-grid-block.ow-ibx .ow-ibx-item{min-height:calc(var(--ibx-h) * .8);padding:1.2em .3em}
	.m9-grid-block.ow-ibx-row .ow-ibx-item{padding:1em 1em}
}
@media (prefers-reduced-motion:reduce){
	.m9-grid-block.ow-ibx .ow-ibx-item,
	.m9-grid-block.ow-ibx .ow-ibx-ico,
	.m9-grid-block.ow-ibx .ow-ibx-blob{transition:none}
	.m9-grid-block.ow-ibx .ow-ibx-list>li:hover .ow-ibx-ico{transform:none}
}

/* 강조색 고정 — 테마 강조컬러 대신 팔레트 색을 쓴다 (아래 10절과 같은 값) */
.m9-grid-block.ow-ibx-c0{--ibx-pt:#374151;--ibx-on:#fff;--ibx-soft:#f1f2f4;--ibx-deep:#1f2937}
.m9-grid-block.ow-ibx-c1{--ibx-pt:#3a5fd9;--ibx-on:#fff;--ibx-soft:#eef2ff;--ibx-deep:#3a5fd9}
.m9-grid-block.ow-ibx-c2{--ibx-pt:#0d9488;--ibx-on:#fff;--ibx-soft:#eafaf6;--ibx-deep:#0d9488}
.m9-grid-block.ow-ibx-c3{--ibx-pt:#e8632a;--ibx-on:#fff;--ibx-soft:#fff1ec;--ibx-deep:#e8632a}
.m9-grid-block.ow-ibx-c4{--ibx-pt:#7c3aed;--ibx-on:#fff;--ibx-soft:#f5eefd;--ibx-deep:#7c3aed}
.m9-grid-block.ow-ibx-c5{--ibx-pt:#db2777;--ibx-on:#fff;--ibx-soft:#fdeef2;--ibx-deep:#db2777}
.m9-grid-block.ow-ibx-c6{--ibx-pt:#b48306;--ibx-on:#fff;--ibx-soft:#fff9e6;--ibx-deep:#b48306}
.m9-grid-block.ow-ibx-c7{--ibx-pt:#3f9142;--ibx-on:#fff;--ibx-soft:#e9f6e6;--ibx-deep:#3f9142}
.m9-grid-block.ow-ibx-c8{--ibx-pt:#1c7fb8;--ibx-on:#fff;--ibx-soft:#e6f4fb;--ibx-deep:#1c7fb8}

/* =====================================================================
   9-3. 퀵메뉴 띠 (ow-qk)  — 메인 가로 퀵링크. 구 위젯 gt_btns2_full 대체
        [2026-09-28 ONWEB]
   ---------------------------------------------------------------------
   ow-ibx(9-2) 위에 얹는 변형이다. 채움·물방울·강조색·팔레트는 9-2 를 그대로 쓰고
   (바깥 div 에 ow-ibx 도 함께 붙인다), 이 절은 가로 한 줄 배치·배경·여백만 맡는다.
   따라다니는 효과는 mong9-onweb-fx.js 가 ul.ow-ibx-list 를 찾아 붙인다(수정 없음).

   <div class="m9-grid-block ow-ibx ow-qk ow-qk-full ow-qk-pt3 ow-qk-pb3 ow-qk-h2 ow-fx-soft ow-fx-blob">
    <div class="m9-grid-1 m9-spacing-0"><div class="m9-column-1 _not-copy"><div class="ow-qk-in">
     <ul class="ow-qk-list m9-spacing-0 m-m9-float-4 e-m9-float-4 ow-ibx-list">
      <li><a href="#" class="ow-ibx-item">
        <i class="bi bi-grid m9-f-xxxlarge e-m9-f-xxlarge ow-ibx-ico ow-t1"><i>&nbsp;</i></i>
        <span class="ow-ibx-tit m9-f-size e-m9-f-small">퀵링크1</span></a></li> …

   ※ 마우스를 올리면 아이콘이 1.2배로 자연스럽게 커진다(원본 위젯과 같은 효과).
   ※ 글자·아이콘 크기는 이 절에서 정하지 않는다. 몽9 에디터의 글자 크기 도구(m9-f-* / m-m9-f-* / e-m9-f-*)로 항목마다 준다.

   [모듈 여백 — 위젯]
     gt_title_co_id 모듈 제목  co_id|상단|하단   예) main_quick|0|0  ·  main_quick|-40|20
     이 값이 모든 화면 폭에서 그대로 쓰인다(위젯의 1280 이하 20px 강제 여백은 이 블록에서만 끈다).
     음수면 위 모듈(배너)에 걸쳐 올라간다.

   [목록 — ul]
     PC(1025~)       개수와 상관없이 한 줄, 가운데 정렬. 항목 폭은 균등(최대 200px) — 개수가 적으면 가운데로 모인다.
     태블릿(≤1024)   m-m9-float-N 이 있으면 N열 격자, 없으면 PC 처럼 한 줄
     모바일(≤500)    e-m9-float-N 이 있으면 N열 격자, 없으면 태블릿 설정을 따른다

   [설정 클래스 — 바깥 div]
     띠 폭       ow-qk-full 화면 끝까지 | (없음) 사이트 폭(1400) 안, 모서리 16px 라운드
     띠 배경     (없음) 투명 | ow-qk-bg-white | bg-gray | bg-soft 테마 연한색 | bg-point 테마색 | bg-navy
     상자 배경   (없음) 투명 | ow-qk-box-white | box-gray | box-soft | box-point | box-navy
                 상자는 1400 안쪽 내용 영역에 라운드 패널을 깐다. 띠 배경과 함께 쓸 수 있다.
                 진한 배경(point·navy)이면 글자·아이콘이 흰색으로 바뀐다(ow-tN 을 붙인 아이콘은 그 색 유지).
     띠 안쪽 위   ow-qk-pt0 0 | pt1 10 | pt2 20 | pt3 30 | pt4 40 | pt5 60 | pt6 80px   (배경색 안쪽 여백)
     띠 안쪽 아래 ow-qk-pb0 ~ pb6 (같은 값)      태블릿 75% · 모바일 50% 자동
     항목 높이   ow-qk-h0 내용만큼 | h1 90 | h2 110 | h3 130 | h4 160px   (태블릿 85% · 모바일 80%)
     항목 폭     (없음) 균등 분할(최대 200) | ow-qk-w0 내용만큼 | w1 100 | w2 120 | w3 140 | w4 160 | w5 200px
                 폭을 정하면 가운데로 모이고, 좁은 화면에서는 가운데 정렬로 줄바꿈된다.
     항목 간격   (없음) 6px | ow-qk-g0 0 | g1 10 | g2 20 | g3 30 | g4 40 | g5 60px   (한 줄로 놓일 때. 격자일 때는 몽9 규칙)
     강조색·채움·따라다님  9-2 와 같다 (ow-ibx-c0~c8 / ow-fx-soft·fill / ow-fx-blob)
   ===================================================================== */
.m9-grid-block.ow-qk{
	--qk-fg:#1a1a1a;        /* 항목 제목 */
	--qk-sub:#8a8f98;       /* 부제 */
	--qk-ico:var(--ibx-pt); /* 아이콘 기본색 (ow-tN 이 없을 때) */
	--ibx-h:110px;
	--ibx-brad:12px;
	--qk-pt:0px;--qk-pb:0px;
	position:relative;z-index:2;   /* 모듈 제목 여백을 음수로 줘서 위 모듈에 걸칠 때 위에 그려지게 */
	padding-top:var(--qk-pt);padding-bottom:var(--qk-pb);
	border-radius:16px;
}

/* 띠 폭 — 사이트 폭 안이면 라운드, full 이면 화면 끝까지 (--gt-vw: 스크롤바를 뺀 폭, gt_add_extend.php) */
.m9-grid-block.ow-qk-full{
	border-radius:0;width:var(--gt-vw,100vw);max-width:none;
	margin-left:calc(50% - var(--gt-vw,100vw) / 2);margin-right:0;
}
.m9-grid-block.ow-qk-full>.m9-grid-1{width:1440px;max-width:100%;padding-left:20px;padding-right:20px;box-sizing:border-box}   /* 1400 + 좌우 20 */

/* 띠 배경 */
.m9-grid-block.ow-qk-bg-white{background-color:#fff}
.m9-grid-block.ow-qk-bg-gray{background-color:#f4f5f7}
.m9-grid-block.ow-qk-bg-soft{background-color:var(--ibx-soft)}
.m9-grid-block.ow-qk-bg-point{background-color:var(--ibx-pt)}
.m9-grid-block.ow-qk-bg-navy{background-color:#16325c}

/* 상자 */
.m9-grid-block.ow-qk .ow-qk-in{position:relative}
.m9-grid-block.ow-qk[class*="ow-qk-box-"] .ow-qk-in{border-radius:16px;padding:18px 24px}
.m9-grid-block.ow-qk-box-white .ow-qk-in{background-color:#fff;border:1px solid #ededf0}
.m9-grid-block.ow-qk-box-gray .ow-qk-in{background-color:#f4f5f7}
.m9-grid-block.ow-qk-box-soft .ow-qk-in{background-color:var(--ibx-soft)}
.m9-grid-block.ow-qk-box-point .ow-qk-in{background-color:var(--ibx-pt)}
.m9-grid-block.ow-qk-box-navy .ow-qk-in{background-color:#16325c}

/* 진한 바탕 — 상자가 없는 진한 띠, 또는 진한 상자. 값은 .ow-qk-in 에만 건다(흰 상자를 얹으면 원래 색 유지) */
.m9-grid-block.ow-qk-bg-point:not([class*="ow-qk-box-"]) .ow-qk-in,
.m9-grid-block.ow-qk-bg-navy:not([class*="ow-qk-box-"]) .ow-qk-in,
.m9-grid-block.ow-qk-box-point .ow-qk-in,
.m9-grid-block.ow-qk-box-navy .ow-qk-in{
	--qk-fg:#fff;--qk-sub:rgba(255,255,255,.72);--qk-ico:#fff;
	--ibx-soft:rgba(255,255,255,.16);--ibx-deep:#fff;
}

/* 띠 안쪽 여백 · 높이 */
.m9-grid-block.ow-qk-pt0{--qk-pt:0px}.m9-grid-block.ow-qk-pt1{--qk-pt:10px}.m9-grid-block.ow-qk-pt2{--qk-pt:20px}
.m9-grid-block.ow-qk-pt3{--qk-pt:30px}.m9-grid-block.ow-qk-pt4{--qk-pt:40px}.m9-grid-block.ow-qk-pt5{--qk-pt:60px}.m9-grid-block.ow-qk-pt6{--qk-pt:80px}
.m9-grid-block.ow-qk-pb0{--qk-pb:0px}.m9-grid-block.ow-qk-pb1{--qk-pb:10px}.m9-grid-block.ow-qk-pb2{--qk-pb:20px}
.m9-grid-block.ow-qk-pb3{--qk-pb:30px}.m9-grid-block.ow-qk-pb4{--qk-pb:40px}.m9-grid-block.ow-qk-pb5{--qk-pb:60px}.m9-grid-block.ow-qk-pb6{--qk-pb:80px}
.m9-grid-block.ow-qk-h0{--ibx-h:0px}.m9-grid-block.ow-qk-h1{--ibx-h:90px}.m9-grid-block.ow-qk-h2{--ibx-h:110px}
.m9-grid-block.ow-qk-h3{--ibx-h:130px}.m9-grid-block.ow-qk-h4{--ibx-h:160px}

/* 목록 — PC 는 한 줄, 가운데 정렬 */
.m9-grid-block.ow-qk .ow-qk-list{
	display:flex;justify-content:center;align-items:stretch;gap:var(--qk-gap);
	list-style:none;margin:0;padding:0;
}
/* 몽9 목록의 clearfix(:after) 가 flex 에서는 빈 항목이 되어 간격 하나만큼 오른쪽으로 밀린다 — 한 줄일 때만 끈다 */
.m9-grid-block.ow-qk .ow-qk-list:after{display:none}
.m9-grid-block.ow-qk .ow-qk-list>li{flex:1 1 0;min-width:0;max-width:200px}   /* float·width 는 건드리지 않는다 — 태블릿·모바일 격자가 m9 규칙을 그대로 쓴다 */

/* 항목 폭 고정 + 간격 지정 — 균등 분할 대신 정해진 폭으로 가운데에 모은다. 좁은 화면에서는 줄바꿈 */
.m9-grid-block.ow-qk{--qk-gap:6px}
.m9-grid-block.ow-qk-g0{--qk-gap:0px}.m9-grid-block.ow-qk-g1{--qk-gap:10px}.m9-grid-block.ow-qk-g2{--qk-gap:20px}
.m9-grid-block.ow-qk-g3{--qk-gap:30px}.m9-grid-block.ow-qk-g4{--qk-gap:40px}.m9-grid-block.ow-qk-g5{--qk-gap:60px}
.m9-grid-block.ow-qk-w0 .ow-qk-list,.m9-grid-block.ow-qk-w1 .ow-qk-list,.m9-grid-block.ow-qk-w2 .ow-qk-list,
.m9-grid-block.ow-qk-w3 .ow-qk-list,.m9-grid-block.ow-qk-w4 .ow-qk-list,.m9-grid-block.ow-qk-w5 .ow-qk-list{flex-wrap:wrap}
.m9-grid-block.ow-qk-w0 .ow-qk-list>li{flex:0 0 auto;max-width:none}
.m9-grid-block.ow-qk-w0 .ow-ibx-item{padding-left:1.4em;padding-right:1.4em}
.m9-grid-block.ow-qk-w1 .ow-qk-list>li{flex:0 0 100px;max-width:none}
.m9-grid-block.ow-qk-w2 .ow-qk-list>li{flex:0 0 120px;max-width:none}
.m9-grid-block.ow-qk-w3 .ow-qk-list>li{flex:0 0 140px;max-width:none}
.m9-grid-block.ow-qk-w4 .ow-qk-list>li{flex:0 0 160px;max-width:none}
.m9-grid-block.ow-qk-w5 .ow-qk-list>li{flex:0 0 200px;max-width:none}
.m9-grid-block.ow-qk .ow-ibx-item{padding:.9em .4em;color:var(--qk-fg);letter-spacing:-.02em}
.m9-grid-block.ow-qk .ow-ibx-tit{margin-top:.55em}
.m9-grid-block.ow-qk .ow-ibx-sub{color:var(--qk-sub)}
/* 아이콘 기본색 — 특이도 (0,2,0) 유지. 10절의 ow-t1~t8 이 뒤에서 이겨야 한다 */
.ow-qk .ow-ibx-ico{color:var(--qk-ico)}

/* 아이콘 확대 — 마우스를 올리면 자연스럽게 1.2배 (원본 위젯과 같은 효과. 9-2 의 들어올리기 대신) */
.m9-grid-block.ow-qk .ow-ibx-ico{display:inline-block;transition:color .25s ease,transform .35s cubic-bezier(.3,.7,.2,1.3)}
.m9-grid-block.ow-qk .ow-qk-list>li:hover .ow-ibx-ico,
.m9-grid-block.ow-qk .ow-qk-list>li>.ow-ibx-item:focus-visible .ow-ibx-ico{transform:scale(1.2)}

/* 모듈 여백·전폭 — 내용관리를 불러오는 위젯(gt_title_co_id / _bgfull / _nogap / _border) 안에서.
   ① 위젯은 1280 이하에서 위아래 20px 을 !important 로 강제한다 → 모듈 제목의 상단|하단 값
      (--co-mt / --co-mb, 위젯이 넘김)을 쓴다. _bgfull 은 바깥 띠가 여백을 맡으므로 안쪽은 0.
      위젯은 #gt_co_id_<uniqid> 로 걸기 때문에 :not(#…) 로 id 특이도를 맞춘다.
   ② 테마 contents_style.css 의 .onweb_div_1200{overflow:hidden} 이 ow-qk-full(화면 끝까지)을
      내용 폭에서 잘라 버린다 → 이 블록이 있을 때만 풀어 준다.
   ③ 음수 여백으로 위 모듈(배너)에 걸칠 때 배너 밑으로 숨지 않게 쌓임 순서를 올린다. */
.onweb_div_1200:not(#ow-qk-none):has(.ow-qk, .ow-qb){
	margin-top:var(--co-mt,0px) !important;margin-bottom:var(--co-mb,0px) !important;
	overflow:visible !important;position:relative;z-index:3;
}
/* ④ 모듈 제목의 상단|하단 은 PC 전용. 리빌더의 "모바일"(mobile.css, 1360 이하)에서는 0 으로 두고
      모듈설정 > 여백 설정의 "모바일 외부·내부" 값이 맡는다(-100 같은 음수가 모바일 여백을 먹지 않게). */
@media screen and (max-width:1360px){
	.onweb_div_1200:not(#ow-qk-none):has(.ow-qk, .ow-qb){margin-top:0 !important;margin-bottom:0 !important}
}

@media screen and (max-width:1024px){
	.m9-grid-block.ow-qk{padding-top:calc(var(--qk-pt) * .75);padding-bottom:calc(var(--qk-pb) * .75)}
	.m9-grid-block.ow-qk[class*="ow-qk-box-"] .ow-qk-in{padding:16px 16px}
	.m9-grid-block.ow-qk .ow-qk-list[class*="m-m9-float-"]{display:block}
	.m9-grid-block.ow-qk .ow-qk-list[class*="m-m9-float-"]:after{display:block}
	.m9-grid-block.ow-qk .ow-qk-list[class*="m-m9-float-"]>li{max-width:none}
	.m9-grid-block.ow-qk .ow-ibx-item{min-height:calc(var(--ibx-h) * .85);padding:.8em .3em}
}
@media screen and (max-width:500px){
	.m9-grid-block.ow-qk{padding-top:calc(var(--qk-pt) * .5);padding-bottom:calc(var(--qk-pb) * .5)}
	.m9-grid-block.ow-qk-full>.m9-grid-1{padding-left:12px;padding-right:12px}
	.m9-grid-block.ow-qk .ow-qk-list[class*="e-m9-float-"]{display:block}
	.m9-grid-block.ow-qk .ow-qk-list[class*="e-m9-float-"]:after{display:block}
	.m9-grid-block.ow-qk .ow-qk-list[class*="e-m9-float-"]>li{max-width:none}
	.m9-grid-block.ow-qk .ow-ibx-item{min-height:calc(var(--ibx-h) * .8);padding:.7em .2em}
}
@media (prefers-reduced-motion:reduce){
	.m9-grid-block.ow-qk .ow-ibx-ico{transition:none}
	.m9-grid-block.ow-qk .ow-qk-list>li:hover .ow-ibx-ico{transform:none}
}

/* ── 몽9 편집창 미리보기 ─────────────────────────────────────
   편집창의 태블릿·모바일 버튼은 화면 폭을 바꾸지 않고 mong9-m.css / mong9-e.css 를
   media 조건 없이 붙이기만 한다. 그래서 위 @media 규칙이 편집창에서는 안 먹는다.
   mong9-onweb-fx.js 가 그 두 파일이 붙은 것을 보고 <html> 에 ow-m9-m / ow-m9-e 를 달면
   아래 규칙이 같은 모양을 흉내 낸다(위 @media 두 덩어리와 내용을 맞출 것).
   편집창에서는 ow-qk-full(화면 끝까지)을 끈다 — 편집 영역 밖으로 넘치지 않게. */
.m9_editor_box .m9-grid-block.ow-qk-full,
._editor-wrap .m9-grid-block.ow-qk-full{width:100%;margin-left:0}

html.ow-m9-m .m9-grid-block.ow-qk{padding-top:calc(var(--qk-pt) * .75);padding-bottom:calc(var(--qk-pb) * .75)}
html.ow-m9-m .m9-grid-block.ow-qk[class*="ow-qk-box-"] .ow-qk-in{padding:16px 16px}
html.ow-m9-m .m9-grid-block.ow-qk .ow-qk-list[class*="m-m9-float-"]{display:block}
html.ow-m9-m .m9-grid-block.ow-qk .ow-qk-list[class*="m-m9-float-"]:after{display:block}
html.ow-m9-m .m9-grid-block.ow-qk .ow-qk-list[class*="m-m9-float-"]>li{max-width:none}
html.ow-m9-m .m9-grid-block.ow-qk .ow-ibx-item{min-height:calc(var(--ibx-h) * .85);padding:.8em .3em}

html.ow-m9-e .m9-grid-block.ow-qk{padding-top:calc(var(--qk-pt) * .5);padding-bottom:calc(var(--qk-pb) * .5)}
html.ow-m9-e .m9-grid-block.ow-qk-full>.m9-grid-1{padding-left:12px;padding-right:12px}
html.ow-m9-e .m9-grid-block.ow-qk .ow-qk-list[class*="e-m9-float-"]{display:block}
html.ow-m9-e .m9-grid-block.ow-qk .ow-qk-list[class*="e-m9-float-"]:after{display:block}
html.ow-m9-e .m9-grid-block.ow-qk .ow-qk-list[class*="e-m9-float-"]>li{max-width:none}
html.ow-m9-e .m9-grid-block.ow-qk .ow-ibx-item{min-height:calc(var(--ibx-h) * .8);padding:.7em .2em}


/* =====================================================================
   9-4. 히어로 하단 퀵바 (ow-qb)  — 배너 아래(또는 걸쳐서) 가로 안내·바로가기 바.
        구 위젯 gt_quickbar_01 대체   [2026-09-28 ONWEB]
   ---------------------------------------------------------------------
   아이콘 왼쪽 + 제목·한 줄 안내 + (CTA 칸) 화살표. 칸은 가로로 꽉 차게 균등 분할.
   ow-ibx / ow-qk 와 따로 선다(바깥 div 에 ow-ibx 를 붙이지 않는다).

   <div class="m9-grid-block ow-qb ow-qb-solid ow-qb-h2 ow-qb-follow">
    <div class="m9-grid-1 m9-spacing-0"><div class="m9-column-1 _not-copy">
     <ul class="ow-qb-list m9-spacing-0 m-m9-float-2 e-m9-float-1">
      <li class="is-cta"><a href="#" class="ow-qb-item">
        <i class="bi bi-calendar-check m9-f-xxlarge e-m9-f-xlarge ow-qb-ico"><i>&nbsp;</i></i>
        <span class="ow-qb-txt"><span class="ow-qb-tit m9-f-size">상담 예약</span>
                                <span class="ow-qb-sub m9-f-small">02-000-0000</span></span>
        <i class="bi bi-arrow-right ow-qb-arrow"><i>&nbsp;</i></i></a></li> …
   ※ <a> 안에는 span·i 만 넣는다(HTMLPurifier 가 a 안의 블록 요소를 지울 수 있다).
   ※ 아이콘·글자 크기는 이 절에서 정하지 않는다. 몽9 글자 크기 도구(m9-f-* / m-m9-f-* / e-m9-f-*)로 준다.

   [목록 — ul]
     PC(1025~)       칸 개수와 상관없이 한 줄, 균등 분할 (li 를 늘이고 줄이기만 하면 된다)
     태블릿(≤1024)   m-m9-float-N 이 있으면 N열 격자, 없으면 PC 처럼 한 줄
     모바일(≤500)    e-m9-float-N 이 있으면 N열 격자, 없으면 태블릿 설정을 따른다

   [설정 클래스 — 바깥 div]
     색 구성   ow-qb-solid 테마색 한 판, CTA 칸만 짙게 (기본)
               ow-qb-light 흰 판 · 어두운 글자, CTA 칸은 테마색
               ow-qb-dark  네이비 판 · 흰 글자, CTA 칸은 테마색
               ow-qb-glass 사진 위 반투명 유리막 · 흰 글자, CTA 칸은 테마색 반투명
     모양      (없음) 한 판 · 각진 모서리 | ow-qb-round 한 판 · 둥근 모서리 + 그림자
               ow-qb-pill  칸마다 떨어진 알약 + 그림자
     마우스    (없음) 칸 바탕만 살짝 밝아진다
               ow-qb-hover  올린 칸이 CTA 칸처럼 바뀐다 (CTA 칸은 그대로)
               ow-qb-follow CTA 색 덩어리가 마우스를 따라 미끄러지고, 벗어나면 CTA 칸(is-cta)으로 돌아간다.
                            CTA 칸이 없으면 벗어날 때 사라진다. mong9-onweb-fx.js 가 켠다 —
                            스크립트가 없거나 편집창·터치 기기면 ow-qb-hover 처럼 동작한다.
     바 색     (없음) 테마 강조컬러 --rb-point | ow-qb-c0 ~ c8 팔레트 고정 (0 차콜 · 1~8 = ow-t1~t8 색)
               li 에 ow-qb-cN 을 붙이면 그 칸만 다른 색
     높이      ow-qb-h0 내용만큼 | h1 80 | h2 96 (기본) | h3 110 | h4 130px   (태블릿 85% · 모바일 75%)
     구분선    (없음) 칸 사이 1px 선 | ow-qb-noline 선 없음   (pill 은 원래 선 없음)
   [칸 — li]
     is-cta    짙은 강조 칸. 몇 번째 칸이든, 여러 칸이든 붙일 수 있다. 없애면 모든 칸이 같은 모양
               (ow-qb-follow 에서 여러 칸이면 덩어리는 첫 번째 is-cta 로 돌아가고 나머지는 보통 칸이 된다)
     화살표    <i class="bi bi-arrow-right ow-qb-arrow"> 를 넣고 빼면 된다(아무 칸에나)
   [아이콘 색]
     기본은 색 구성에 맞춘 색(solid·dark·glass 흰색 / light 테마색). ow-t1 ~ ow-t8 을 붙이면 그 색.

   [모듈 여백 — 위젯]  gt_title_co_id 모듈 제목  co_id|상단|하단   예) main_quickbar|-50|0 → 배너에 50px 걸침
     PC(1361~) 전용. 모바일(≤1360)은 0 — 모듈설정 > 여백 설정의 모바일 값을 쓴다(9-3 과 같은 규칙).
   ===================================================================== */
.m9-grid-block.ow-qb{
	--qb-pt:var(--rb-point,#3a5fd9);   /* 바 색 = 테마 강조컬러 */
	--qb-on:var(--rb-point-on,#fff);   /* 바 색 위 글자색 */
	--qb-h:96px;
	--qb-rad:0px;     /* 바 둥글기 */
	--qb-brad:0px;    /* 따라다니는 덩어리 둥글기 */
	position:relative;z-index:2;       /* 모듈 제목 여백을 음수로 줘서 배너에 걸칠 때 위에 그려지게 */
}

/* 팔레트 고정 — 바 전체(div) 또는 칸 하나(li) */
.m9-grid-block .ow-qb-c0,.m9-grid-block.ow-qb-c0{--qb-pt:#33383d;--qb-on:#fff}
.m9-grid-block .ow-qb-c1,.m9-grid-block.ow-qb-c1{--qb-pt:#3a5fd9;--qb-on:#fff}
.m9-grid-block .ow-qb-c2,.m9-grid-block.ow-qb-c2{--qb-pt:#0d9488;--qb-on:#fff}
.m9-grid-block .ow-qb-c3,.m9-grid-block.ow-qb-c3{--qb-pt:#e8632a;--qb-on:#fff}
.m9-grid-block .ow-qb-c4,.m9-grid-block.ow-qb-c4{--qb-pt:#7c3aed;--qb-on:#fff}
.m9-grid-block .ow-qb-c5,.m9-grid-block.ow-qb-c5{--qb-pt:#db2777;--qb-on:#fff}
.m9-grid-block .ow-qb-c6,.m9-grid-block.ow-qb-c6{--qb-pt:#b48306;--qb-on:#fff}
.m9-grid-block .ow-qb-c7,.m9-grid-block.ow-qb-c7{--qb-pt:#3f9142;--qb-on:#fff}
.m9-grid-block .ow-qb-c8,.m9-grid-block.ow-qb-c8{--qb-pt:#1c7fb8;--qb-on:#fff}

/* 높이 */
.m9-grid-block.ow-qb-h0{--qb-h:0px}.m9-grid-block.ow-qb-h1{--qb-h:80px}.m9-grid-block.ow-qb-h2{--qb-h:96px}
.m9-grid-block.ow-qb-h3{--qb-h:110px}.m9-grid-block.ow-qb-h4{--qb-h:130px}

/* ── 색 구성 — 두 벌의 색을 정한다 ──────────────────────────
   --qb-n-*  보통 칸   /  --qb-c-*  CTA 칸   (bg 바탕 · fg 제목 · sub 안내 · ico 아이콘 · hov 마우스오버 바탕)
   li 에서 계산해야 li 에 붙인 ow-qb-cN(칸 하나만 다른 색)이 반영된다.
   ul 에도 같이 거는 것은 따라다니는 덩어리(ul 의 자식)가 CTA 바탕색을 읽게 하려는 것이다. */
.m9-grid-block.ow-qb .ow-qb-list,.m9-grid-block.ow-qb .ow-qb-list>li{
	--qb-n-bg:var(--qb-pt);--qb-n-fg:var(--qb-on);--qb-n-ico:var(--qb-on);
	--qb-n-sub:color-mix(in srgb,var(--qb-on) 78%,transparent);
	--qb-n-hov:color-mix(in srgb,var(--qb-pt) 90%,#fff);
	--qb-c-bg:color-mix(in srgb,var(--qb-pt) 26%,#10141a);--qb-c-fg:#fff;--qb-c-ico:#fff;
	--qb-c-sub:rgba(255,255,255,.72);
	--qb-c-hov:color-mix(in srgb,var(--qb-pt) 38%,#10141a);
	--qb-line:rgba(255,255,255,.22);
}
.m9-grid-block.ow-qb-light .ow-qb-list,.m9-grid-block.ow-qb-light .ow-qb-list>li{
	--qb-n-bg:#fff;--qb-n-fg:#1a1a1a;--qb-n-ico:var(--qb-pt);--qb-n-sub:#71767c;--qb-n-hov:#f4f5f7;
	--qb-line:#e6e7ea;
}
.m9-grid-block.ow-qb-dark .ow-qb-list,.m9-grid-block.ow-qb-dark .ow-qb-list>li{
	--qb-n-bg:#16325c;--qb-n-fg:#fff;--qb-n-ico:#fff;--qb-n-sub:rgba(255,255,255,.66);--qb-n-hov:#1e3f70;
	--qb-line:rgba(255,255,255,.14);
}
.m9-grid-block.ow-qb-glass .ow-qb-list,.m9-grid-block.ow-qb-glass .ow-qb-list>li{
	--qb-n-bg:rgba(18,22,28,.34);--qb-n-fg:#fff;--qb-n-ico:#fff;--qb-n-sub:rgba(255,255,255,.74);--qb-n-hov:rgba(18,22,28,.52);
	--qb-line:rgba(255,255,255,.16);
}
/* light · dark 의 CTA = 테마색 */
.m9-grid-block.ow-qb-light .ow-qb-list,.m9-grid-block.ow-qb-light .ow-qb-list>li,
.m9-grid-block.ow-qb-dark .ow-qb-list,.m9-grid-block.ow-qb-dark .ow-qb-list>li{
	--qb-c-bg:var(--qb-pt);--qb-c-fg:var(--qb-on);--qb-c-ico:var(--qb-on);
	--qb-c-sub:color-mix(in srgb,var(--qb-on) 78%,transparent);
	--qb-c-hov:color-mix(in srgb,var(--qb-pt) 88%,#000);
}
.m9-grid-block.ow-qb-glass .ow-qb-list,.m9-grid-block.ow-qb-glass .ow-qb-list>li{
	--qb-c-bg:color-mix(in srgb,var(--qb-pt) 72%,transparent);--qb-c-fg:#fff;--qb-c-ico:#fff;
	--qb-c-sub:rgba(255,255,255,.8);
	--qb-c-hov:color-mix(in srgb,var(--qb-pt) 88%,transparent);
}
/* color-mix 를 모르는 브라우저 — 짙은 칸·안내 글자만 고정색으로 */
@supports not (color:color-mix(in srgb,red,blue)){
	.m9-grid-block.ow-qb .ow-qb-list,.m9-grid-block.ow-qb .ow-qb-list>li{
		--qb-n-sub:rgba(255,255,255,.78);--qb-n-hov:var(--qb-pt);--qb-c-bg:#141a1f;--qb-c-hov:#1f262d}
	.m9-grid-block.ow-qb-light .ow-qb-list,.m9-grid-block.ow-qb-light .ow-qb-list>li{--qb-n-sub:#71767c;--qb-n-hov:#f4f5f7}
	.m9-grid-block.ow-qb-light .ow-qb-list,.m9-grid-block.ow-qb-light .ow-qb-list>li,
	.m9-grid-block.ow-qb-dark .ow-qb-list,.m9-grid-block.ow-qb-dark .ow-qb-list>li,
	.m9-grid-block.ow-qb-glass .ow-qb-list,.m9-grid-block.ow-qb-glass .ow-qb-list>li{
		--qb-c-bg:var(--qb-pt);--qb-c-hov:var(--qb-pt);--qb-c-sub:rgba(255,255,255,.8)}
}

/* ── 칸마다 어느 벌을 쓰나 ────────────────────────────────── */
.m9-grid-block.ow-qb .ow-qb-list>li{
	--qb-bg:var(--qb-n-bg);--qb-fg:var(--qb-n-fg);--qb-ico:var(--qb-n-ico);--qb-sub:var(--qb-n-sub);--qb-hov:var(--qb-n-hov);
}
/* CTA 모양 — is-cta 칸 / (hover) 마우스를 올린 칸 / (follow 인데 스크립트가 없을 때) 마우스를 올린 칸 */
.m9-grid-block.ow-qb .ow-qb-list>li.is-cta,
.m9-grid-block.ow-qb-hover .ow-qb-list>li:hover,
.m9-grid-block.ow-qb-hover .ow-qb-list>li:focus-within,
.m9-grid-block.ow-qb-follow:not(.is-fx) .ow-qb-list>li:hover,
.m9-grid-block.ow-qb-follow:not(.is-fx) .ow-qb-list>li:focus-within{
	--qb-bg:var(--qb-c-bg);--qb-fg:var(--qb-c-fg);--qb-ico:var(--qb-c-ico);--qb-sub:var(--qb-c-sub);--qb-hov:var(--qb-c-hov);
}
/* ★ 따라다님이 켜지면(is-fx) CTA 바탕은 덩어리가 맡는다. 칸 바탕은 모두 보통 색,
     글자색만 덩어리가 있는 칸(스크립트가 붙이는 li.is-hot)을 CTA 색으로.
     :hover 로 두면 덩어리와 글자색이 어긋나는 순간이 생긴다(9-2 와 같은 이유). */
.m9-grid-block.ow-qb-follow.is-fx .ow-qb-list>li.is-cta{
	--qb-bg:var(--qb-n-bg);--qb-fg:var(--qb-n-fg);--qb-ico:var(--qb-n-ico);--qb-sub:var(--qb-n-sub);--qb-hov:var(--qb-n-hov);
}
.m9-grid-block.ow-qb-follow.is-fx .ow-qb-list>li.is-hot{
	--qb-fg:var(--qb-c-fg);--qb-ico:var(--qb-c-ico);--qb-sub:var(--qb-c-sub);
}
.m9-grid-block.ow-qb-follow.is-fx .ow-qb-item,
.m9-grid-block.ow-qb-follow.is-fx .ow-qb-item:hover{background-color:var(--qb-n-bg)}

/* ── 목록 — PC 는 한 줄 균등 분할 ────────────────────────────
   구분선은 li 의 왼쪽·위쪽 1px 그림자로 긋고 ul 의 overflow:hidden 으로 바깥쪽 선을 잘라 낸다.
   → 한 줄이든 2열·1열로 줄바꿈되든 칸 "사이"에만 선이 남는다.
   ★ a·li 에 position / filter / opacity 를 주지 말 것 — 쌓임 순서가 올라가 옆 칸의 구분선을 덮고,
     따라다니는 덩어리의 위치 기준(ul)도 바뀐다. */
.m9-grid-block.ow-qb .ow-qb-list{
	position:relative;display:flex;align-items:stretch;
	list-style:none;margin:0;padding:0;
	overflow:hidden;border-radius:var(--qb-rad);
}
.m9-grid-block.ow-qb .ow-qb-list:after{display:none}   /* 몽9 목록 clearfix 가 flex 에서 빈 칸이 되지 않게 */
.m9-grid-block.ow-qb .ow-qb-list>li{
	flex:1 1 0;min-width:0;
	box-shadow:-1px 0 0 var(--qb-line),0 -1px 0 var(--qb-line);
}
.m9-grid-block.ow-qb-noline .ow-qb-list>li{box-shadow:none}

/* 칸 */
.m9-grid-block.ow-qb .ow-qb-item{
	display:flex;align-items:center;gap:14px;
	height:100%;min-height:var(--qb-h);padding:18px 24px;box-sizing:border-box;
	background-color:var(--qb-bg);color:var(--qb-fg);
	text-decoration:none;word-break:keep-all;letter-spacing:-.02em;
	-webkit-tap-highlight-color:transparent;
	transition:background-color .25s ease,color .25s ease;
}
.m9-grid-block.ow-qb .ow-qb-item:hover{background-color:var(--qb-hov)}
.m9-grid-block.ow-qb .ow-qb-item:focus{outline:none}
.m9-grid-block.ow-qb .ow-qb-item:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
.m9-grid-block.ow-qb-glass .ow-qb-item{-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}

/* 아이콘 — 특이도 (0,2,0) 유지. 10절의 ow-t1~t8 이 뒤에서 이겨야 한다 */
.ow-qb .ow-qb-ico{color:var(--qb-ico)}
.m9-grid-block.ow-qb .ow-qb-ico{
	flex:0 0 auto;display:inline-block;line-height:1;
	transition:color .25s ease,transform .35s cubic-bezier(.3,.7,.2,1.3);
}
.m9-grid-block.ow-qb .ow-qb-item:hover .ow-qb-ico,
.m9-grid-block.ow-qb .ow-qb-item:focus-visible .ow-qb-ico{transform:scale(1.15)}

.m9-grid-block.ow-qb .ow-qb-txt{display:block;min-width:0}
.m9-grid-block.ow-qb .ow-qb-tit{display:block;font-weight:700;line-height:1.35;color:var(--qb-fg);transition:color .25s ease}
.m9-grid-block.ow-qb .ow-qb-sub{display:block;margin-top:.3em;line-height:1.4;color:var(--qb-sub);font-variant-numeric:tabular-nums;transition:color .25s ease}

.m9-grid-block.ow-qb .ow-qb-arrow{
	flex:0 0 auto;margin-left:auto;display:inline-block;line-height:1;color:var(--qb-fg);
	font-size:1.25em;transition:color .25s ease,transform .25s ease;
}
.m9-grid-block.ow-qb .ow-qb-item:hover .ow-qb-arrow{transform:translateX(4px)}

/* ── 따라다니는 덩어리 (ow-qb-follow) ─────────────────────────
   <i class="ow-qb-blob"> 은 mong9-onweb-fx.js 가 ul 끝에 붙인다(저장되는 본문에는 없다).
   칸 바탕 위, 글자 아래에 깔린다 — 그래서 글자(아이콘·글·화살표)만 z-index 로 올린다. */
.m9-grid-block.ow-qb-follow .ow-qb-blob{
	position:absolute;z-index:1;left:0;top:0;width:0;height:0;margin:0;float:none;
	opacity:0;pointer-events:none;border-radius:var(--qb-brad);background-color:var(--qb-c-bg);
	transition:left .45s cubic-bezier(.3,.8,.2,1),top .45s cubic-bezier(.3,.8,.2,1),
	           width .45s cubic-bezier(.3,.8,.2,1),height .45s cubic-bezier(.3,.8,.2,1),
	           background-color .3s ease,opacity .25s ease;
}
.m9-grid-block.ow-qb-follow.is-fx .ow-qb-ico,
.m9-grid-block.ow-qb-follow.is-fx .ow-qb-txt,
.m9-grid-block.ow-qb-follow.is-fx .ow-qb-arrow{position:relative;z-index:2}
.m9-grid-block.ow-qb-follow.is-fx .ow-qb-list>li.is-hot .ow-qb-tit,
.m9-grid-block.ow-qb-follow.is-fx .ow-qb-list>li.is-hot .ow-qb-sub,
.m9-grid-block.ow-qb-follow.is-fx .ow-qb-list>li.is-hot .ow-qb-arrow{transition-delay:.1s}

/* ── 모양 ──────────────────────────────────────────────────── */
.m9-grid-block.ow-qb-round{--qb-rad:14px}
.m9-grid-block.ow-qb-round:not(.ow-qb-glass) .ow-qb-list{box-shadow:0 22px 50px -18px rgba(15,23,35,.42)}

.m9-grid-block.ow-qb-pill{--qb-brad:13px}
.m9-grid-block.ow-qb-pill .ow-qb-list{overflow:visible;border-radius:0;gap:12px}
.m9-grid-block.ow-qb-pill .ow-qb-list>li{box-shadow:none}
.m9-grid-block.ow-qb-pill .ow-qb-item{border-radius:13px}
.m9-grid-block.ow-qb-pill:not(.ow-qb-glass) .ow-qb-item{box-shadow:0 14px 34px -16px rgba(15,23,35,.40)}

/* 모듈 여백·전폭 — 9-3 끝의 .onweb_div_1200 :has() 규칙이 ow-qb 도 함께 맡는다 */

@media screen and (max-width:1024px){
	.m9-grid-block.ow-qb .ow-qb-list[class*="m-m9-float-"]{display:block}
	.m9-grid-block.ow-qb .ow-qb-list[class*="m-m9-float-"]:after{display:block}
	.m9-grid-block.ow-qb .ow-qb-item{min-height:calc(var(--qb-h) * .85);padding:16px 20px}
	.m9-grid-block.ow-qb-pill .ow-qb-list[class*="m-m9-float-"]>li{padding:5px;box-sizing:border-box}
}
@media screen and (max-width:500px){
	.m9-grid-block.ow-qb .ow-qb-list[class*="e-m9-float-"]{display:block}
	.m9-grid-block.ow-qb .ow-qb-list[class*="e-m9-float-"]:after{display:block}
	.m9-grid-block.ow-qb .ow-qb-item{min-height:calc(var(--qb-h) * .75);padding:14px 18px;gap:12px}
	.m9-grid-block.ow-qb-pill .ow-qb-list[class*="e-m9-float-"]>li{padding:4px;box-sizing:border-box}
}
@media (prefers-reduced-motion:reduce){
	.m9-grid-block.ow-qb .ow-qb-item,.m9-grid-block.ow-qb .ow-qb-ico,.m9-grid-block.ow-qb .ow-qb-arrow,
	.m9-grid-block.ow-qb .ow-qb-blob{transition:none}
	.m9-grid-block.ow-qb .ow-qb-item:hover .ow-qb-ico,.m9-grid-block.ow-qb .ow-qb-item:hover .ow-qb-arrow{transform:none}
}

/* 몽9 편집창 미리보기 — 9-3 끝의 설명과 같다(위 @media 두 덩어리와 내용을 맞출 것) */
html.ow-m9-m .m9-grid-block.ow-qb .ow-qb-list[class*="m-m9-float-"]{display:block}
html.ow-m9-m .m9-grid-block.ow-qb .ow-qb-list[class*="m-m9-float-"]:after{display:block}
html.ow-m9-m .m9-grid-block.ow-qb .ow-qb-item{min-height:calc(var(--qb-h) * .85);padding:16px 20px}
html.ow-m9-m .m9-grid-block.ow-qb-pill .ow-qb-list[class*="m-m9-float-"]>li{padding:5px;box-sizing:border-box}
html.ow-m9-e .m9-grid-block.ow-qb .ow-qb-list[class*="e-m9-float-"]{display:block}
html.ow-m9-e .m9-grid-block.ow-qb .ow-qb-list[class*="e-m9-float-"]:after{display:block}
html.ow-m9-e .m9-grid-block.ow-qb .ow-qb-item{min-height:calc(var(--qb-h) * .75);padding:14px 18px;gap:12px}
html.ow-m9-e .m9-grid-block.ow-qb-pill .ow-qb-list[class*="e-m9-float-"]>li{padding:4px;box-sizing:border-box}


/* =====================================================================
   9-5. 안내 타일 (ow-tile)  — 메인 우측 "면회안내 / 입·퇴원절차" 같은 카드   [2026-09-28 ONWEB]
   ---------------------------------------------------------------------
   <div class="m9-grid-block ow-tile">
    <div class="m9-grid-1"><div class="m9-column-1 _not-copy">
     <ul class="m9-float-2 m9-spacing-1 m-m9-float-2 e-m9-float-2 ow-tile-list">
      <li><a href="#" class="ow-tile-item">
        <span class="ow-tile-tit m9-f-xlarge e-m9-f-large">제목</span>
        <span class="ow-tile-sub m9-f-size e-m9-f-small">설명</span>
        <span class="ow-tile-go"><i class="bi bi-chevron-right"><i>&nbsp;</i></i></span>
        <span class="ow-tile-art"><i class="bi bi-alarm m9-f-big e-m9-f-xxxlarge ow-tile-ico"><i>&nbsp;</i></i></span>
      </a></li>
   ※ <a> 안에는 span 만 넣는다(HTMLPurifier).

   [열 수 — ul]   m9-float-N PC | m-m9-float-N 태블릿(1024 이하) | e-m9-float-N 모바일(500 이하)   N = 1~4
   [모양 — li]    (기본) 정사각형 1칸 | ow-tile-wide 직사각형 2칸 폭
   [비율 — 바깥 div]  (기본) 1:1 | ow-tile-r43 4:3 | ow-tile-r32 3:2      (PC 에서만. 1360 이하는 최소높이)
   [색 — 바깥 div]
       (기본)          카드 순서대로 8색 자동 — 색상만 다르고 채도·명도는 한 톤
       ow-tile-point   모든 카드를 테마 강조컬러로
       ow-tile-tone-soft / ow-tile-tone-deep   8색의 톤 전체를 한꺼번에 옅게/짙게
   [색 — li]
       ow-tile-c1~c8   그 카드만 특정 색 (1 블루 2 그린 3 퍼플 4 오렌지 5 스카이 6 핑크 7 앰버 8 틸)
       ow-tile-cp      그 카드만 테마 강조컬러
   [지정 — li]    is-on  처음부터 채워진 상태로 보이는 카드
   ===================================================================== */
.m9-grid-block.ow-tile{
	--tile-s:74%;  --tile-l:55%;          /* 진한 면의 톤 (8색 공통) */
	--tile-ss:78%; --tile-sl:93%;         /* 연한 면의 톤 (8색 공통) */
	--tile-rad:22px;
	--tile-gap:16px;
	--tile-ar:1 / 1;
	--tile-minh:200px;                    /* 1360 이하 최소 높이 */
}
.m9-grid-block.ow-tile-r43{--tile-ar:4 / 3}
.m9-grid-block.ow-tile-r32{--tile-ar:3 / 2}
.m9-grid-block.ow-tile-tone-soft{--tile-s:62%;--tile-l:62%;--tile-ss:70%;--tile-sl:95%}
.m9-grid-block.ow-tile-tone-deep{--tile-s:70%;--tile-l:44%;--tile-ss:60%;--tile-sl:91%}

/* 목록 — 몽9 float 목록을 격자로 바꾼다(에디터는 여전히 목록으로 인식한다) */
.m9-grid-block.ow-tile .ow-tile-list{
	--tile-cols:2;
	display:grid;grid-template-columns:repeat(var(--tile-cols),minmax(0,1fr));gap:var(--tile-gap);
	margin:0;padding:0;list-style:none;
}
.m9-grid-block.ow-tile .ow-tile-list:before,
.m9-grid-block.ow-tile .ow-tile-list:after{display:none}   /* clearfix 가 빈 격자칸이 되지 않게 */
.m9-grid-block.ow-tile .ow-tile-list.m9-float-1{--tile-cols:1}
.m9-grid-block.ow-tile .ow-tile-list.m9-float-2{--tile-cols:2}
.m9-grid-block.ow-tile .ow-tile-list.m9-float-3{--tile-cols:3}
.m9-grid-block.ow-tile .ow-tile-list.m9-float-4{--tile-cols:4}
.m9-grid-block.ow-tile .ow-tile-list>li{float:none;width:auto;margin:0;padding:0;clear:none;min-width:0}
.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-wide{grid-column:span 2}

/* 카드 색 — li 에서 계산해야 카드별 색 지정이 먹는다 */
.m9-grid-block.ow-tile .ow-tile-list>li{
	--tile-h:222;
	--tile-pt:hsl(var(--tile-h),var(--tile-s),var(--tile-l));
	--tile-soft:hsl(var(--tile-h),var(--tile-ss),var(--tile-sl));
	--tile-on:#fff;
}
.m9-grid-block.ow-tile .ow-tile-list>li:nth-child(8n+2){--tile-h:156}
.m9-grid-block.ow-tile .ow-tile-list>li:nth-child(8n+3){--tile-h:262}
.m9-grid-block.ow-tile .ow-tile-list>li:nth-child(8n+4){--tile-h:22}
.m9-grid-block.ow-tile .ow-tile-list>li:nth-child(8n+5){--tile-h:196}
.m9-grid-block.ow-tile .ow-tile-list>li:nth-child(8n+6){--tile-h:336}
.m9-grid-block.ow-tile .ow-tile-list>li:nth-child(8n+7){--tile-h:40}
.m9-grid-block.ow-tile .ow-tile-list>li:nth-child(8n+8){--tile-h:176}
/* 카드별 지정 (nth-child 보다 특이도가 높다) */
.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-c1{--tile-h:222}
.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-c2{--tile-h:156}
.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-c3{--tile-h:262}
.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-c4{--tile-h:22}
.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-c5{--tile-h:196}
.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-c6{--tile-h:336}
.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-c7{--tile-h:40}
.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-c8{--tile-h:176}
/* 테마 강조컬러 — 블록 전체 / 카드 하나 */
.m9-grid-block.ow-tile.ow-tile-point .ow-tile-list>li,
.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-cp{
	--tile-pt:var(--rb-point,#3a5fd9);
	--tile-soft:var(--rb-point-12,rgba(58,95,217,.12));
	--tile-on:var(--rb-point-on,#fff);
}

/* 카드 */
.m9-grid-block.ow-tile .ow-tile-item{
	position:relative;display:block;overflow:hidden;box-sizing:border-box;
	aspect-ratio:var(--tile-ar);
	padding:1.9em 1.8em 1.6em;border-radius:var(--tile-rad);
	background-color:var(--tile-soft);color:#16181d;text-decoration:none;word-break:keep-all;
	-webkit-tap-highlight-color:transparent;
	transition:background-color .35s ease,color .35s ease,transform .35s cubic-bezier(.3,.7,.2,1);
}
.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-wide>.ow-tile-item{aspect-ratio:auto;height:100%;min-height:var(--tile-minh)}
/* 가로로 긴 카드 — 아이콘 무대를 카드 '높이' 기준으로 [2026-10-02]
   폭 44% 로 두면 무대가 카드보다 커져 아이콘이 제목·설명 줄 밑으로 숨는다(→ 몽9 아이콘 설정 버튼도 안 뜬다).
   1360 이하 규칙과 같은 크기. 설명은 아이콘 자리를 비워 둔다. */
.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-wide .ow-tile-art{width:auto;height:50%;max-height:150px;right:5%;bottom:7%}
.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-wide .ow-tile-sub{max-width:72%}
@media screen and (max-width:500px){
	.m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-wide .ow-tile-art{height:44%}
}
html.ow-m9-e .m9-grid-block.ow-tile .ow-tile-list>li.ow-tile-wide .ow-tile-art{height:44%}
.m9-grid-block.ow-tile .ow-tile-item:focus{outline:none}
.m9-grid-block.ow-tile .ow-tile-item:focus-visible{box-shadow:0 0 0 3px var(--tile-pt)}
.m9-grid-block.ow-tile .ow-tile-tit{position:relative;z-index:2;display:block;font-weight:800;line-height:1.3;letter-spacing:-.02em}
.m9-grid-block.ow-tile .ow-tile-sub{position:relative;z-index:2;display:block;margin-top:.8em;line-height:1.55;color:#4a4f58;transition:color .35s ease}

/* 화살표 원 — 좌하단 */
.m9-grid-block.ow-tile .ow-tile-go{
	position:absolute;z-index:2;left:1.8em;bottom:1.6em;
	display:flex;align-items:center;justify-content:center;width:2.6em;height:2.6em;border-radius:50%;
	background-color:#fff;color:#16181d;font-size:15px;
	transition:background-color .35s ease,color .35s ease;
}
.m9-grid-block.ow-tile .ow-tile-go .bi{line-height:1;font-size:1em}

/* 아이콘 무대 — 우하단, 카드 안쪽 */
.m9-grid-block.ow-tile .ow-tile-art{
	position:absolute;z-index:1;right:5%;bottom:5%;width:44%;aspect-ratio:1 / 1;
	display:flex;align-items:center;justify-content:center;
	/* pointer-events:none 두지 말 것 — 몽9 아이콘 설정 버튼은 .bi 에 mouseover 가 와야 뜬다 [2026-10-02] */
}
/* 뒤의 빛무리 — 평소엔 동그란 광채, 마우스를 올리면 물결 모양으로 번진다 */
.m9-grid-block.ow-tile .ow-tile-art:before,
.m9-grid-block.ow-tile .ow-tile-art:after{
	content:"";position:absolute;left:50%;top:50%;width:88%;height:88%;margin:-44% 0 0 -44%;
	border-radius:50%;background-color:#fff;opacity:.75;
	transition:border-radius .6s ease,opacity .45s ease,transform .6s cubic-bezier(.3,.7,.2,1);
}
.m9-grid-block.ow-tile .ow-tile-art:after{width:62%;height:62%;margin:-31% 0 0 -31%;opacity:.9}
.m9-grid-block .ow-tile-ico{
	position:relative;z-index:1;display:block;line-height:1;color:var(--tile-pt);
	filter:drop-shadow(0 10px 14px rgba(20,30,60,.18));
	transition:color .35s ease,transform .5s cubic-bezier(.3,.7,.2,1),filter .35s ease;
}

/* ── 켜진 상태 : 마우스 · 키보드 초점 · 지정(is-on) ─────────────── */
.m9-grid-block.ow-tile .ow-tile-list>li:hover>.ow-tile-item,
.m9-grid-block.ow-tile .ow-tile-list>li>.ow-tile-item:focus-visible,
.m9-grid-block.ow-tile .ow-tile-list:not(:hover)>li.is-on>.ow-tile-item{background-color:var(--tile-pt);color:var(--tile-on);transform:translateY(-4px)}
.m9-grid-block.ow-tile .ow-tile-list>li:hover .ow-tile-sub,
.m9-grid-block.ow-tile .ow-tile-list>li>.ow-tile-item:focus-visible .ow-tile-sub,
.m9-grid-block.ow-tile .ow-tile-list:not(:hover)>li.is-on .ow-tile-sub{color:var(--tile-on);opacity:.9}
.m9-grid-block.ow-tile .ow-tile-list>li:hover .ow-tile-go,
.m9-grid-block.ow-tile .ow-tile-list>li>.ow-tile-item:focus-visible .ow-tile-go,
.m9-grid-block.ow-tile .ow-tile-list:not(:hover)>li.is-on .ow-tile-go{background-color:rgba(0,0,0,.2);color:#fff}
.m9-grid-block.ow-tile .ow-tile-list>li:hover .ow-tile-art:before,
.m9-grid-block.ow-tile .ow-tile-list>li>.ow-tile-item:focus-visible .ow-tile-art:before,
.m9-grid-block.ow-tile .ow-tile-list:not(:hover)>li.is-on .ow-tile-art:before{
	border-radius:42% 58% 63% 37% / 44% 40% 60% 56%;opacity:.16;transform:scale(1.28) rotate(18deg)}
.m9-grid-block.ow-tile .ow-tile-list>li:hover .ow-tile-art:after,
.m9-grid-block.ow-tile .ow-tile-list>li>.ow-tile-item:focus-visible .ow-tile-art:after,
.m9-grid-block.ow-tile .ow-tile-list:not(:hover)>li.is-on .ow-tile-art:after{
	border-radius:58% 42% 38% 62% / 52% 60% 40% 48%;opacity:.22;transform:scale(1.12) rotate(-12deg)}
.m9-grid-block.ow-tile .ow-tile-list>li:hover .ow-tile-ico,
.m9-grid-block.ow-tile .ow-tile-list>li>.ow-tile-item:focus-visible .ow-tile-ico,
.m9-grid-block.ow-tile .ow-tile-list:not(:hover)>li.is-on .ow-tile-ico{
	color:#fff;transform:translateY(-6px) scale(1.1) rotate(-6deg);filter:drop-shadow(0 14px 16px rgba(0,0,0,.22))}

/* 반응형 — 1360 이하(리빌더가 모듈을 100% 로 펼치는 구간)는 비율 대신 최소 높이 */
@media screen and (max-width:1360px){
	.m9-grid-block.ow-tile .ow-tile-item{aspect-ratio:auto;min-height:var(--tile-minh)}
	.m9-grid-block.ow-tile{--tile-minh:220px}
	.m9-grid-block.ow-tile .ow-tile-art{width:auto;height:50%;max-height:150px;right:5%;bottom:7%}
	.m9-grid-block.ow-tile .ow-tile-sub{max-width:72%}
}
@media screen and (max-width:1024px){
	.m9-grid-block.ow-tile .ow-tile-list.m-m9-float-1{--tile-cols:1}
	.m9-grid-block.ow-tile .ow-tile-list.m-m9-float-2{--tile-cols:2}
	.m9-grid-block.ow-tile .ow-tile-list.m-m9-float-3{--tile-cols:3}
	.m9-grid-block.ow-tile .ow-tile-list.m-m9-float-4{--tile-cols:4}
}
@media screen and (max-width:500px){
	.m9-grid-block.ow-tile{--tile-gap:10px;--tile-rad:18px;--tile-minh:190px}
	.m9-grid-block.ow-tile .ow-tile-art{height:44%}
	.m9-grid-block.ow-tile .ow-tile-sub{max-width:none}
	.m9-grid-block.ow-tile .ow-tile-list.e-m9-float-1{--tile-cols:1}
	.m9-grid-block.ow-tile .ow-tile-list.e-m9-float-2{--tile-cols:2}
	.m9-grid-block.ow-tile .ow-tile-list.e-m9-float-3{--tile-cols:3}
	.m9-grid-block.ow-tile .ow-tile-item{padding:1.3em 1.2em 1.2em}
	.m9-grid-block.ow-tile .ow-tile-go{left:1.2em;bottom:1.2em;font-size:13px}
	.m9-grid-block.ow-tile .ow-tile-sub br{display:none}
}
@media (prefers-reduced-motion:reduce){
	.m9-grid-block.ow-tile .ow-tile-item,
	.m9-grid-block.ow-tile .ow-tile-art:before,
	.m9-grid-block.ow-tile .ow-tile-art:after,
	.m9-grid-block .ow-tile-ico{transition:none}
}

/* 몽9 편집창 미리보기(태블릿·모바일 버튼) — 9-3 끝의 설명과 같다. 위 @media 와 내용을 맞출 것 */
html.ow-m9-m .m9-grid-block.ow-tile .ow-tile-item,
html.ow-m9-e .m9-grid-block.ow-tile .ow-tile-item{aspect-ratio:auto;min-height:var(--tile-minh)}
html.ow-m9-m .m9-grid-block.ow-tile .ow-tile-art,
html.ow-m9-e .m9-grid-block.ow-tile .ow-tile-art{width:auto;height:50%;max-height:150px;right:5%;bottom:7%}
html.ow-m9-m .m9-grid-block.ow-tile .ow-tile-list.m-m9-float-1{--tile-cols:1}
html.ow-m9-m .m9-grid-block.ow-tile .ow-tile-list.m-m9-float-2{--tile-cols:2}
html.ow-m9-m .m9-grid-block.ow-tile .ow-tile-list.m-m9-float-3{--tile-cols:3}
html.ow-m9-m .m9-grid-block.ow-tile .ow-tile-list.m-m9-float-4{--tile-cols:4}
html.ow-m9-e .m9-grid-block.ow-tile{--tile-gap:10px;--tile-rad:18px;--tile-minh:190px}
html.ow-m9-e .m9-grid-block.ow-tile .ow-tile-list.e-m9-float-1{--tile-cols:1}
html.ow-m9-e .m9-grid-block.ow-tile .ow-tile-list.e-m9-float-2{--tile-cols:2}
html.ow-m9-e .m9-grid-block.ow-tile .ow-tile-list.e-m9-float-3{--tile-cols:3}
html.ow-m9-e .m9-grid-block.ow-tile .ow-tile-item{padding:1.3em 1.2em 1.2em}

/* =====================================================================
   9-6. ow-ibx-circ (9-2 보강) — 아이콘을 연한 원 안에 (메인 우측 하단 바로가기)   [2026-09-28 ONWEB]
   ---------------------------------------------------------------------
   <div class="m9-grid-block ow-ibx ow-ibx-plain ow-ibx-row ow-ibx-circ"> … 나머지는 9-2 와 같다.
   원 크기는 아이콘 글자 크기(m9-f-*)를 따라간다. 마우스를 올리면 원이 강조색으로 채워진다.

   [배경 — 바깥 div 에 하나만]   섹션에 사진·짙은 배경이 깔려 글씨가 안 보일 때
     (없음)          투명 (기본 — 흰 바탕 섹션용)
     ow-ibx-panel    블록 전체를 흰 라운드 패널 하나로 (위 ow-tile 카드와 같은 22px)
     ow-ibx-chip     항목마다 흰 라운드 칸 (칸 사이로 배경이 보인다)
     ow-ibx-ondark   배경은 그대로, 글씨 흰색 · 원 반투명 흰색 (섹션 배경이 늘 어두울 때만)
   ===================================================================== */
.m9-grid-block.ow-ibx-circ .ow-ibx-item{padding:.7em .4em;min-height:0}
.m9-grid-block.ow-ibx-circ .ow-ibx-ico{
	flex:0 0 auto;display:flex;align-items:center;justify-content:center;
	width:2.3em;height:2.3em;border-radius:50%;background-color:var(--ibx-soft);
	transition:background-color .3s ease,color .3s ease,transform .4s cubic-bezier(.3,.7,.2,1);
}
.m9-grid-block.ow-ibx-circ .ow-ibx-ico:before{font-size:.9em}
.m9-grid-block.ow-ibx-circ.ow-ibx-row .ow-ibx-ico{margin-right:.45em}
.m9-grid-block.ow-ibx-circ .ow-ibx-tit{font-weight:600}
.m9-grid-block.ow-ibx-circ .ow-ibx-list>li:hover .ow-ibx-ico,
.m9-grid-block.ow-ibx-circ .ow-ibx-list>li>.ow-ibx-item:focus-visible .ow-ibx-ico{background-color:var(--ibx-pt);color:var(--ibx-on)}
.m9-grid-block.ow-ibx-circ .ow-ibx-list>li:hover .ow-ibx-tit{color:var(--ibx-deep)}
@media screen and (max-width:1024px){
	.m9-grid-block.ow-ibx-circ.ow-ibx-row .ow-ibx-item{padding:.6em .3em}
}

/* 배경 A — 흰 패널 */
.m9-grid-block.ow-ibx-panel{box-sizing:border-box;padding:14px 16px;border-radius:22px;background-color:#fff}

/* 배경 B — 항목마다 흰 칸. 위아래 틈은 li 의 세로 padding 으로(몽9 목록의 가로 간격 규칙은 건드리지 않는다) */
.m9-grid-block.ow-ibx-chip .ow-ibx-list>li{padding-top:5px;padding-bottom:5px}
.m9-grid-block.ow-ibx-chip .ow-ibx-list>li>.ow-ibx-item{background-color:#fff;border-radius:16px;padding:.75em .9em}

/* 배경 C — 어두운 배경 위 밝은 글씨 (특이도 (0,3,0) 이상 — 9-2 의 기본 글자·아이콘색을 이긴다) */
.m9-grid-block.ow-ibx-ondark .ow-ibx-item{color:#fff}
.m9-grid-block.ow-ibx-ondark .ow-ibx-sub{color:rgba(255,255,255,.72)}
.m9-grid-block.ow-ibx-ondark.ow-ibx-circ .ow-ibx-ico{background-color:rgba(255,255,255,.16);color:#fff}
.m9-grid-block.ow-ibx-ondark.ow-ibx-circ .ow-ibx-list>li:hover .ow-ibx-tit{color:#fff}
.m9-grid-block.ow-ibx-ondark .ow-ibx-tit{text-shadow:0 1px 6px rgba(0,0,0,.35)}

@media screen and (max-width:500px){
	.m9-grid-block.ow-ibx-panel{padding:10px 10px;border-radius:18px}
	.m9-grid-block.ow-ibx-chip .ow-ibx-list>li>.ow-ibx-item{padding:.6em .6em}
}
/* 몽9 편집창 미리보기(모바일 버튼) — 위 @media 와 내용을 맞출 것 */
html.ow-m9-e .m9-grid-block.ow-ibx-panel{padding:10px 10px;border-radius:18px}
html.ow-m9-e .m9-grid-block.ow-ibx-chip .ow-ibx-list>li>.ow-ibx-item{padding:.6em .6em}

/* =====================================================================
   9-7. 연락처 패널 (ow-ct)  — 지도 위젯(gt_map_05) 옆에 붙이는 CONTACT 카드   [2026-09-28 ONWEB]
   ---------------------------------------------------------------------
   <div class="m9-grid-block ow-ct ow-ct-join ow-ct-line ow-ct-py60">
    <div class="m9-grid-1"><div class="m9-column-1 _not-copy">
     <p class="ow-ct-label">( CONTACT US )</p>
     <p class="ow-ct-tel"><a href="tel:…">02.000.0000</a></p>
     <p class="ow-ct-addr"><span class="ow-ct-addr-t">주소</span><a href="#" class="ow-ct-copy" title="주소 복사"><i class="bi bi-copy"><i>&nbsp;</i></i></a></p>
     <ul class="ow-ct-hours"><li><span class="ow-ct-day">월 ~ 금</span><span class="ow-ct-time">10:00 ~ 18:00</span></li></ul>
     <p class="ow-ct-note">* 일·공휴일 휴진</p>
     <ul class="m9-float-2 m9-spacing-1 m-m9-float-2 e-m9-float-1 ow-ct-btns">
      <li><a href="…" class="ow-ct-btn"><span class="ow-ct-bico ow-ct-kakao"><i class="bi bi-chat-fill"><i>&nbsp;</i></i></span>
          <span class="ow-ct-btxt"><span class="ow-ct-bsub">빠르고 간편하게</span><span class="ow-ct-btit">카카오톡 상담</span></span></a></li>
   ※ <a> 안에는 span 만 넣는다(HTMLPurifier). 주소 복사는 mong9-onweb-fx.js 가 한다(.ow-ct-addr-t 의 글자).

   [배경 — 바깥 div]  (기본) 테마 강조컬러를 아주 옅게 | ow-ct-bg-gray 연회색 | ow-ct-bg-white 흰색
                      ow-ct-bg-point 테마 강조컬러 | ow-ct-bg-dark 짙은 남색   (point · dark 는 글씨가 흰색)
                      직접 지정 : 에디터 블록 배경색(인라인 background-color 가 이긴다).
                                  짙은 색이면 ow-ct-ondark 를 함께 붙여 글씨를 흰색으로
   [높이 맞추기 — 바깥 div]  상하 여백  PC   ow-ct-py0 / 20 / 30 / 40 / 50 / 60 / 70 / 80 / 100 / 120   (기본 56px)
                             모바일(1360 이하) ow-ct-mpy0 / 20 / 30 / 40 / 50 / 60                  (기본 40px)
                      좌우 여백 PC   ow-ct-px40 / ow-ct-px80   (기본 64px, 모바일 36px · 500 이하 24px)
   [이어 붙이기 — 바깥 div]  ow-ct-join   지도가 왼쪽 (PC 오른쪽 모서리만 둥글게 / 1360 이하 아래쪽만)
                             ow-ct-join-r 지도가 오른쪽 (PC 왼쪽만 / 1360 이하 위쪽만)
                             (없음) 네 모서리 모두 — 따로 쓸 때
   [테두리]   ow-ct-line  1px (지도 위젯의 '테두리'와 같이 켠다)
   [모서리]   ow-ct-rad0 / rad10 / rad16 / rad30   (기본 20px — 지도 위젯 '모서리 크기'와 맞춘다)
   [글자·아이콘 크기]  몽9 글자 크기 도구(m9-f-* / m-m9-f-* / e-m9-f-*)로 요소마다 준다. 이 절은 크기를 정하지 않는다
   [버튼 열 수 — ul]  m9-float-N PC | m-m9-float-N 1024 이하 | e-m9-float-N 500 이하   (1~2)
   ===================================================================== */
.m9-grid-block.ow-ct{
	--ct-pt:var(--rb-point,#6d5aa6);
	--ct-bg:#f7f4ef;
	--ct-py:56px; --ct-pym:40px;
	--ct-px:64px; --ct-pxm:36px;
	--ct-rad:20px;
	--ct-line:#e7e3dd;
	--ct-fg:#151515; --ct-sub:#333; --ct-mute:#9a9a9a;
	--ct-card:#fff; --ct-cardline:#e7e3dd;
	--ct-label:var(--ct-pt);
	--ct-cols:2;
	background-color:var(--ct-bg);
	padding:var(--ct-py) var(--ct-px);
	border-radius:var(--ct-rad);
	color:var(--ct-sub);
}
@supports (background-color:color-mix(in srgb,red 10%,white)){
	.m9-grid-block.ow-ct{--ct-bg:color-mix(in srgb,var(--ct-pt) 6%,#fbfaf8)}
}
.m9-grid-block.ow-ct-bg-gray{--ct-bg:#f6f5f2}
.m9-grid-block.ow-ct-bg-white{--ct-bg:#fff}
.m9-grid-block.ow-ct-bg-point{--ct-bg:var(--ct-pt)}
.m9-grid-block.ow-ct-bg-dark{--ct-bg:#1d2433}
.m9-grid-block.ow-ct-bg-point,
.m9-grid-block.ow-ct-bg-dark,
.m9-grid-block.ow-ct-ondark{
	--ct-fg:#fff; --ct-sub:rgba(255,255,255,.85); --ct-mute:rgba(255,255,255,.6);
	--ct-card:rgba(255,255,255,.08); --ct-cardline:rgba(255,255,255,.24);
	--ct-label:rgba(255,255,255,.78);
}

/* 여백 */
.m9-grid-block.ow-ct-py0{--ct-py:0}   .m9-grid-block.ow-ct-py20{--ct-py:20px} .m9-grid-block.ow-ct-py30{--ct-py:30px}
.m9-grid-block.ow-ct-py40{--ct-py:40px} .m9-grid-block.ow-ct-py50{--ct-py:50px} .m9-grid-block.ow-ct-py60{--ct-py:60px}
.m9-grid-block.ow-ct-py70{--ct-py:70px} .m9-grid-block.ow-ct-py80{--ct-py:80px} .m9-grid-block.ow-ct-py100{--ct-py:100px}
.m9-grid-block.ow-ct-py120{--ct-py:120px}
.m9-grid-block.ow-ct-mpy0{--ct-pym:0}   .m9-grid-block.ow-ct-mpy20{--ct-pym:20px} .m9-grid-block.ow-ct-mpy30{--ct-pym:30px}
.m9-grid-block.ow-ct-mpy40{--ct-pym:40px} .m9-grid-block.ow-ct-mpy50{--ct-pym:50px} .m9-grid-block.ow-ct-mpy60{--ct-pym:60px}
.m9-grid-block.ow-ct-px40{--ct-px:40px} .m9-grid-block.ow-ct-px80{--ct-px:80px}

/* 모서리 · 테두리 · 이어 붙이기 (PC) */
.m9-grid-block.ow-ct-rad0{--ct-rad:0} .m9-grid-block.ow-ct-rad10{--ct-rad:10px}
.m9-grid-block.ow-ct-rad16{--ct-rad:16px} .m9-grid-block.ow-ct-rad30{--ct-rad:30px}
.m9-grid-block.ow-ct.ow-ct-line{border:1px solid var(--ct-line)}
.m9-grid-block.ow-ct.ow-ct-join{border-radius:0 var(--ct-rad) var(--ct-rad) 0}
.m9-grid-block.ow-ct.ow-ct-join-r{border-radius:var(--ct-rad) 0 0 var(--ct-rad)}
.m9-grid-block.ow-ct.ow-ct-line.ow-ct-join{border-left-width:0}
.m9-grid-block.ow-ct.ow-ct-line.ow-ct-join-r{border-right-width:0}

/* 라벨 · 대표번호 · 주소 */
.m9-grid-block.ow-ct .ow-ct-label{color:var(--ct-label);letter-spacing:.08em;line-height:1.4;margin-bottom:14px}
.m9-grid-block.ow-ct .ow-ct-tel{color:var(--ct-fg);font-family:'font-B','font-R',sans-serif;font-weight:700;line-height:1.2;letter-spacing:-.01em;margin-bottom:26px}
.m9-grid-block.ow-ct .ow-ct-tel a{color:inherit;text-decoration:none}
.m9-grid-block.ow-ct .ow-ct-addr{color:var(--ct-fg);line-height:1.55;margin-bottom:26px}
.m9-grid-block.ow-ct .ow-ct-copy{
	position:relative;display:inline-block;margin-left:.45em;padding:0 .1em;
	color:var(--ct-sub);text-decoration:none;cursor:pointer;vertical-align:-.05em;
	-webkit-tap-highlight-color:transparent;
}
.m9-grid-block.ow-ct .ow-ct-copy:hover{color:var(--ct-pt)}
.m9-grid-block.ow-ct-ondark .ow-ct-copy:hover,
.m9-grid-block.ow-ct-bg-point .ow-ct-copy:hover,
.m9-grid-block.ow-ct-bg-dark .ow-ct-copy:hover{color:#fff}
.m9-grid-block.ow-ct .ow-ct-copy:after{
	content:'복사했습니다';position:absolute;left:50%;bottom:calc(100% + 8px);margin-left:-3.2em;
	width:6.4em;padding:5px 0;border-radius:6px;background:#222;color:#fff;
	font-size:12px;line-height:1.2;text-align:center;white-space:nowrap;
	opacity:0;visibility:hidden;transition:opacity .2s;pointer-events:none;
}
.m9-grid-block.ow-ct .ow-ct-copy.is-done:after{opacity:1;visibility:visible}

/* 진료(운영) 시간 — li 를 복사해 줄을 늘린다 */
.m9-grid-block.ow-ct .ow-ct-hours{list-style:none;margin:0;padding:0;color:var(--ct-fg);line-height:1.7}
.m9-grid-block.ow-ct .ow-ct-hours>li{display:flex;align-items:baseline;padding:3px 0}
.m9-grid-block.ow-ct .ow-ct-day{flex:0 0 auto;min-width:4.8em}
.m9-grid-block.ow-ct .ow-ct-time:before{content:'|';color:var(--ct-mute);margin:0 1.6em 0 .6em;font-weight:300}
.m9-grid-block.ow-ct .ow-ct-note{color:var(--ct-mute);line-height:1.5;margin-top:8px}

/* 버튼 — 몽9 float 목록을 격자로(에디터는 목록으로 인식한다) */
.m9-grid-block.ow-ct .ow-ct-btns{
	display:grid;grid-template-columns:repeat(var(--ct-cols),minmax(0,1fr));gap:14px;
	list-style:none;margin:36px 0 0;padding:0;
}
.m9-grid-block.ow-ct .ow-ct-btns:before,
.m9-grid-block.ow-ct .ow-ct-btns:after{display:none}
.m9-grid-block.ow-ct .ow-ct-btns.m9-float-1{--ct-cols:1}
.m9-grid-block.ow-ct .ow-ct-btns.m9-float-2{--ct-cols:2}
.m9-grid-block.ow-ct .ow-ct-btns>li{float:none;width:auto;margin:0;padding:0;min-width:0}
.m9-grid-block.ow-ct .ow-ct-btn{
	display:flex;align-items:center;height:100%;padding:18px 20px;
	background:var(--ct-card);border:1px solid var(--ct-cardline);border-radius:12px;
	color:var(--ct-fg);text-decoration:none;transition:border-color .2s;
}
.m9-grid-block.ow-ct .ow-ct-btn:hover{border-color:var(--ct-pt)}
.m9-grid-block.ow-ct-ondark .ow-ct-btn:hover,
.m9-grid-block.ow-ct-bg-point .ow-ct-btn:hover,
.m9-grid-block.ow-ct-bg-dark .ow-ct-btn:hover{border-color:#fff}
.m9-grid-block.ow-ct .ow-ct-bico{
	flex:0 0 auto;display:flex;align-items:center;justify-content:center;
	width:44px;height:44px;margin-right:14px;border-radius:50%;
	color:var(--ct-pt);line-height:1;
}
.m9-grid-block.ow-ct .ow-ct-bico.ow-ct-kakao{background:#fee500;color:#3a1d1d}
.m9-grid-block.ow-ct-ondark .ow-ct-bico,
.m9-grid-block.ow-ct-bg-point .ow-ct-bico,
.m9-grid-block.ow-ct-bg-dark .ow-ct-bico{color:#fff}
.m9-grid-block.ow-ct .ow-ct-bico.ow-ct-kakao{color:#3a1d1d}
.m9-grid-block.ow-ct .ow-ct-btxt{display:block;min-width:0}
.m9-grid-block.ow-ct .ow-ct-bsub{display:block;color:var(--ct-sub);line-height:1.4}
.m9-grid-block.ow-ct .ow-ct-btit{display:block;color:var(--ct-fg);font-family:'font-B','font-R',sans-serif;font-weight:700;line-height:1.35}

/* 1360 이하 — 리빌더 모듈이 세로로 쌓이는 폭 */
@media all and (max-width:1360px){
	.m9-grid-block.ow-ct{padding:var(--ct-pym) var(--ct-pxm)}
	.m9-grid-block.ow-ct.ow-ct-join{border-radius:0 0 var(--ct-rad) var(--ct-rad)}
	.m9-grid-block.ow-ct.ow-ct-join-r{border-radius:var(--ct-rad) var(--ct-rad) 0 0}
	.m9-grid-block.ow-ct.ow-ct-line.ow-ct-join{border-left-width:1px;border-top-width:0}
	.m9-grid-block.ow-ct.ow-ct-line.ow-ct-join-r{border-right-width:1px;border-bottom-width:0}
}
/* 옆 지도 모듈과 붙이기 — 리빌더 모듈 상자(.content_box)의 padding 20px 과
   내용관리 위젯의 1280 이하 강제 여백(20px !important)을 붙는 쪽만 없앤다.
   지도 쪽은 gt_map_05/style.css 가 같은 방식으로 없앤다.
   :not(#ow_x) 는 id 특이도 — 옛 로더(gt_title_co_id)의 #id !important 여백까지 이긴다. */
@media all and (min-width:1361px){
	.content_box:has(.ow-ct-join){padding-left:0}
	.content_box:has(.ow-ct-join-r){padding-right:0}
}
@media all and (max-width:1360px){
	.content_box:has(.ow-ct-join){padding-top:0 !important}      /* 위에 지도 */
	.content_box:has(.ow-ct-join-r){padding-bottom:0 !important} /* 아래에 지도 */
	.onweb_div_1200:not(#ow_x):has(.ow-ct-join){margin-top:0 !important}
	.onweb_div_1200:not(#ow_x):has(.ow-ct-join-r){margin-bottom:0 !important}
}
@media all and (max-width:1024px){
	.m9-grid-block.ow-ct .ow-ct-btns.m-m9-float-1{--ct-cols:1}
	.m9-grid-block.ow-ct .ow-ct-btns.m-m9-float-2{--ct-cols:2}
}
@media all and (max-width:500px){
	.m9-grid-block.ow-ct{--ct-pxm:24px}
	.m9-grid-block.ow-ct .ow-ct-time:before{margin:0 1em 0 .4em}
	.m9-grid-block.ow-ct .ow-ct-btns{gap:10px;margin-top:28px}
	.m9-grid-block.ow-ct .ow-ct-btns.e-m9-float-1{--ct-cols:1}
	.m9-grid-block.ow-ct .ow-ct-btns.e-m9-float-2{--ct-cols:2}
}
/* 몽9 편집창 미리보기(태블릿·모바일 버튼) — 위 @media 와 내용을 맞출 것 */
html.ow-m9-m .m9-grid-block.ow-ct{padding:var(--ct-pym) var(--ct-pxm)}
html.ow-m9-m .m9-grid-block.ow-ct.ow-ct-join{border-radius:0 0 var(--ct-rad) var(--ct-rad)}
html.ow-m9-m .m9-grid-block.ow-ct.ow-ct-join-r{border-radius:var(--ct-rad) var(--ct-rad) 0 0}
html.ow-m9-m .m9-grid-block.ow-ct.ow-ct-line.ow-ct-join{border-left-width:1px;border-top-width:0}
html.ow-m9-m .m9-grid-block.ow-ct.ow-ct-line.ow-ct-join-r{border-right-width:1px;border-bottom-width:0}
html.ow-m9-m .m9-grid-block.ow-ct .ow-ct-btns.m-m9-float-1{--ct-cols:1}
html.ow-m9-e .m9-grid-block.ow-ct{--ct-pxm:24px}
html.ow-m9-e .m9-grid-block.ow-ct .ow-ct-btns.e-m9-float-1{--ct-cols:1}


/* =====================================================================
   9-2. 겹친 블록 폭 보정  [ONWEB 2026-09-28]
       mong9.css 의 ".m9-grid-block .m9-grid-block>[class*=m9-grid-]{max-width:1400px}" 가
       기본 규칙의 max-width:100% 를 덮어써서, m9-grid-block 안에 또 m9-grid-block 을 넣으면
       안쪽 칸이 1400px 로 고정 → 태블릿·모바일에서 가로로 넘쳤다.
       1400 상한은 그대로 두고 부모 폭도 넘지 않게 한다. (데스크탑 1400 이상에서는 변화 없음)
       [class*] 를 두 번 써서 특이도를 올렸다 — 로드 순서와 상관없이 mong9.css 를 이긴다.
   ===================================================================== */
.m9-grid-block .m9-grid-block>[class*="m9-grid-"][class*="m9-grid-"]{max-width:1400px;max-width:min(1400px,100%)}


/* =====================================================================
   9-8. 좌측 제목 행 (ow-row)  — 왼쪽 큰 제목 / 오른쪽 본문. 본문이 길면 제목이 따라 내려온다
        [ONWEB 2026-09-29]  사용처: 용인수지병원 수술후재활
       · 왼쪽 칸  : m9-column-1 + ow-row-h + ow-stick   (진한 윗선)
       · 오른쪽 칸: m9-column-3 + ow-row-b             (옅은 윗선)
       · ow-stick 은 칸(float) 자체에 건다. 칸의 부모(m9-grid-4)가 오른쪽 본문 높이만큼 길어서
         그 범위 안에서만 따라 내려오고, 행이 끝나면 멈춘다.
       · 몽9 기본 칸 규칙([class*=m9-grid-]>[class*=column-]{position:relative}, 특이도 0,3,0)을
         이겨야 하므로 셀렉터를 길게 썼다. 짧게 줄이면 relative+top:120 이 되어 제목이 아래로 밀린다.
       · position:sticky 는 HTMLPurifier 가 인라인에서 지우므로 반드시 클래스로 준다.
       · 사이트 헤더가 고정형이면 top 값을 헤더 높이 + 여유로 맞춘다.
       · 조상 중 overflow:hidden 이 있으면 sticky 가 동작하지 않는다.
       · 태블릿(1024) 이하에서는 1단으로 접히므로 sticky 를 끄고 오른쪽 윗선을 없앤다.
   ===================================================================== */
.m9-grid-block .ow-row-h{border-top:2px solid #16325c;padding-top:1.2em}
.m9-grid-block .ow-row-b{border-top:1px solid #e3e5ea;padding-top:1.6em;word-break:keep-all}   /* keep-all: 좁은 카드에서 한글 단어 중간 끊김 방지 (인라인은 Purifier 가 지움) [2026-09-29] */
.m9-grid-block .ow-keep{word-break:keep-all}   /* 한글 단어 중간 끊김 방지 유틸 — 카드 등 아무 요소에 붙인다 (인라인 word-break 는 Purifier 가 지움) [2026-09-29] */
/* ow-vc : 배지 + 글 세로 중앙 — 카드(ow-card)에 붙인다. 글이 1줄이든 2줄이든 배지 옆 가운데에 온다 [2026-09-29]
   · flex 는 인라인 style 로 쓰면 Purifier 가 지우므로 클래스로만 쓴다
   · 글 칸의 인라인 padding-top(1.1em)은 이 CSS 가 없을 때의 대비용 → 여기서 !important 로 0 */
.m9-grid-block .ow-vc{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.m9-grid-block .ow-vc>.ow-badge{float:none;-ms-flex-negative:0;flex-shrink:0}
.m9-grid-block .ow-vc>.overflow-hidden{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;padding-top:0!important}
.m9-grid-block [class*="m9-grid-"]>[class*="column-"].ow-stick{position:-webkit-sticky;position:sticky;top:120px}
@media screen and (max-width:1024px){
	.m9-grid-block [class*="m9-grid-"]>[class*="column-"].ow-stick{position:static}
	.m9-grid-block .ow-row-b{border-top:0;padding-top:0.4em}
}
html.ow-m9-m .m9-grid-block [class*="m9-grid-"]>[class*="column-"].ow-stick{position:static}
html.ow-m9-m .m9-grid-block .ow-row-b{border-top:0;padding-top:0.4em}

/* =====================================================================
   10. 악센트 팔레트   ※ 이 블록은 반드시 파일의 맨 아래에 둘 것
       (ow-bar / ow-quote 의 기본 테두리색을 덮어써야 하므로 순서가 중요하다)

       ow-a1 ~ ow-a8 : 면(面)    = 옅은 배경 + 진한 테두리색 + 자손 아이콘 진한색
                                   → 배지, 알림바, 인용박스에 사용
       ow-t1 ~ ow-t8 : 글자/아이콘 진한색
                                   → 번호, 작은 제목, 아이콘 단독, ow-line 에 사용

       색을 바꾸려면 아래 값만 고치면 사이트 전체에 한꺼번에 반영된다.
       1 인디고블루 / 2 틸 / 3 오렌지 / 4 퍼플 / 5 핑크 / 6 앰버 / 7 그린 / 8 스카이
       1~6 은 행복한실버홈 작업에서 확정된 값을 그대로 가져온 것이다.
   ===================================================================== */
.m9-grid-block .ow-a1{background-color:#eef2ff;border-color:#3a5fd9}
.m9-grid-block .ow-a1 i{color:#3a5fd9}
.m9-grid-block .ow-t1{color:#3a5fd9}

.m9-grid-block .ow-a2{background-color:#eafaf6;border-color:#0d9488}
.m9-grid-block .ow-a2 i{color:#0d9488}
.m9-grid-block .ow-t2{color:#0d9488}

.m9-grid-block .ow-a3{background-color:#fff1ec;border-color:#e8632a}
.m9-grid-block .ow-a3 i{color:#e8632a}
.m9-grid-block .ow-t3{color:#e8632a}

.m9-grid-block .ow-a4{background-color:#f5eefd;border-color:#7c3aed}
.m9-grid-block .ow-a4 i{color:#7c3aed}
.m9-grid-block .ow-t4{color:#7c3aed}

.m9-grid-block .ow-a5{background-color:#fdeef2;border-color:#db2777}
.m9-grid-block .ow-a5 i{color:#db2777}
.m9-grid-block .ow-t5{color:#db2777}

.m9-grid-block .ow-a6{background-color:#fff9e6;border-color:#b48306}
.m9-grid-block .ow-a6 i{color:#b48306}
.m9-grid-block .ow-t6{color:#b48306}

.m9-grid-block .ow-a7{background-color:#e9f6e6;border-color:#3f9142}
.m9-grid-block .ow-a7 i{color:#3f9142}
.m9-grid-block .ow-t7{color:#3f9142}

.m9-grid-block .ow-a8{background-color:#e6f4fb;border-color:#1c7fb8}
.m9-grid-block .ow-a8 i{color:#1c7fb8}
.m9-grid-block .ow-t8{color:#1c7fb8}

/* 무채색(중립) — 아이콘을 강조하고 싶지 않은 곳 */
.m9-grid-block .ow-a0{background-color:#f1f2f4;border-color:#6b7280}
.m9-grid-block .ow-a0 i{color:#4b5563}
.m9-grid-block .ow-t0{color:#4b5563}