/* ============================================================
   kidsrun UI 개편 시안 재현 (Figma 8a1yDvW.. / 11127:990)
   전용 CSS — 기존 app.css 와 완전 분리. 접두사 rd-.
   ============================================================ */

/* ---------- 웹폰트 ---------- */
@font-face{font-family:'NanumSquareRoundOTF';font-weight:300;font-style:normal;font-display:swap;
  src:url('/fonts/NanumSquareRound-Light.woff2') format('woff2');}
@font-face{font-family:'NanumSquareRoundOTF';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/NanumSquareRound-Regular.woff2') format('woff2');}
@font-face{font-family:'NanumSquareRoundOTF';font-weight:700;font-style:normal;font-display:swap;
  src:url('/fonts/NanumSquareRound-Bold.woff2') format('woff2');}
@font-face{font-family:'NanumSquareRoundOTF';font-weight:800;font-style:normal;font-display:swap;
  src:url('/fonts/NanumSquareRound-ExtraBold.woff2') format('woff2');}

@font-face{font-family:'Pretendard';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/Pretendard-Regular.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-weight:500;font-style:normal;font-display:swap;
  src:url('/fonts/Pretendard-Medium.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts/Pretendard-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-weight:700;font-style:normal;font-display:swap;
  src:url('/fonts/Pretendard-Bold.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-weight:800;font-style:normal;font-display:swap;
  src:url('/fonts/Pretendard-ExtraBold.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-weight:900;font-style:normal;font-display:swap;
  src:url('/fonts/Pretendard-Black.woff2') format('woff2');}

@font-face{font-family:'Nanum Brush Script';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/NanumBrushScript-Regular.woff2') format('woff2');}

/* ---------- 토큰 ---------- */
:root{
  --rd-blue:#2388ff;        /* primary */
  --rd-blue-header:#1b64da; /* header bg */
  --rd-blue-dark:#0d4db5;   /* header inner btn */
  --rd-blue-400:#4e9fff;
  --rd-ink:#33363d;         /* icon/gray */
  --rd-muted:#949494;
  --rd-page-bg:#f4f6fa;
  --rd-card:#ffffff;
  --rd-line:#e8ebf0;
  --rd-round:'NanumSquareRoundOTF','NanumGothic',sans-serif;
  --rd-sans:'Pretendard','NanumGothic',sans-serif;
}

/* ---------- 리셋(범위 한정: .rd-body 하위) ---------- */
.rd-body{margin:0;background:var(--rd-page-bg);font-family:var(--rd-round);
  color:var(--rd-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.rd-body *{box-sizing:border-box;}
.rd-body img{display:block;max-width:none;}
.rd-body a{text-decoration:none;color:inherit;}
.rd-body button{font-family:inherit;border:0;background:none;cursor:pointer;padding:0;color:inherit;}
.rd-body p{margin:0;}

/* 서브비주얼 위에 떠 있는 플로팅 헤더는 배경 제거 — 헤더 배경색은 대시보드에서만 */
.nt-hd-float .rd-header,.jn-hd-float .rd-header,.rc-hd-float .rd-header{background:transparent;}

/* ---------- 공통 CTA 알약 버튼 (dashboard·notice·journal 공용) ----------
   notice 퍼블리싱 확정본(구 .nt-btn)을 공통으로 승격. .rd-body 2클래스 특이도로
   위의 button 리셋(padding:0)을 이긴다. 아이콘은 16px, 우측 배치. */
.rd-body .rd-btn{display:inline-flex;gap:6px;align-items:center;justify-content:center;
  border-radius:12px;padding:14px 24px;border:1px solid transparent;white-space:nowrap;cursor:pointer;
  font-family:var(--rd-round);font-weight:800;font-size:14px;letter-spacing:-0.14px;line-height:normal;color:#fff;}
.rd-btn img{width:16px;height:16px;display:block;}
.rd-btn.gray{background:#8491a7;}
.rd-btn.blue{background:#297bff;}
.rd-btn.red{background:#dc3545;}
.rd-btn.blue-soft{background:rgba(41,123,255,.1);border-color:rgba(41,123,255,.4);color:#297bff;}
.rd-btn.gray-soft{background:rgba(132,145,167,.1);border-color:rgba(132,145,167,.4);color:#626a79;}
.rd-btn.sm{padding:11px 18px;border-radius:10px;font-size:12px;letter-spacing:-0.12px;}

/* ---------- 페이지 셸 ---------- */
/* 시안 고정폭 1920. 뷰포트가 좁으면 JS(fitShell)가 zoom을 낮춰 가로 스크롤 제거.
   1920보다 넓은 화면에선 zoom=1(원본). ↓ 아래 인라인 스크립트에서 계산. */
.rd-shell{width:1920px;margin:0 auto;padding:20px 30px 0;position:relative;}
.rd-container{width:1860px;margin:0 auto;}

/* ============================================================
   헤더 (GNB) — node 11172:7013
   ============================================================ */
.rd-header{background:var(--rd-blue-header);border-radius:12px;
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 24px;height:62px;}
.rd-hd-left{display:flex;gap:28px;align-items:center;}
/* 로고를 헤더/서브비주얼 배경에 OVERLAY로 녹여 서브페이지마다 배너색을 먹도록. 채도 죽인 필터는 PNG에 구움. */
.rd-hd-logo{width:88px;height:23px;object-fit:fill;mix-blend-mode:overlay;} /* 시안 STRETCH 88x23 */

.rd-nav{display:flex;gap:4px;align-items:center;}
.rd-nav a,.rd-nav span{font-family:var(--rd-round);font-weight:800;font-size:14px;
  letter-spacing:-0.32px;color:#fff;white-space:nowrap;
  padding:8px 11px;border-radius:9px;display:inline-flex;align-items:center;}
.rd-nav a.is-active{border:1px solid #fff;padding:9px 12px;}
.rd-nav .rd-nav-dim{color:rgba(255,255,255,.6);}
.rd-nav-div{width:1px;height:24px;background:rgba(255,255,255,.3);margin:0 4px;}
.rd-nav-btns{display:flex;gap:4px;align-items:center;margin-left:4px;}
/* Figma는 #0f2140 을 헤더색 위에 mix-blend screen. 헤더 배경이 흰색인 화면이 없어서
   반투명 흰색 한 장으로 통일 — 어떤 서브비주얼색(파랑·초록·핑크·보라) 위든 알아서 물듦.
   .14는 밝기 노브(진하게=값↑). */
.rd-nav-btn{background:rgba(255,255,255,.14);border-radius:5px;padding:8px 10px;
  display:inline-flex;gap:2px;align-items:center;
  font-family:var(--rd-round);font-weight:800;font-size:12px;letter-spacing:-0.32px;
  color:rgba(255,255,255,.8);white-space:nowrap;}
.rd-nav-btn img{width:16px;height:16px;}

.rd-hd-right{display:flex;gap:12px;align-items:center;}
.rd-hd-center{display:flex;gap:6px;align-items:center;padding:8px 11px;border-radius:9px;}
.rd-hd-center .av{width:28px;height:28px;border-radius:40px;background:#fff;
  display:flex;align-items:center;justify-content:center;}
.rd-hd-center .av img{width:18px;height:16px;}
.rd-hd-center .nm{font-family:var(--rd-round);font-weight:700;font-size:12px;
  letter-spacing:-0.32px;color:#fff;white-space:nowrap;}
.rd-hd-point{display:flex;gap:3px;align-items:center;}
.rd-hd-point .pico{width:16px;height:16px;border-radius:50%;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Pretendard';font-weight:800;font-size:11px;line-height:1;color:var(--rd-blue-header);}
.rd-hd-point .pt{font-family:var(--rd-round);font-weight:800;font-size:12px;color:#fff;margin-left:2px;}
.rd-hd-point .pt small{font-weight:700;}
.rd-hd-point .sep{font-family:'Pretendard';font-weight:600;font-size:14px;color:rgba(255,255,255,.3);}
.rd-hd-point .max{font-family:'Pretendard';font-weight:900;font-size:12px;color:rgba(255,255,255,.3);}
.rd-hd-point{background:none;border:0;cursor:pointer;}
.rd-header .rd-hd-user{display:flex;gap:6px;align-items:center;padding:8px 0;
  font-family:var(--rd-round);font-weight:700;font-size:12px;letter-spacing:-0.32px;color:#fff;
  background:none;border:0;cursor:pointer;}
.rd-hd-user img{width:20px;height:20px;transform:scaleY(-1);}
.rd-hd-logout{width:24px;height:24px;}

/* 사용자 메뉴 드롭다운(호버) — 마이페이지 / 내 말투 */
.rd-hd-usermenu{position:relative;}
.rd-hd-dropdown{position:absolute;top:100%;right:0;min-width:132px;padding:6px;
  background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.16);
  display:none;flex-direction:column;gap:2px;z-index:50;}
.rd-hd-usermenu:hover .rd-hd-dropdown{display:flex;}   /* 버튼~메뉴 사이 여백 없음(top:100%) → 호버 유지 */
.rd-hd-dropdown a{display:block;padding:9px 12px;border-radius:8px;
  font-family:var(--rd-round);font-weight:700;font-size:13px;color:#333;white-space:nowrap;}
.rd-hd-dropdown a:hover{background:#f2f3f5;}

/* ============================================================
   본문 레이아웃
   ============================================================ */
.rd-container{position:relative;padding-top:24px;}
.rd-panel{background:var(--rd-card);border:1px solid var(--rd-line);border-radius:24px;}
.rd-main{display:flex;gap:20px;margin-top:24px;}
.rd-secA{width:1140px;flex:0 0 1140px;padding:45px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 30px -14px rgba(16,24,40,.08);}
.rd-secB{width:700px;flex:0 0 700px;display:flex;gap:20px;align-items:stretch;}

/* ============================================================
   top_news — node 11127:993
   ============================================================ */
/* 점선 테두리는 CSS border 대신 SVG stroke로 그린다 —
   CSS 1px 테두리는 분수 배율(예 67%)에서 윗변이 통째로 사라지지만(위치 의존),
   SVG stroke는 벡터·안티앨리어싱이라 어떤 배율에서도 남는다. */
.rd-topnews{position:relative;background:#fff;border-radius:16px;
  padding:17px 21px;display:flex;align-items:center;gap:30px;}
.rd-topnews > .tn-border{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:0;}
.rd-topnews > .tn-border rect{x:0.75px;y:0.75px;width:calc(100% - 1.5px);height:calc(100% - 1.5px);
  rx:15.25px;fill:none;stroke:#1e65e1;stroke-width:1.5;stroke-dasharray:6 4;}
.rd-topnews .tn-ico{width:40px;height:40px;flex:0 0 40px;background:#fff;border:1px solid #c6d4eb;
  border-radius:10px;display:flex;align-items:center;justify-content:center;}
.rd-topnews .tn-ico img{width:21px;height:22px;}
.rd-topnews .tn-txt{font-family:'Pretendard';font-weight:600;font-size:13px;letter-spacing:-0.32px;
  color:#8a93a2;white-space:nowrap;}
.rd-topnews .tn-txt b{color:#3b3e43;font-weight:600;}
.rd-topnews .tn-tone{background:rgba(233,237,244,.5);border-radius:16px;
  padding:8px 20px;display:flex;gap:12px;align-items:center;}
.rd-topnews .tn-tone .t1{font-family:'Pretendard';font-weight:400;font-size:13px;color:#545c68;white-space:nowrap;}
.rd-topnews .tn-tone .vdiv{width:1px;height:16px;background:#d5dbe4;}
.rd-topnews .tn-tone .t2{display:flex;gap:7px;align-items:center;
  font-family:'Pretendard';font-weight:700;font-size:13px;color:#545c68;white-space:nowrap;}
.rd-topnews .tn-tone .t2 img{width:22px;height:23px;}
.rd-topnews .tn-close{position:absolute;top:14px;right:18px;width:20px;height:20px;}

/* ============================================================
   인사말 — node 11127:1059
   ============================================================ */
.rd-greet{display:flex;justify-content:space-between;align-items:flex-start;}
.rd-greet .g-date{display:flex;gap:3px;align-items:center;
  font-family:var(--rd-round);font-weight:800;font-size:16px;letter-spacing:-0.32px;color:#1c2430;white-space:nowrap;}
.rd-greet .g-date em{font-style:normal;color:#2076f4;}
.rd-greet .g-hi{margin-top:10px;font-family:var(--rd-round);font-weight:800;font-size:27px;
  letter-spacing:-1px;color:#1c2430;white-space:nowrap;}
.rd-greet .g-class{position:relative;display:flex;gap:10px;align-items:center;padding-top:45px;}
.rd-greet .g-class .illust{position:absolute;top:-4px;left:21px;width:129px;height:42px;}
.rd-greet .g-class .cname{font-family:var(--rd-round);font-weight:800;font-size:13px;
  letter-spacing:-0.72px;color:#1c2430;white-space:nowrap;}
.rd-greet .g-class .cnt{background:#1c2430;border-radius:40px;padding:4px 10px;
  font-family:var(--rd-round);font-weight:800;font-size:13px;letter-spacing:-0.72px;color:#fff;white-space:nowrap;}

/* ============================================================
   con_오늘의브리핑 — node 11127:1069
   ============================================================ */
.rd-brief{margin-top:28px;background:#fff;border:1px solid #e9edf4;border-radius:16px;
  box-shadow:4px 4px 5.5px rgba(0,0,0,.09);padding:17px 25px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.rd-brief .b-in{display:flex;gap:12px;align-items:center;min-width:0;}
.rd-brief .b-tit{display:flex;gap:2px;align-items:center;white-space:nowrap;}
.rd-brief .b-tit .star{color:#6270f4;font-weight:700;line-height:24px;}
.rd-brief .b-tit .star.s1{font-size:26px;}
.rd-brief .b-tit .star.s2{font-size:12px;}
.rd-brief .b-tit .lbl{font-family:var(--rd-round);font-weight:800;font-size:13px;color:#132440;margin-left:4px;}
.rd-brief .b-tit .lbl .ai{background:linear-gradient(90deg,#6270f4,#2076f4);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.rd-brief .b-div{width:1px;height:16px;background:#d5dbe4;flex:0 0 1px;}
.rd-brief .b-desc{font-family:'Pretendard';font-weight:400;font-size:13px;letter-spacing:-0.32px;
  color:#606763;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rd-brief .b-ctrl{display:flex;gap:0;align-items:center;flex:0 0 auto;}
.rd-brief .b-ctrl img{width:24px;height:24px;}
.rd-brief .b-ctrl .pg{font-family:var(--rd-round);font-weight:700;font-size:13px;color:#3a78bd;white-space:nowrap;padding:0 2px;}
.rd-brief .b-ctrl .pg span{color:#8a93a2;}
.rd-brief .b-ctrl .pg .cur{color:#3a78bd;}

/* 공통 chevron ">" */
.rd-chev{width:5px;height:9px;display:inline-block;position:relative;}
.rd-chev::before{content:"";position:absolute;top:0;left:0;width:6px;height:6px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);transform-origin:top right;}

/* ============================================================
   con_주요서비스 — node 11127:1083
   ============================================================ */
.rd-svc{margin-top:28px;display:flex;flex-direction:column;gap:10px;}
.rd-svc-row{display:flex;gap:8px;align-items:stretch;}

/* --- 3 서비스 카드 공통 --- */
.svc-card{position:relative;height:260px;border-radius:16px;border:1px solid;
  display:flex;flex-direction:column;justify-content:space-between;}
.svc-card .sc-ico{position:absolute;top:-11px;right:17px;width:50px;height:50px;}
.svc-card .sc-title{font-family:var(--rd-round);font-weight:800;font-size:16px;
  letter-spacing:-0.32px;color:#545c68;}
.svc-card .sc-btn{display:inline-flex;gap:8px;align-items:center;border-radius:12px;
  padding:12px 16px;font-family:var(--rd-round);font-weight:700;font-size:13px;letter-spacing:-0.32px;}
.svc-card .sc-names{display:flex;gap:2px;align-items:center;flex-wrap:wrap;}
.svc-card .sc-names .nm{font-family:var(--rd-round);font-weight:700;font-size:13px;
  letter-spacing:-0.32px;color:#8a93a2;padding:4px;}
.svc-card .sc-names .more{background:#58657b;border-radius:4px;padding:4px;
  font-family:var(--rd-round);font-weight:800;font-size:11px;color:#fff;line-height:1;}

/* 알림장 카드 */
.card-notice{flex:1 0 0;min-width:150px;padding:29px 29px 25px;
  background:rgba(240,245,255,.8);border-color:rgba(41,123,255,.3);}
.card-notice .sc-meta{margin-top:8px;display:flex;gap:10px;align-items:center;
  font-family:var(--rd-round);font-weight:700;font-size:13px;letter-spacing:-0.32px;color:#8a93a2;white-space:nowrap;}
.card-notice .sc-meta b{color:#545c68;font-weight:700;}
.card-notice .sc-btn{margin-top:13px;align-self:flex-start;background:#297bff;color:#fff;}
.card-notice .sc-bottom{position:relative;}
.card-notice .sc-stat{display:flex;flex-direction:column;gap:2px;}
.card-notice .sc-stat .r{display:flex;gap:2px;align-items:center;
  font-family:var(--rd-round);font-weight:800;font-size:13px;letter-spacing:-0.32px;line-height:18px;}
.card-notice .sc-stat .r img{width:20px;height:20px;}
.card-notice .sc-stat .r .gen{color:#297bff;}
.card-notice .sc-stat .r .done{color:#297bff;}
.card-notice .sc-stat .r .none{color:#545c68;}
.card-notice .sc-names{margin-top:8px;}
.svc-chart{position:absolute;right:2px;bottom:6px;width:186px;display:flex;flex-direction:column;gap:2px;}
.svc-chart .pct{font-family:'Pretendard';font-weight:600;font-size:16px;letter-spacing:-0.32px;color:#297bff;}
.svc-chart .track{height:8px;border-radius:100px;background:rgba(121,121,121,.16);position:relative;}
.svc-chart .fill{position:absolute;left:0;top:0;height:8px;border-radius:32px;background:#297bff;width:90px;}

/* 보육일지 카드 */
.card-journal{flex:0 0 269px;width:269px;padding:29px 29px 25px;
  background:rgba(242,242,255,.6);border-color:rgba(213,213,248,.8);}
.card-journal .sc-meta{margin-top:4px;display:flex;gap:4px;
  font-family:var(--rd-round);font-weight:700;font-size:13px;letter-spacing:-0.32px;}
.card-journal .sc-meta b{color:#545c68;font-weight:700;}
.card-journal .sc-meta span{color:#8a93a2;}
.card-journal .sc-btn{position:absolute;left:28px;top:83px;border:1px solid #7860f5;color:#7860f5;}
.wk-row{display:flex;gap:1px;}
.wk{width:43px;height:40px;position:relative;}
/* 요일 원: 셀 좌측에 붙고 우측 15.15%·하단 9.68% 여백(피그마 I11127:1133;11076:3994) */
.wk .cir{position:absolute;left:0;top:0;right:15.15%;bottom:9.68%;border-radius:50px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #7860f5;font-family:'Pretendard';font-weight:600;font-size:11px;
  letter-spacing:-0.32px;color:#7860f5;}
.wk.off .cir{border:none;background:#fff;color:#a296ab;}
/* 작성완료 체크: 원 우하단에 겹침(피그마 inset 48.39%/51.52%, 약 21px) */
.wk .chk{position:absolute;left:22px;top:19px;width:21px;height:21px;}

/* 관찰일지 카드 */
.card-observe{flex:0 0 269px;width:269px;padding:29px;
  background:rgba(39,197,144,.05);border-color:rgba(39,197,144,.2);}
.card-observe .sc-meta{margin-top:4px;display:flex;gap:10px;align-items:center;
  font-family:var(--rd-round);font-weight:700;font-size:13px;letter-spacing:-0.32px;color:#8a93a2;white-space:nowrap;}
.card-observe .sc-meta .dday{background:#fff;border-radius:40px;padding:4px 10px;
  font-family:'Pretendard';font-weight:600;font-size:11px;color:#a2afbd;}
.card-observe .sc-btn{position:absolute;left:28px;top:83px;border:1px solid #27c590;color:#27c590;}
/* sc-bottom은 비배치 → 도넛은 카드(.svc-card position:relative) 기준으로 우하단 구석에 앵커 */
.card-observe .sc-none{font-family:var(--rd-round);font-weight:800;font-size:13px;color:#545c68;}
.card-observe .sc-names{margin-top:2px;}
.donut{position:absolute;right:17px;bottom:21px;width:76px;height:76px;border-radius:50%;
  background:conic-gradient(#27c590 0 62%, #e5f4ee 62% 100%);
  display:flex;align-items:center;justify-content:center;}
.donut::after{content:"";position:absolute;width:51px;height:51px;border-radius:50%;background:#fff;}
.donut .pct{position:relative;z-index:1;font-family:'Pretendard';font-weight:600;font-size:16px;
  letter-spacing:-0.32px;color:#27c590;}

/* --- 하단 행: 식단/상담/발달 --- */
.box-s{border:1px solid #e9edf4;border-radius:10px;padding:25px 17px;height:88px;
  display:flex;flex-direction:column;justify-content:space-between;}
.box-s .bs-title{font-family:var(--rd-round);font-weight:800;font-size:16px;letter-spacing:-0.32px;color:#545c68;}
.box-s .bs-foot{display:flex;align-items:center;justify-content:space-between;}
.box-s .bs-foot.right{justify-content:flex-end;gap:4px;}
.box-s .reg{font-family:'Pretendard';font-weight:400;font-size:12px;letter-spacing:-0.32px;color:#8a93a2;}
.box-s .state-done{background:#e6f0ff;border-radius:20px;padding:4px 8px;
  font-family:var(--rd-round);font-weight:700;font-size:11px;letter-spacing:-0.32px;color:#2076f4;}
.box-s .term{border:1px solid #b8c2cc;border-radius:2px;padding:3px 4px;
  font-family:'Pretendard';font-weight:400;font-size:11px;letter-spacing:-0.32px;color:#758391;}
.box-s .wait{font-family:var(--rd-round);font-weight:700;font-size:12px;letter-spacing:-0.32px;color:#b8c2cc;}
.box-meal{flex:0 0 493px;width:493px;}
.box-s.flex1{flex:1 0 0;min-width:150px;}

/* ============================================================
   con_도우미 — node 11127:1189
   ============================================================ */
.rd-help{margin-top:28px;display:flex;flex-direction:column;gap:8px;}
.help-row{display:flex;gap:8px;}
.help-box{background:#f6f8fc;border:1px solid #e9edf4;border-radius:10px;height:55px;
  padding:17px 25px;display:flex;align-items:center;justify-content:space-between;}
.help-box .hb-title{font-family:var(--rd-round);font-weight:800;font-size:13px;letter-spacing:-0.32px;color:#545c68;white-space:nowrap;}
.help-box .hb-right{display:flex;gap:8px;align-items:center;}
.help-box .hb-desc{font-family:var(--rd-round);font-weight:700;font-size:13px;letter-spacing:-0.32px;color:#8a93a2;white-space:nowrap;}
.help-box .hb-act{display:flex;gap:10px;align-items:center;margin-left:2px;
  font-family:var(--rd-round);font-weight:700;font-size:13px;letter-spacing:-0.32px;color:#545c68;white-space:nowrap;}
.help-box .nm{font-family:var(--rd-round);font-weight:700;font-size:13px;letter-spacing:-0.32px;color:#8a93a2;}
.help-box .more{background:#58657b;border-radius:4px;padding:4px;
  font-family:var(--rd-round);font-weight:800;font-size:11px;color:#fff;line-height:1;}
.help-box.w497{flex:0 0 497px;width:497px;}
.help-box.flex1{flex:1 0 0;min-width:0;}
.help-box.full{width:100%;}

/* ============================================================
   con_기록이어가기 — node 11127:1217
   ============================================================ */
.rd-flow{margin-top:28px;display:flex;flex-direction:column;gap:10px;}
.flow-tit{display:flex;gap:10px;align-items:center;white-space:nowrap;}
.flow-tit .t1{font-family:var(--rd-round);font-weight:800;font-size:13px;letter-spacing:-0.32px;color:#545c68;}
.flow-tit .t2{font-family:'Pretendard';font-weight:600;font-size:13px;letter-spacing:-0.32px;color:#8a93a2;}
.flow-row{display:flex;align-items:stretch;justify-content:space-between;}
.flow-set{display:flex;gap:6px;}
.flow-box{background:#f6f8fc;border:1px solid #e9edf4;border-radius:10px;height:126px;
  padding:21px 1px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;}
.flow-box.fixed{flex:0 0 124.33px;width:124.33px;}
.flow-box.flex1{flex:1 0 0;min-width:0;}
.flow-box img.fico{width:24px;height:24px;}
.flow-box img.fico.tone{width:19px;height:20px;}
.flow-box .fnum{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  background:#297bff;font-family:'Pretendard';font-weight:600;font-size:13px;color:#fff;}
.flow-box .fnum.gray{background:#8a93a2;}
.flow-box .flabel{display:flex;gap:4px;font-family:var(--rd-round);font-weight:800;font-size:13px;letter-spacing:-0.32px;color:#545c68;white-space:nowrap;}
.flow-box .fdone{font-family:'Pretendard';font-weight:700;font-size:12px;letter-spacing:-0.32px;color:#3f97ff;}
.flow-box .fcount{font-family:'Pretendard';font-weight:700;font-size:12px;letter-spacing:-0.32px;color:#3f97ff;white-space:nowrap;}
.flow-box .fcount span{color:#8a93a2;}
.flow-box .fwait{font-family:'Pretendard';font-weight:600;font-size:12px;letter-spacing:-0.32px;color:#b8c2cc;}
.flow-arrow{display:flex;align-items:center;padding:0 8px;}
.flow-arrow img{width:16px;height:16px;}

/* ============================================================
   sec_B — Details 카드 (오늘 알림장 / 이번달 관찰일지)
   ============================================================ */
.detail{border:1px solid #e9edf4;border-radius:16px;padding:25px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(248,250,253,.9)),#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 30px -12px rgba(16,24,40,.12);
  display:flex;flex-direction:column;gap:20px;}
.detail-notice{flex:0 0 470px;width:470px;}
.detail-observe{flex:0 0 210px;width:210px;}

.dt-summary{display:flex;flex-direction:column;gap:4px;}
.dt-summary .dt-head{display:flex;align-items:center;justify-content:space-between;}
.dt-summary .dt-title{font-family:var(--rd-round);font-weight:800;font-size:15px;letter-spacing:-0.32px;color:#545c68;}
.dt-summary .dt-head img{width:24px;height:24px;}
.dt-legend{display:flex;gap:16px;align-items:center;justify-content:space-between;}
.dt-legend .lg{display:flex;gap:4px;align-items:center;}
.dt-legend .dot{width:8px;height:8px;border-radius:50%;}
.dt-legend .dot.blue{background:#3f97ff;}
.dt-legend .dot.gray{background:#c3ccd8;}
.dt-legend .l1{font-family:var(--rd-round);font-weight:700;font-size:13px;letter-spacing:-0.32px;color:#3f97ff;white-space:nowrap;}
.dt-legend .l2{font-family:var(--rd-round);font-weight:700;font-size:13px;letter-spacing:-0.32px;color:#8a93a2;white-space:nowrap;}
.dt-legend .att{font-family:var(--rd-round);font-weight:700;font-size:13px;letter-spacing:-0.32px;color:#8a93a2;white-space:nowrap;}
.dt-legend .att b{color:#545c68;font-weight:700;}

/* 오늘 알림장 카드 그리드 — 항상 가로 3열 */
.dt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.chk-card{height:126px;border-radius:10px;border:1px solid #e9edf4;background:#f6f8fc;
  padding:12px 15px;display:flex;flex-direction:column;justify-content:space-between;}
.chk-card.none{background:#fff;}
.chk-card .who{display:flex;flex-direction:column;gap:4px;align-items:center;}
.chk-card .av{width:47px;height:47px;border-radius:50%;overflow:hidden;background:#eef1f6;}
.chk-card .av img{width:47px;height:47px;object-fit:cover;}
.chk-card .who .nm{font-family:var(--rd-round);font-weight:800;font-size:13px;letter-spacing:-0.32px;color:#545c68;}
.chk-card .st{align-self:flex-end;padding:4px 8px;border-radius:20px;
  font-family:var(--rd-round);font-weight:700;font-size:11px;letter-spacing:-0.32px;white-space:nowrap;}
.chk-card .st.done{background:#e6f0ff;color:#2076f4;}
.chk-card .st.gen{border:1px solid #d0def7;color:#8a93a2;}
.chk-card .st.none{background:rgba(233,237,244,.6);color:#8a93a2;}

/* 이번달 관찰일지 리스트 */
.dt-list{display:flex;flex-direction:column;gap:8px;}
.name-box{border:1px solid #e9edf4;background:#f6f8fc;border-radius:10px;padding:12px 15px;
  display:flex;align-items:center;justify-content:space-between;position:relative;}
.name-box.started{border-color:rgba(27,100,218,.3);background:transparent;}
.name-box .nm{font-family:var(--rd-round);font-weight:800;font-size:13px;letter-spacing:-0.32px;color:#545c68;}
.name-box .area{font-family:'Pretendard';font-weight:700;font-size:13px;letter-spacing:-0.32px;color:#3a78bd;}
.name-box .area span{font-weight:400;color:#8a93a2;}
.name-box .ck{width:20px;height:20px;}

/* 페이지 컨트롤(dot) */
.ctrl-page{display:flex;gap:6px;justify-content:center;align-items:center;height:8px;margin-top:auto;}
.ctrl-page i{width:8px;height:8px;border-radius:50%;background:#d5dbe4;cursor:pointer;}
.ctrl-page i.on{width:16px;border-radius:4px;background:#297bff;}

/* ============================================================
   fm_bann — node 11127:1475
   ============================================================ */
.rd-bann{margin-top:24px;display:flex;gap:8px;align-items:stretch;}
.bann-card{flex:1 0 0;min-width:0;background:#fff;border-radius:16px;
  box-shadow:0 1px 1px rgba(16,24,40,.04),0 4px 4px rgba(16,24,40,.03);
  padding:20px 32px 20px 24px;display:flex;gap:20px;align-items:flex-start;}
.bann-card .bc-ico{width:50px;height:50px;flex:0 0 50px;}   /* Figma ico_서비스 50×50 */
/* 알림장 도우미 연동 아이콘 — 링크 배지가 우측으로 살짝 넘쳐 비율 유지(50 기준 57.5) */
.bann-card .bc-txt{padding-top:4px;display:flex;flex-direction:column;gap:4px;min-width:0;}
.bann-card .bc-title{font-family:var(--rd-round);font-weight:800;font-size:13px;letter-spacing:-0.32px;color:#545c68;white-space:nowrap;}
.bann-card .bc-desc{font-family:var(--rd-round);font-weight:400;font-size:12px;line-height:1.3;letter-spacing:-0.32px;color:#8a93a2;}

/* ============================================================
   footer
   ============================================================ */
.rd-footer{padding-top:20px;padding-bottom:24px;display:flex;align-items:center;}
.rd-footer p{font-family:'Pretendard';font-weight:400;font-size:13px;letter-spacing:-0.32px;color:#8a93a2;}

/* ============================================================
   플로팅: event_bann / 튜토리얼·의견받기
   ============================================================ */
/* 포도알 이벤트 배너 — Figma 요소 PNG(정렬 보장), 클릭 시 이벤트 팝업.
   헤더 '24포인트' 표시 아래 중앙에 걸리도록 위치(포인트 중심 x≈1677/shell). */
.rd-event{position:absolute;top:70px;right:183px;width:120px;height:auto;z-index:20;
  background:none;cursor:pointer;padding:0;line-height:0;}
.rd-event img{width:100%;height:auto;display:block;}

/* ============================================================
   모달 공통
   ============================================================ */
.rd-overlay{position:fixed;inset:0;background:rgba(16,20,40,.45);z-index:100;
  display:none;align-items:center;justify-content:center;padding:24px;}
.rd-overlay.open{display:flex;}
.rd-modal{position:relative;background:#fff;border-radius:16px;
  max-height:calc(100vh - 48px);overflow-y:auto;box-shadow:0 24px 60px -12px rgba(16,24,40,.35);}
.rd-modal .m-close{position:absolute;top:16px;right:16px;width:40px;height:40px;z-index:5;cursor:pointer;background:none;}
.rd-modal .m-close img{width:100%;height:100%;}

/* ============================================================
   이벤트 팝업(modal1) — node 11149:2755
   ============================================================ */
.ev-modal{width:548px;padding:24px;display:flex;flex-direction:column;gap:12px;align-items:center;}
.ev-modal .m-head{position:relative;width:100%;background:#6341bf;border-radius:20px;
  padding:20px 26px;min-height:143px;overflow:hidden;display:flex;flex-direction:column;gap:8px;}
.ev-modal .m-head .badge{align-self:flex-start;background:#49a881;border-radius:40px;padding:1px 10px 3px;
  font-family:'Pretendard';font-weight:700;font-size:10px;color:#fff;line-height:1.5;}
.ev-modal .m-head h3{margin:0;font-family:'Pretendard';font-weight:700;font-size:16px;color:#fff;line-height:1.5;}
.ev-modal .m-head p{font-family:'Pretendard';font-weight:400;font-size:13px;color:#fff;line-height:1.5;}
.ev-modal .m-head .hgrape{position:absolute;right:24px;top:20px;width:126px;height:auto;}
.ev-prog{width:100%;display:flex;flex-direction:column;gap:0;padding-top:14px;}
.ev-prog .cap{text-align:center;font-family:'Pretendard';color:#6d7882;}
.ev-prog .cap .t1{font-weight:700;font-size:15px;}
.ev-prog .cap .t2{font-weight:700;font-size:17px;}
.ev-prog .cap .t2 em{font-style:normal;color:#6341bf;}
.ev-prog .bar{position:relative;margin-top:8px;background:#fff;border-radius:50px;display:flex;gap:6px;align-items:center;padding:4px 14px;}
.ev-prog .bar .n1{font-family:'Pretendard';font-weight:700;font-size:13px;color:#5917b8;}
.ev-prog .bar .n2{font-family:'Pretendard';font-weight:700;font-size:13px;color:#8a949e;}
.ev-prog .bar .track{flex:1;height:16px;background:#e6e8ea;border-radius:40px;position:relative;}
.ev-prog .bar .track i{display:block;height:100%;width:10%;background:#5917b8;border-radius:40px;}
.ev-prog .bar .pgrape{position:absolute;top:-20px;width:53px;height:auto;transform:translateX(-50%);pointer-events:none;}
.ev-stamps{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  width:500px;padding:20px 30px;position:relative;}
.ev-stamps .stamp{width:52px;height:52px;border-radius:60px;border:3px solid;display:flex;
  align-items:center;justify-content:center;position:relative;
  font-family:'Pretendard';font-weight:700;font-size:13px;text-align:center;}
.ev-stamps .stamp.done{background:#efe3f6;border-color:rgba(89,23,184,.5);color:#5917b8;}
.ev-stamps .stamp.done img{position:absolute;width:64px;height:64px;}
.ev-stamps .stamp.done span{position:relative;z-index:1;}
.ev-stamps .stamp.empty{background:#fff;border-color:#e6e8ea;color:#8a949e;}
.ev-stamps .stamp.reward{background:#fff;border-color:#e6e8ea;overflow:visible;}
.ev-stamps .stamp.reward img{width:44px;height:44px;}
.ev-stamps .stamp.reward .rbadge{position:absolute;left:50%;transform:translateX(-50%);bottom:-11px;
  background:#5917b8;border-radius:50px;padding:2px 8px;color:#fff;font-family:'Pretendard';font-weight:700;font-size:11px;white-space:nowrap;}
/* '오늘' 말풍선 — 스탬프 위 중앙, 아래로 꼬리(tail)가 도장을 가리킴 (Figma badge) */
.ev-stamps .stamp.today::after{content:"\C624\B298";position:absolute;top:-33px;left:50%;transform:translateX(-50%);z-index:3;
  background:#33363d;color:#fff;border-radius:20px;padding:3px 12px;font-family:'Pretendard';font-weight:700;font-size:11px;line-height:1.4;white-space:nowrap;}
.ev-stamps .stamp.today::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:3;
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:9px solid #33363d;}
.ev-challenge{width:100%;background:rgba(233,237,244,.4);border-radius:16px;min-height:56px;
  display:flex;gap:8px;align-items:center;justify-content:center;
  font-family:'Pretendard';font-weight:700;font-size:15px;color:#8a949e;}
.ev-challenge .dim{opacity:.4;}
.ev-list{width:100%;display:flex;flex-direction:column;gap:5px;}
.ev-list .row{background:#f6f8fc;border-radius:12px;min-height:44px;padding:16px 24px;
  display:flex;align-items:center;gap:12px;cursor:pointer;width:100%;text-align:left;}
.ev-list .row .ic{width:30px;height:30px;flex:0 0 30px;position:relative;display:flex;align-items:center;justify-content:center;}
.ev-list .row .ic .bg{position:absolute;inset:0;width:30px;height:30px;}
.ev-list .row .ic .fg{position:relative;width:20px;height:20px;z-index:1;}
.ev-list .row .txt{flex:1;min-width:0;}
.ev-list .row .txt b{display:block;font-family:'Pretendard';font-weight:700;font-size:15px;color:rgba(0,12,30,.8);line-height:1.35;}
.ev-list .row .txt small{display:block;font-family:'Pretendard';font-weight:400;font-size:13px;color:rgba(0,19,43,.58);line-height:1.35;}
.ev-list .row .arr{width:24px;height:24px;flex:0 0 24px;opacity:.55;}
.ev-btns{width:100%;display:flex;gap:8px;padding-top:20px;}
.ev-btns button{flex:1;min-height:56px;border-radius:16px;font-family:'Pretendard';font-weight:700;font-size:15px;cursor:pointer;}
.ev-btns .sec{background:rgba(7,25,76,.05);color:rgba(3,18,40,.7);}
.ev-btns .pri{background:#2076f4;color:#fff;}

/* ============================================================
   의견보내기 팝업(modal2) — node 11157:4606
   ============================================================ */
.fb-modal{width:328px;background:transparent;box-shadow:none;overflow:visible;margin-top:40px;}
.fb-modal .fb-mascot{position:absolute;top:-70px;left:50%;transform:translateX(-50%);
  width:147px;height:auto;z-index:2;}
.fb-modal .fb-card{background:#fff;border-radius:20px;padding:40px 24px;display:flex;flex-direction:column;
  gap:16px;align-items:center;box-shadow:0 24px 60px -12px rgba(16,24,40,.35);}
.fb-modal .fb-tit{display:flex;gap:4px;align-items:center;}
.fb-modal .fb-tit img{width:23px;height:24px;}
.fb-modal .fb-tit b{font-family:'Pretendard';font-weight:700;font-size:17px;color:#1e2124;line-height:1.5;}
.fb-modal .fb-tit b em{font-style:normal;color:#5917b8;}
.fb-modal .fb-sub{font-family:'Pretendard';font-weight:400;font-size:12px;color:#464c53;line-height:1.5;text-align:center;}
.fb-modal .fb-sub em{font-style:normal;font-weight:600;}
.fb-modal .fb-imgbox{background:#f4f5f6;border-radius:10px;padding:10px;}
.fb-modal .fb-imgbox img{width:140px;height:140px;object-fit:cover;border-radius:6px;display:block;}
.fb-modal .fb-badge{background:rgba(89,23,184,.1);border-radius:50px;padding:2px 8px;
  font-family:'Pretendard';font-weight:400;font-size:11px;color:#5917b8;line-height:1.5;}
.fb-modal .fb-name{font-family:'Pretendard';font-weight:700;font-size:13px;color:#1e2124;text-align:center;line-height:1.5;}
.fb-modal .fb-note{font-family:'Pretendard';font-weight:400;font-size:11px;color:#8a949e;text-align:center;line-height:1.2;}

/* 이벤트 모달 옆에 펼쳐지는 보상 카드 — 기본 숨김, show-reward 시 우측에 나란히 */
#rd-ev-modal{gap:48px;}
#rd-ev-modal .ev-reward{display:none;}
#rd-ev-modal.show-reward .ev-reward{display:block;}

/* ============================================================
   의견보내기 설문 폼(modal) — Image #1
   ============================================================ */
#rd-fb-modal{justify-content:flex-end;}
.survey-modal{width:540px;padding:28px;display:flex;flex-direction:column;gap:22px;
  font-family:'Pretendard';}
.survey-modal .sv-rate{border:1px solid #e3e7ee;border-radius:12px;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;}
.survey-modal .sv-rate .q{font-weight:700;font-size:15px;color:#2b3038;}
.survey-modal .sv-rate .stars{display:flex;align-items:center;gap:2px;}
.survey-modal .sv-rate .stars i{font-style:normal;font-size:18px;color:#d7dbe2;line-height:1;}
.survey-modal .sv-rate .stars i.on{color:#ffb020;}
.survey-modal .sv-rate .stars b{margin-left:6px;font-weight:700;font-size:14px;color:#2b3038;}

.survey-modal .sv-q{display:flex;flex-direction:column;gap:10px;}
.survey-modal .sv-qh{display:flex;align-items:center;gap:8px;}
.survey-modal .sv-qh .qn{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#16357a;
  color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;}
.survey-modal .sv-qh .qt{font-weight:700;font-size:15px;color:#2b3038;}
.survey-modal .sv-qh .qt em{font-style:normal;font-weight:500;font-size:13px;color:#9aa2ad;}
.survey-modal .sv-opt{display:flex;align-items:center;gap:10px;padding-left:6px;cursor:pointer;
  font-weight:500;font-size:15px;color:#3f4650;}
.survey-modal .sv-opt input{width:20px;height:20px;accent-color:#2076f4;margin:0;}
.survey-modal .sv-input{width:100%;background:#f2f4f7;border:0;border-radius:10px;
  padding:14px 16px;font-family:'Pretendard';font-size:14px;color:#2b3038;resize:none;}
.survey-modal .sv-input::placeholder{color:#a6adb7;}
.survey-modal .sv-area{min-height:96px;}

.survey-modal .sv-check{display:flex;align-items:center;gap:10px;cursor:pointer;
  font-weight:500;font-size:15px;color:#3f4650;}
.survey-modal .sv-check input{width:22px;height:22px;accent-color:#2076f4;margin:0;}
.survey-modal .sv-check em{font-style:normal;font-weight:500;font-size:13px;color:#9aa2ad;}

.survey-modal .sv-btns{display:flex;gap:10px;padding-top:4px;}
.survey-modal .sv-btns button{flex:1;min-height:56px;border-radius:14px;
  font-family:'Pretendard';font-weight:700;font-size:16px;cursor:pointer;}
.survey-modal .sv-btns .sec{background:#eef0f3;color:#3f4650;}
.survey-modal .sv-btns .pri{background:#2076f4;color:#fff;}

.rd-fab{position:fixed;right:30px;bottom:22px;display:flex;gap:11px;align-items:center;z-index:30;}
.rd-fab .tut{background:#fff;border:1.6px solid #1c2430;border-radius:50px;
  padding:8px 16px 8px 12px;display:flex;gap:3px;align-items:center;
  font-family:'Pretendard';font-weight:700;font-size:13px;letter-spacing:-0.32px;color:#545c68;white-space:nowrap;}
.rd-fab .tut .wi{width:20px;height:20px;}
.rd-fab .tut .ar{width:16px;height:8px;}
/* 튜토리얼: 기본 '튜토리얼'만, 호버 시 '사용방법이 궁금할땐?' 힌트 노출 */
.rd-fab .tut b{font-weight:800;}
.rd-fab .tut .hint{display:none;font-weight:600;color:#8a949e;}
.rd-fab .tut:hover .hint{display:inline;}
/* 의견 FAB: Figma 파란 라운드 사각형(radius 16, 그림자 4/4/blur12) + 흰 말풍선 아이콘 */
.rd-fab .fb{width:50px;height:50px;border-radius:16px;background:#2076f4;
  display:flex;align-items:center;justify-content:center;box-shadow:4px 4px 12px rgba(0,0,0,.23);}
.rd-fab .fb img{width:23px;height:22px;}

/* ============================================================
   튜토리얼 소개 팝업 — node 11660:19425 (views/redesign/_tutorial.jsp)
   popWrap 770x466 = 카드 730x436 + 캐릭터/닫기 여백(우 40 / 상 30)
   ※ .rd-body 접두사 필수 — 없으면 위쪽 `.rd-body button` 리셋(background:none)에 밀린다.
   ============================================================ */
.rd-body .tut-wrap{position:relative;width:770px;padding:30px 40px 0 0;box-sizing:border-box;}
.rd-body .tut-modal{width:730px;height:436px;padding:60px;box-sizing:border-box;border-radius:32px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;}
.rd-body .tut-left{position:relative;z-index:1;display:flex;flex-direction:column;gap:38px;align-items:flex-start;}
.rd-body .tut-textwrap{display:flex;flex-direction:column;gap:38px;align-items:flex-start;}
.rd-body .tut-textbox{display:flex;flex-direction:column;gap:13px;}
.rd-body .tut-textbox .eyebrow{font-family:var(--rd-round);font-weight:700;font-size:16px;
  letter-spacing:-0.32px;line-height:1.4;color:#929ca2;}
.rd-body .tut-title{display:flex;flex-direction:column;gap:10px;}
/* 줄바꿈은 <br>로 고정(시안대로) — 폰트 폭 차이로 접히지 않게 nowrap */
.rd-body .tut-title h3{margin:0;font-family:var(--rd-round);font-weight:800;font-size:28px;
  line-height:1.4;color:#3b414b;white-space:nowrap;}
.rd-body .tut-title h3 em{font-style:normal;color:#0af;}
.rd-body .tut-title p{font-family:var(--rd-sans);font-weight:400;font-size:15px;line-height:1.4;
  color:#6f7888;white-space:nowrap;}
/* 시작하기 CTA */
.rd-body .tut-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:16px 20px 16px 30px;border-radius:14px;background:#00adf7;cursor:pointer;
  font-family:var(--rd-round);font-weight:800;font-size:16px;letter-spacing:-0.32px;color:#fff;}
.rd-body .tut-cta img{width:7px;height:12px;}
/* 다음부터 보지 않기 — KRDS check2_circle_line, 미선택 회색 / 선택 파랑 */
.rd-body .tut-skip{display:inline-flex;align-items:center;gap:4px;padding-left:4px;cursor:pointer;color:#b7c0cf;}
.rd-body .tut-skip input{position:absolute;opacity:0;width:0;height:0;}
.rd-body .tut-skip svg{width:12px;height:12px;flex:none;}
.rd-body .tut-skip svg circle{fill:#fff;stroke:currentColor;}
.rd-body .tut-skip svg path{fill:currentColor;}
.rd-body .tut-skip input:checked ~ svg circle{fill:#00adf7;stroke:#00adf7;}
.rd-body .tut-skip input:checked ~ svg path{fill:#fff;}
.rd-body .tut-skip span{font-family:var(--rd-round);font-weight:700;font-size:11px;letter-spacing:-0.11px;color:#6f7888;}
/* 카드 장식(좌표는 카드 기준) — 우하단 물결 2겹(시안 180° 회전 → tl 80 / br 32) + 워터마크 로고 */
.rd-body .tut-deco i{position:absolute;display:block;}
.rd-body .tut-deco .w1{left:301px;top:371px;width:429px;height:51px;background:#def3fb;
  border-top-left-radius:80px;border-bottom-right-radius:32px;}
.rd-body .tut-deco .w2{left:316px;top:388px;width:414px;height:48px;background:#bae5f8;
  border-top-left-radius:80px;border-bottom-right-radius:32px;}
.rd-body .tut-deco .logo{position:absolute;left:471px;top:126px;width:231px;height:62px;
  object-fit:contain;opacity:.35;pointer-events:none;}
/* 캐릭터(우하단, 시안대로 좌우반전 + 상단만 노출) / 닫기(우상단) */
.rd-body .tut-char{position:absolute;right:0;bottom:0;width:322px;height:207px;
  object-fit:cover;object-position:top;transform:scaleX(-1);pointer-events:none;}
.rd-body .tut-close{position:absolute;right:0;top:0;width:42px;height:42px;border-radius:100px;
  background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;}
.rd-body .tut-close img{width:24px;height:24px;}

/* ============================================================
   튜토리얼 진행 화면(정적) — node 11676:12534 (views/redesign/_tutorial-step.jsp)
   조명(spot) + 코치마크(coach) + 하단 진행바(bar). 위치는 JS(tutStepPlace)가 정렬.
   ============================================================ */
/* 컨테이너가 페이지 클릭을 차단 — 목업이라 실제 버튼(생성/저장 등)을 누르면 서버 오류나므로 막고,
   진행은 오직 [다음]으로. 각 단계 결과는 프레임의 pre 로 자동 시연. 코치/바만 클릭 받음. */
.rd-body .tut-step{position:fixed;inset:0;z-index:2000;}  /* 페이지 모달(.nmodal z-index:1000)보다 위 — 하단바·조명이 모달에 가리지 않도록 */
.rd-body .tut-step-spot{pointer-events:none;}
.rd-body .tut-step[hidden]{display:none;}
/* 조명 링: 가운데는 뚫리고, 초대형 box-shadow로 바깥을 어둡게(마스크) */
.rd-body .tut-step-spot{position:fixed;border:5px solid #00f6ff;border-radius:84px;
  box-shadow:0 0 0 9999px rgba(16,24,40,.74);pointer-events:none;box-sizing:border-box;}
/* 조명 대상 강조 — nav 프레임에서 JS(show)가 대상에 .tut-hl 부여 */
.rd-body .rd-nav a.tut-hl{background:#1b64da;border:1px solid #fff;padding:9px 12px;color:#fff;}
/* 코치마크 말풍선(조명 중앙 아래, translateX로 가운데 정렬) */
.rd-body .tut-step-coach{position:fixed;background:#fff;border-radius:18px;
  padding:40px;box-shadow:0 12px 40px rgba(16,24,40,.18);}
.rd-body .tut-step-coach .arrow{position:absolute;top:-11px;transform:translateX(-50%);
  width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:12px solid #fff;}
/* 조명 위쪽에 뜨는 변형(설명) — 화살표가 아래를 가리킨다 */
.rd-body .tut-step-coach.up .arrow{top:auto;bottom:-11px;border-bottom:0;border-top:12px solid #fff;}
.rd-body .tut-step-coach .eyebrow{font-family:var(--rd-round);font-weight:700;font-size:16px;
  letter-spacing:-0.32px;line-height:1.4;color:#929ca2;margin-bottom:13px;}
.rd-body .tut-step-coach .ct{display:flex;flex-direction:column;gap:10px;}
.rd-body .tut-step-coach h4{margin:0;font-family:var(--rd-round);font-weight:800;font-size:20px;color:#3b414b;white-space:nowrap;}
.rd-body .tut-step-coach h4 em{font-style:normal;color:#00adf7;}
.rd-body .tut-step-coach .ct p{max-width:340px;font-family:var(--rd-sans);font-weight:400;font-size:15px;line-height:1.5;color:#6f7888;word-break:keep-all;overflow-wrap:break-word;}
/* 하단 진행바 */
.rd-body .tut-step-bar{position:fixed;left:0;right:0;bottom:0;height:100px;background:#fff;}
/* 좌하단 물결(캐릭터가 달리는 언덕) — 위쪽 오른모서리만 둥글게 */
.rd-body .tut-step-bar .wave{position:absolute;left:0;display:block;border-top-right-radius:80px;}
.rd-body .tut-step-bar .wave.w1{top:35px;width:346px;height:51px;background:#def3fb;}
.rd-body .tut-step-bar .wave.w2{top:52px;width:332px;height:48px;background:#bae5f8;}
.rd-body .tut-step-bar .char{position:absolute;left:160px;top:-58px;width:143px;height:auto;pointer-events:none;}
.rd-body .tut-step-bar .inner{position:absolute;left:351px;right:32px;top:28px;
  display:flex;align-items:center;gap:24px;}
/* 진행: 라인 위에 활성 점 + 현재 스텝 라벨 + 빈 점들 */
.rd-body .tut-step-bar .prog{position:relative;display:flex;align-items:center;gap:0;}
.rd-body .tut-step-bar .prog .line{position:absolute;left:6px;right:6px;top:50%;height:1px;background:#e3e7ee;}
.rd-body .tut-step-bar .prog .line.on{right:auto;width:0;height:2px;margin-top:-1px;background:#297bff;}  /* 시작~현재 점까지 파란 활성 선(시안) */
.rd-body .tut-step-bar .prog .dot{position:relative;width:12px;height:12px;border-radius:50%;background:#dfe4ec;flex:none;margin:0 45px;}
.rd-body .tut-step-bar .prog .dot.on{background:#297bff;}
.rd-body .tut-step-bar .prog .cur{position:relative;display:flex;align-items:center;gap:10px;background:#fff;padding:0 4px;flex:none;}
.rd-body .tut-step-bar .prog .cur .badge{display:inline-flex;align-items:center;height:24px;padding:0 8px;
  border-radius:4px;background:#e7f4fe;font-family:var(--rd-sans);font-weight:400;font-size:15px;color:#3191da;line-height:1.5;}
.rd-body .tut-step-bar .prog .cur b{font-family:var(--rd-round);font-weight:800;font-size:18px;color:#000;white-space:nowrap;}
/* 이전/다음 */
.rd-body .tut-step-bar .btns{display:flex;gap:12px;flex:none;margin-left:auto;}
.rd-body .tut-step-bar .nav{display:inline-flex;align-items:center;gap:6px;padding:14px 20px;border-radius:12px;
  font-family:var(--rd-round);font-weight:800;font-size:14px;letter-spacing:-0.14px;color:#fff;}
.rd-body .tut-step-bar .nav img{width:6px;height:10px;}
.rd-body .tut-step-bar .nav.prev{background:#b7c0cf;padding-left:20px;padding-right:24px;}
.rd-body .tut-step-bar .nav.prev img{transform:scaleX(-1);}
.rd-body .tut-step-bar .nav.next{background:#00adf7;padding-left:24px;padding-right:20px;}
/* 튜토리얼 끝내기(우측) */
.rd-body .tut-step-bar .end{display:inline-flex;align-items:center;gap:2px;flex:none;
  font-family:var(--rd-round);font-weight:700;font-size:13px;letter-spacing:-0.32px;color:#545c68;}
.rd-body .tut-step-bar .end svg{width:16px;height:16px;}

/* ============================================================
   튜토리얼 완료 팝업(정적) — node 11680:15922 (views/redesign/_tutorial-done.jsp)
   소개(.tut-modal) 재사용 + 버튼 2개 / 만세 캐릭터.
   ============================================================ */
.rd-body .tut-btns{display:flex;gap:10px;}
.rd-body .tut-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:16px 20px;
  border-radius:14px;font-family:var(--rd-round);font-weight:800;font-size:16px;letter-spacing:-0.32px;cursor:pointer;}
.rd-body .tut-btn.sec{background:rgba(0,173,247,.1);border:1px solid rgba(0,173,247,.4);color:#00adf7;
  padding-left:20px;padding-right:30px;}
.rd-body .tut-btn.sec svg{width:16px;height:16px;}
.rd-body .tut-btn.pri{background:#00adf7;color:#fff;padding-left:30px;padding-right:20px;}
.rd-body .tut-btn.pri img{width:7px;height:12px;}
/* 만세 캐릭터: 소개 캐릭터보다 살짝 크고 반전 없음 */
.rd-body .tut-char.cheer{width:321px;height:226px;}  /* 기본 scaleX(-1) 유지 — 시안: 깃발이 왼손 */

.rd-body .tut-step-coach.noarrow .arrow{display:none;}

.rd-body .tut-step-bar .prog .dot.done{background:#9fd8f5;}