.hlm1-page{
  background:#f3f2f6;
  min-height:100vh;
  padding-top:64px;
  padding-bottom:74px;
  font-family:'Public Sans','Noto Sans KR',sans-serif;
}

.hlm1-filter-wrap{
  padding:14px 16px 20px;
  border-bottom:1px solid #dde1eb;
}

.hlm1-filter-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:14px;
}

.hlm1-title{
  margin:0;
  font-size:21px;
  line-height:1.2;
  font-weight:800;
  color:#111;
  letter-spacing:-0.04em;
  padding-top:2px;
}

.hlm1-profile-btn{
  width:48px;
  height:48px;
  border-radius:50%;
  background:#2f2f31;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  flex:0 0 48px;
}

.hlm1-profile-btn .material-symbols-rounded{
  font-size:27px;
}

.hlm1-filter-box{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.hlm1-select{
  position:relative;
}

.hlm1-select-btn{
  width:100%;
  min-height:50px; 
  border:0;
  border-radius:17px;
  background:#fff;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  box-shadow:none;
}

.hlm1-select-left{
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
  flex:1 1 auto;
}

.hlm1-select-icon{
  width:26px;
  min-width:26px;
  text-align:center;
  font-size:22px;
  line-height:1;
  color:#444;
}

.hlm1-pin{
  font-size:23px;
  color:#333;
}

.hlm1-select-text{
  font-size:14px;
  line-height:1.45;
  font-weight:700;
  color:#333;
  letter-spacing:-0.03em;
  word-break:keep-all;
}

.hlm1-select-btn.is-placeholder .hlm1-select-text,
.hlm1-select-btn.is-placeholder .hlm1-select-icon,
.hlm1-select-btn.is-placeholder .hlm1-arrow{
  color:#c7c7ca;
}

.hlm1-arrow{
  font-size:25px;
  color:#333;
  margin-left:8px;
  flex-shrink:0;
  transition:transform .2s ease;
}

.hlm1-select.is-open .hlm1-arrow{
  transform:rotate(180deg);
}

.hlm1-select-dropdown{
  display:none;
  margin-top:6px;
  padding:6px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

.hlm1-select.is-open .hlm1-select-dropdown{
  display:block;
}

.hlm1-option{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:11px 12px;
  border-radius:10px;
  font-size:13px;
  line-height:1.45;
  font-weight:600;
  color:#333;
}

.hlm1-option.is-selected,
.hlm1-option:hover{
  background:#f3f2f6;
}

.hlm1-map-btn-wrap{
  padding-top:8px;
  text-align:center;
}

.hlm1-map-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:160px;
  height:52px;
  padding:0 18px;
  border:1.4px solid #3b3b3d;
  border-radius:17px;
  background:#fff;
  color:#2f2f31;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}

.hlm1-map-btn .material-symbols-rounded{
  font-size:22px;
}

.hlm1-list-wrap{
  background:#fff;
  padding:16px 0 0;
}

.hlm1-tab-row{
  display:flex;
  gap:8px;
  padding:0 12px 12px;
}

.hlm1-tab{
  flex:1 1 0;
  width:33.3333%;
  min-width:0;
  height:46px;
  padding:0 8px;
  border-radius:17px;
  border:1.3px solid #d7d7db;
  background:#fff;
  color:#c7c7cb;
  font-size:14px;
  font-weight:800;
  letter-spacing:-0.03em;
  white-space:nowrap;
}

.hlm1-tab em{
  font-style:normal;
  color:inherit;
}

.hlm1-tab.is-active{
  border-color:#2e2e30;
  color:#2e2e30;
}

.hlm1-tab.is-active em{
  color:#ff6e6e;
}

.hlm1-member-list{
  border-top:1px solid #ececf0;
}

.hlm1-member-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px 16px;
  border-bottom:1px solid #e8ebf5;
  background:#fff;
}

.hlm1-member-left{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 auto;
}

.hlm1-avatar-wrap{
  position:relative;
  width:50px;
  min-width:50px;
}

.hlm1-avatar{
  width:50px;
  height:50px;
  border-radius:50%;
  background:#efefef;
  overflow:hidden;
}

.hlm1-avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hlm1-status{
  position:absolute;
  top:-2px;
  right:-2px;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid #fff;
}

.hlm1-status.on{
  background:#54d336;
}

.hlm1-status.off{
  background:#bfbfc4;
}

.hlm1-member-info{
  min-width:0;
}

.hlm1-name-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:5px;
}

.hlm1-badge{
  width:27px;
  height:27px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:800;
  color:#fff;
  line-height:1;
  flex:0 0 27px;
}

.hlm1-badge.fire{ background:#f05b57; }
.hlm1-badge.wood{ background:#3fae5c; }
.hlm1-badge.earth{ background:#f0c400; color:#222; }
.hlm1-badge.gold{ background:#c9ccd3; color:#222; }
.hlm1-badge.water{ background:#4a4a4d; }

.hlm1-name{
  font-size:17px;
  line-height:1.1;
  font-weight:700;
  color:#333;
  letter-spacing:-0.03em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hlm1-meta-row{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}

.hlm1-age{
  font-size:12px;
  color:#333;
  line-height:1.2;
}

.hlm1-gender{
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:12px;
  line-height:1.2;
}

.hlm1-gender .material-symbols-rounded{
  font-size:15px;
}

.hlm1-gender.male{
  color:#9fb8dc;
}

.hlm1-gender.female{
  color:#f19da3;
}

.hlm1-member-right{
  flex:0 0 auto;
}

.hlm1-chat-btn{
  width:118px;
  height:50px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

.hlm1-chat-btn .material-symbols-rounded{
  font-size:18px;
}

.hlm1-chat-btn.is-dark{
  background:#333336;
  color:#fff;
}

.hlm1-chat-btn.is-disabled{
  background:#d5d5d8;
  color:#fff;
  pointer-events:none;
}

@media (max-width: 360px){
  .hlm1-page{
    padding-top:60px;
  }

  .hlm1-filter-wrap{
    padding:12px 14px 18px;
  }

  .hlm1-title{
    font-size:20px;
  }

  .hlm1-profile-btn{
    width:44px;
    height:44px;
    flex-basis:44px;
  }

  .hlm1-profile-btn .material-symbols-rounded{
    font-size:24px;
  }

  .hlm1-select-btn{
    min-height:50px;
    padding:10px 12px;
  }

  .hlm1-select-text{
    font-size:13px;
  }

  .hlm1-map-btn{
    height:48px;
    min-width:148px;
    font-size:12px;
  }

  .hlm1-tab-row{
    gap:6px;
    padding:0 14px 14px;
  }

  .hlm1-tab{
    height:50px;
    font-size:11px;
    padding:0 6px;
  }

  .hlm1-member-card{
    padding:14px 14px;
  }

  .hlm1-avatar-wrap,
  .hlm1-avatar{
    width:46px;
    height:46px;
    min-width:46px;
  }

  .hlm1-name{
    font-size:16px;
  }

  .hlm1-chat-btn{
    width:108px;
    height:46px;
    font-size:12px;
  }
}










.hlm4-page{
  min-height:100vh;
  background:#f3f2f6;
  padding-top:50px;
  padding-bottom:74px;
  font-family:'Public Sans','Noto Sans KR',sans-serif;
}

.hlm4-profile-section{
  padding:28px 20px 30px;
  border-bottom:1px solid #d9dde7;
}

.hlm4-profile-photo-wrap{
  position:relative;
  width:112px;
  margin:0 auto 22px;
}

.hlm4-profile-photo{
  width:112px;
  height:112px;
  border-radius:50%;
  background:#f7f7f4;
  border:1px solid #ecece8;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hlm4-profile-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hlm4-profile-placeholder{
  position:relative;
  width:64px;
  height:64px;
}

.hlm4-face-eye{
  position:absolute;
  top:15px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c7c7c7;
}

.hlm4-face-eye.left{
  left:12px;
}

.hlm4-face-eye.right{
  right:12px;
}

.hlm4-face-mouth{
  position:absolute;
  left:50%;
  bottom:12px;
  width:28px;
  height:14px;
  border-bottom:4px solid #bfbfbf;
  border-radius:0 0 20px 20px;
  transform:translateX(-50%);
}

.hlm4-camera-btn{
  position:absolute;
  right:-2px;
  bottom:4px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#bdbdbd;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.hlm4-camera-btn .material-symbols-rounded{
  font-size:20px;
}

.hlm4-file-input{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  border:0;
  clip:rect(0,0,0,0);
}

.hlm4-intro-box{
  display:flex;
  justify-content:center;
}

.hlm4-intro-bubble{
  position:relative;
  width:100%;
  max-width:320px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
  padding:0 52px 0 16px;
  min-height:46px;
  display:flex;
  align-items:center;
}

.hlm4-intro-bubble::before{
  content:"";
  position:absolute;
  top:-7px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:14px;
  height:14px;
  background:#fff;
  border-radius:2px;
}

.hlm4-intro-input{
  width:100%;
  height:46px;
  border:0;
  background:transparent;
  outline:none;
  font-size:14px;
  font-weight:500;
  color:#333;
  padding:0;
}

.hlm4-intro-input::placeholder{
  color:#666;
}

.hlm4-intro-edit-btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:#f4f4f4;
  color:#666;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hlm4-intro-edit-btn .material-symbols-rounded{
  font-size:20px;
}

.hlm4-preference-section{
  padding:26px 20px 34px;
}

.hlm4-title{
  margin:0 0 18px;
  font-size:22px;
  line-height:1.2;
  font-weight:800;
  color:#111;
  letter-spacing:-0.04em;
}

.hlm4-select-group{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.hlm4-select{
  position:relative;
}

.hlm4-select-btn{
  width:100%;
  min-height:50px;
  border:1px solid #ededed;
  border-radius:12px;
  background:#fff;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  box-shadow:0 2px 8px rgba(0,0,0,0.03);
}

.hlm4-select-left{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
}

.hlm4-select-icon{
  width:20px;
  min-width:20px;
  text-align:center;
  font-size:18px;
  line-height:1;
  color:#444;
}

.hlm4-select-text{
  font-size:13px;
  line-height:1.45;
  font-weight:600;
  color:#333;
  letter-spacing:-0.03em;
  word-break:keep-all;
}

.hlm4-select-btn.is-placeholder .hlm4-select-text,
.hlm4-select-btn.is-placeholder .hlm4-select-icon,
.hlm4-select-btn.is-placeholder .hlm4-arrow{
  color:#c7c7ca;
}

.hlm4-arrow{
  font-size:22px;
  color:#333;
  margin-left:8px;
  flex-shrink:0;
  transition:transform .2s ease;
}

.hlm4-select.is-open .hlm4-arrow{
  transform:rotate(180deg);
}

.hlm4-select-dropdown{
  display:none;
  margin-top:6px;
  padding:6px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
  border:1px solid #efefef;
}

.hlm4-select.is-open .hlm4-select-dropdown{
  display:block;
}

.hlm4-option{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:10px 12px;
  border-radius:10px;
  font-size:13px;
  line-height:1.45;
  font-weight:600;
  color:#333;
}

.hlm4-option.is-selected,
.hlm4-option:hover{
  background:#f3f2f6;
}

.hlm4-check-row{
  padding-top:24px;
  display:flex;
  justify-content:center;
}

.hlm4-check-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}

.hlm4-check-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.hlm4-check-box{
  width:18px;
  height:18px;
  border:1.5px solid #d1d1d1;
  border-radius:4px;
  background:#fff;
  position:relative;
  flex:0 0 18px;
}

.hlm4-check-box::after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:10px;
  border:solid #333;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  opacity:0;
}

.hlm4-check-input:checked + .hlm4-check-box::after{
  opacity:1;
}

.hlm4-check-text{
  font-size:14px;
  font-weight:600;
  color:#444;
  letter-spacing:-0.02em;
}

@media (max-width: 360px){
  .hlm4-profile-section{
    padding:24px 16px 26px;
  }

  .hlm4-preference-section{
    padding:22px 16px 30px;
  }

  .hlm4-profile-photo-wrap{
    width:100px;
  }

  .hlm4-profile-photo{
    width:100px;
    height:100px;
  }

  .hlm4-title{
    font-size:20px;
  }

  .hlm4-intro-bubble{
    min-height:44px;
    padding:0 50px 0 14px;
  }

  .hlm4-intro-input{
    height:44px;
    font-size:13px;
  }

  .hlm4-select-btn{
    min-height:48px;
    padding:11px 13px;
  }

  .hlm4-select-text,
  .hlm4-option{
    font-size:12px;
  }

  .hlm4-check-text{
    font-size:13px;
  }
}











.hlm2-page{
  min-height:100vh;
  background:#f3f2f6;
  padding-top:50px;
  padding-bottom:78px;
  font-family:'Public Sans','Noto Sans KR',sans-serif;
  position:relative;
}

/* 내부 상단 바 */
.hlm2-topbar{
  position:fixed;
  top:50px;
  left:0;
  right:0;
  z-index:100;
  height:56px;
  background:#f3f2f6;
  border-bottom:1px solid #dde1eb;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hlm2-topbar-title{
  margin:0;
  font-size:17px;
  font-weight:800;
  color:#111;
  letter-spacing:-0.03em;
  line-height:1;
}

.hlm2-back-btn{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#333;
  text-decoration:none;
}

.hlm2-back-btn .material-symbols-rounded{
  font-size:20px;
}

.hlm2-block-btn{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:32px;
  padding:0 10px;
  border:1px solid #ff6e6e;
  border-radius:8px;
  background:#fff;
  color:#ff5c5c;
  font-size:12px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
}

.hlm2-block-btn .material-symbols-rounded{
  font-size:15px;
}

/* 채팅 영역 */
.hlm2-chat-wrap{
  padding:74px 0 110px;
}

.hlm2-chat-list{
  padding:0 22px 20px;
}

.hlm2-msg-row{
  margin-bottom:28px;
}

.hlm2-msg-row:last-child{
  margin-bottom:0;
}

/* 상대 프로필 */
.hlm2-msg-user{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  padding-left:8px;
}

.hlm2-msg-avatar-wrap{
  position:relative;
  width:30px;
  height:30px;
  flex:0 0 30px;
}

.hlm2-msg-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  overflow:hidden;
  background:#ececec;
}

.hlm2-msg-avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hlm2-msg-status{
  position:absolute;
  top:-1px;
  right:-1px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#58d63d;
  border:1.5px solid #fff;
}

.hlm2-msg-name{
  font-size:14px;
  font-weight:700;
  color:#333;
  line-height:1.2;
}

/* 말풍선 공통 */
.hlm2-msg-bubble-wrap{
  display:flex;
  align-items:flex-end;
  gap:8px;
}

.hlm2-msg-bubble{
  max-width:68%;
  padding:14px 18px;
  border-radius:12px;
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  word-break:break-word;
  overflow-wrap:break-word;
  box-shadow:0 3px 10px rgba(0,0,0,0.06);
}

.hlm2-msg-bubble--other{
  background:#3f6fdb;
  color:#fff;
  border-top-left-radius:4px;
}

.hlm2-msg-bubble--me{
  background:#fff;
  color:#333;
  border-top-right-radius:4px;
}

.hlm2-msg-time{
  font-size:11px;
  color:#9a9aa2;
  line-height:1;
  white-space:nowrap;
}

/* 내 메시지 */
.hlm2-msg-row--me .hlm2-msg-bubble-wrap{
  justify-content:flex-end;
}

.hlm2-msg-meta{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.hlm2-msg-meta--me{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  padding-bottom:2px;
}

.hlm2-msg-read{
  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:-0.02em;
}

.hlm2-msg-read.is-read{
  color:#9a9aa2;
}

.hlm2-msg-read.is-unread{
  color:#ff7a7a;
}

/* TIP 버튼 */
.hlm2-tip-btn{
  position:fixed;
  right:20px;
  bottom:138px;
  z-index:40;
  width:54px;
  height:54px;
  border:0;
  border-radius:50%;
  background:#f4d655;
  box-shadow:0 6px 14px rgba(0,0,0,0.14);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  overflow:visible;
}

.hlm2-tip-btn img{
  width:30px;
  height:auto;
  object-fit:contain;
  display:block;
}

.hlm2-tip-label{
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  min-width:28px;
  height:16px;
  padding:0 6px;
  border-radius:999px;
  background:#4b2ca5;
  color:#fff;
  font-size:9px;
  font-weight:800;
  line-height:16px;
  text-align:center;
}

/* 입력창 */
.hlm2-inputbar{
  position:fixed;
  left:0;
  right:0;
  bottom:48px;
  z-index:50;
  padding:0 22px 14px;
}

.hlm2-inputbox{
  position:relative;
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0 52px 0 18px;
  background:#fff;
  border-radius:24px;
  box-shadow:0 3px 10px rgba(0,0,0,0.05);
}

.hlm2-chat-input{
  width:100%;
  height:48px;
  border:0;
  background:transparent;
  outline:none;
  font-size:14px;
  color:#333;
}

.hlm2-chat-input::placeholder{
  color:#9a9aa2;
}

.hlm2-send-btn{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:#2f2f31;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hlm2-send-btn .material-symbols-rounded{
  font-size:24px;
  line-height:1;
}

/* 작은 화면 */
@media (max-width:360px){
  .hlm2-back-btn{
    left:14px;
  }

  .hlm2-block-btn{
    right:14px;
    padding:0 8px;
    font-size:11px;
  }

  .hlm2-chat-list{
    padding:0 16px 16px;
  }

  .hlm2-msg-bubble{
    max-width:74%;
    padding:12px 15px;
    font-size:13px;
  }

  .hlm2-inputbar{
    padding:0 16px 12px;
  }

  .hlm2-tip-btn{
    right:16px;
    bottom:112px;
    width:50px;
    height:50px;
  }

  .hlm2-tip-btn img{
    width:28px;
  }
}


/* TIP 모달 */
.hlm2-tip-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
}

.hlm2-tip-modal.is-open{
  display:block;
}

.hlm2-tip-modal__dim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.46);
}

.hlm2-tip-modal__dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:240px;
  max-width:calc(100vw - 40px);
}

.hlm2-tip-modal__badge{
  position:relative;
  width:66px;
  margin:0 auto -18px;
  z-index:2;
  text-align:center;
}

.hlm2-tip-modal__badge img{
  display:block;
  width:66px;
  height:66px;
  margin:0 auto;
  object-fit:contain;
}

.hlm2-tip-modal__badge-label{
  position:absolute;
  left:50%;
  bottom:-2px;
  transform:translateX(-50%);
  min-width:38px;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  background:#4b2ca5;
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:22px;
  text-align:center;
}

.hlm2-tip-modal__content{
  background:#fff;
  border-radius:24px;
  box-shadow:0 16px 30px rgba(0,0,0,0.16);
  padding:54px 18px 18px;
  text-align:center;
}

.hlm2-tip-modal__text{
  margin:0;
  color:#333;
  font-size:14px;
  line-height:1.6;
  letter-spacing:-0.03em;
  word-break:keep-all;
}

.hlm2-tip-modal__text strong{
  font-size:15px;
  font-weight:800;
  color:#333;
}

.hlm2-tip-modal__confirm{
  width:100%;
  height:42px;
  margin-top:18px;
  border:1px solid #bfc3cb;
  border-radius:10px;
  background:#fff;
  color:#333;
  font-size:16px;
  font-weight:700;
}

@media (max-width:360px){
  .hlm2-tip-modal__dialog{
    width:228px;
  }

  .hlm2-tip-modal__content{
    padding:50px 16px 16px;
    border-radius:22px;
  }

  .hlm2-tip-modal__text{
    font-size:13px;
  }

  .hlm2-tip-modal__text strong{
    font-size:14px;
  }

  .hlm2-tip-modal__confirm{
    height:40px;
    font-size:15px;
  }
}











.hlm-map-page{
  height:100vh;
  background:#fff;
  position:relative;
  overflow:hidden;
  font-family:'Public Sans','Noto Sans KR',sans-serif;
}

.hlm-map-topbar{
  position:fixed;
  top:50px;
  left:0;
  right:0;
  height:52px;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-bottom:1px solid #e5e7ef;
}

.hlm-map-title{
  margin:0;
  font-size:17px;
  font-weight:800;
  color:#111;
  letter-spacing:-0.03em;
  line-height:1;
}

.hlm-map-back{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#333;
  text-decoration:none;
}

.hlm-map-back .material-symbols-rounded{
  font-size:20px;
}

.hlm-map-container{
  position:absolute;
  top:102px;
  left:0;
  right:0;
  bottom:0;
  overflow:hidden;
  background:#ddd;
}

.hlm-map-marker{
  position:absolute;
  transform:translate(-50%, -100%);
}

.hlm-map-bubble{
  position:relative;
  display:inline-block;
  padding:4px;
  border-radius:999px;
  background:#0f6fff;
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
}

.hlm-map-bubble-inner{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:0 10px 0 12px;
  border-radius:999px;
  background:#f6f6f6;
}

.hlm-map-profile{
  width:38px;
  height:38px;
  border-radius:50%;
  overflow:hidden;
  background:#e9e9e9;
  flex:0 0 38px;
}

.hlm-map-profile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hlm-map-name{
  font-size:17px;
  font-weight:700;
  color:#333;
  line-height:1;
  letter-spacing:-0.03em;
  white-space:nowrap;
}

.hlm-map-chat{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 20px;
  border:0;
  border-radius:999px;
  background:#353538;
  color:#fff;
  font-size:16px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  letter-spacing:-0.03em;
  text-decoration:none;
}

 

@media (max-width:480px){
  .hlm-map-topbar{
    height:50px;
  }

  .hlm-map-title{
    font-size:16px;
  }

  .hlm-map-container{
    top:100px;
  }

  .hlm-map-bubble{
    padding:3px;
  }

  .hlm-map-bubble-inner{
    gap:10px;
    min-height:48px;
    padding:0 9px 0 10px;
  }

  .hlm-map-profile{
    width:32px;
    height:32px;
    flex:0 0 32px;
  }

  .hlm-map-name{
    font-size:14px;
  }

  .hlm-map-chat{
    height:34px;
    padding:0 15px;
    font-size:14px;
    line-height:1;
  }

 
}

 

.hlm-map-empty{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:20;
  padding:14px 18px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  font-size:14px;
  color:#222;
  white-space:nowrap;
}

.hlm-map-notice{
  position:fixed;
  left:16px;
  right:16px;
  bottom:20px;
  z-index:200;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(0,0,0,.78);
  color:#fff;
  font-size:13px;
  line-height:1.5;
}

.hlm-map-chat{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 20px;
  border:0;
  border-radius:999px;
  background:#353538;
  color:#fff;
  font-size:16px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  letter-spacing:-0.03em;
  text-decoration:none;
}

.hlm-map-member-panel{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:30;
  background:#fff;
  border-top:1px solid #e5e7ef;
  border-radius:20px 20px 0 0;
  box-shadow:0 -8px 20px rgba(0,0,0,.08);
  overflow:hidden;
  transition:height .25s ease;
  height:38vh;
}

.hlm-map-member-panel.is-collapsed{
  height:64px;
}

.hlm-map-member-head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px 10px;
  background:#fff;
  border:0;
  cursor:pointer;
  text-align:left;
}

.hlm-map-member-head-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.hlm-map-member-head-left strong{
  font-size:14px;
  font-weight:700;
  color:#111;
}

.hlm-map-member-head-right{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:#111;
}

.hlm-map-member-drag{
  display:block;
  width:36px;
  height:4px;
  border-radius:999px;
  background:#d7dbe3;
}

.hlm-map-member-arrow{
  font-size:14px;
  color:#666;
  transition:transform .25s ease;
}

.hlm-map-member-panel.is-collapsed .hlm-map-member-arrow{
  transform:rotate(180deg);
}

.hlm-map-member-list{
  height:calc(38vh - 56px);
  overflow-y:auto;
  padding:0 12px 12px;
}

.hlm-map-member-panel.is-collapsed .hlm-map-member-list{
  display:none;
}

.hlm-map-member-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 8px;
  text-decoration:none;
  color:#111;
  border-bottom:1px solid #f0f0f0;
}

.hlm-map-member-thumb{
  width:44px;
  height:44px;
  border-radius:50%;
  overflow:hidden;
  background:#eee;
  flex:0 0 44px;
}

.hlm-map-member-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hlm-map-member-info{
  min-width:0;
  flex:1 1 auto;
}

.hlm-map-member-name{
  font-size:14px;
  font-weight:700;
  color:#111;
}

.hlm-map-member-meta{
  margin-top:4px;
  font-size:12px;
  color:#777;
}

.hlm-map-member-empty{
  padding:20px 10px;
  text-align:center;
  font-size:13px;
  color:#777;
}

@media (max-width:480px){
  .hlm-map-chat{
    height:34px;
    padding:0 15px;
    font-size:14px;
    line-height:1;
  }

  .hlm-map-member-panel{
    height:34vh;
  }

  .hlm-map-member-panel.is-collapsed{
    height:60px;
  }

  .hlm-map-member-list{
    height:calc(34vh - 52px);
  }
}











.hlm4-btn-wrap{
  margin-top:24px;
  text-align:center;
}

.hlm4-save-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  height:48px;
  padding:0 24px;
  border:0;
  border-radius:24px;
  background:#111;
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

.hlm4-save-btn:disabled{
  opacity:.6;
  cursor:default;
}



 

.hlm1-empty{
  padding:30px 20px;
  text-align:center;
  color:#888;
}

.hlm1-list-loading{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:18px 0 22px;
  color:#666;
  font-size:14px;
}

.hlm1-loading-spinner{
  width:18px;
  height:18px;
  border:2px solid rgba(0,0,0,.12);
  border-top-color:#222;
  border-radius:50%;
  animation:hlm1Spin .8s linear infinite;
}

.hlm1-list-end{
  padding:18px 0 24px;
  text-align:center;
  color:#999;
  font-size:13px;
}

@keyframes hlm1Spin{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}








.ai-model-box {
    border: 1px solid #ddd;
    border-radius: 14px;
    padding: 16px;
    background: #fff;
    min-height: 420px;
}

.ai-model-premium {
    border-color: #5641CA;
}

.ai-model-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.ai-result-box {
    min-height: 320px;
    font-size: 14px;
    line-height: 1.7;
}




















/* PC에서도 모바일 앱 화면처럼 보기 */
@media (min-width:768px){

  :root{
    --app-w:430px;
    --app-half:215px;
    --side-w:280px;
    --side-gap:20px;
  }

  html,
  body{
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    overflow-x:hidden;
    background:#eef0f5 !important;
  }

  body{
    position:relative;
  }

  body::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:var(--app-w);
    min-height:100%;
    height:100%;
    transform:translateX(-50%);
    background:#fff;
    box-shadow:0 0 30px rgba(0,0,0,.08);
    z-index:-1;
  }

  *,
  *::before,
  *::after{
    box-sizing:border-box;
  }

  #mobile_app_frame{
    width:var(--app-w);
    max-width:var(--app-w);
    min-height:100vh;
    margin:0 auto;
    background:transparent !important;
    position:relative;
    overflow:visible;
  }

  header.page-header,
  header.page-header.navbar,
  header.page-header.navbar.fixed-top,
  header.page-header.navbar.fixed-top.w-100{
    width:var(--app-w) !important;
    max-width:var(--app-w) !important;
    min-width:0 !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    padding-left:12px !important;
    padding-right:12px !important;
    box-sizing:border-box !important;
  }

  header.page-header .navbar-brand{
    display:block !important;
  }

  header.page-header .sidebar-trigger,
  header.page-header .sidebar-trigger-lg-down,
  header.page-header .nav-item.d-none.d-lg-flex,
  header.page-header .nav-item.d-lg-none{
    display:none !important;
  }

  header.page-header.app-header .sidebar-trigger-lg-down {
    display:flex !important;
  }

  .page-sidebar,
  aside.page-sidebar{
    display:block !important;
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    left:calc(50% - var(--app-half) - var(--side-w) - var(--side-gap)) !important;
    width:var(--side-w) !important;
    max-width:var(--side-w) !important;
    transform:none !important;
    z-index:10000 !important;
  }

  .sidebar-close{
    display:none !important;
  }

  .page,
  .page-content,
  .content{
    width:100% !important;
    max-width:var(--app-w) !important;
    margin-left:0 !important;
    margin-right:0 !important;
    background:transparent !important;
  }

  .container,
  .container-fluid{
    width:100% !important;
    max-width:var(--app-w) !important;
  }

  #mobile_app_frame .col-md-8,
  #mobile_app_frame .col-lg-5,
  #mobile_app_frame .col-xl-4{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }

  .mobile{
    display:block !important;
  }

  #quick_bottom{
    display:flex !important;
    width:var(--app-w) !important;
    max-width:var(--app-w) !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    z-index:9998 !important;
  }

  .copy_link,
  footer{
    width:100% !important;
    max-width:var(--app-w) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }






  header.page-header,
header.page-header.navbar,
header.page-header.navbar.fixed-top,
header.page-header.navbar.fixed-top.w-100{
    margin-left:-8px !important;
}

#quick_bottom{
    margin-left:-8px !important;
}

}



/* Community posts need a desktop-sized canvas so the HTML editor toolbar,
   including its image upload control, is never cut off. */
@media (min-width:768px){
  body:has(#bo_w){
    --app-w:min(760px, calc(100vw - 32px));
    --app-half:calc((100vw - 32px) / 2);
  }

  body:has(#bo_w)::before{
    width:var(--app-w);
  }

  body:has(#bo_w) .page-sidebar,
  body:has(#bo_w) aside.page-sidebar{
    display:none !important;
  }

  body:has(#bo_w) #bo_w #fwrite{
    width:100% !important;
    max-width:none;
  }

  body:has(#bo_w) #bo_w .wr_content,
  body:has(#bo_w) #bo_w .smarteditor2,
  body:has(#bo_w) #bo_w .se2_inputarea,
  body:has(#bo_w) #bo_w iframe{
    max-width:100% !important;
  }
}

/* 모바일에서 page-sidebar 초기 깜빡임 방지 */
@media (max-width: 767.98px){

  body:not(.page-sidebar-in) .page-sidebar,
  body:not(.page-sidebar-in) aside.page-sidebar{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateX(-110%) !important;
    transition:none !important;
  }

  body.page-sidebar-in .page-sidebar,
  body.page-sidebar-in aside.page-sidebar{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateX(0) !important;
  }

  body:not(.page-sidebar-in) .sidebar-close,
  body:not(.page-sidebar-in) .sidebar-close a{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
  }
}







/*====================================
  책소개 버튼
====================================*/

.book_intro_btn{

    display:flex;

    align-items:center;

    width:100%;

    padding:12px 14px;

    background:#ffffff;

    border-radius:18px;

    text-decoration:none;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

    border:1px solid #D9E7F8;

    transition:.25s;

}


.book_intro_btn:active{

    transform:scale(.98);

}


/*====================================
아이콘
====================================*/

.book_intro_icon{

    width:60px;

    height:60px;

    border-radius:50%;

    overflow:hidden;

    flex:none;

}


.book_intro_icon img{

    width:100%;

    display:block;

}


/*====================================
텍스트
====================================*/

.book_intro_text{

    flex:1;

    margin-left:14px;

}


.book_intro_sub{

    display:block;

    font-size:11px;

    color:#6D9FD4;

    margin-bottom:2px;

}


.book_intro_title{

    display:block;

    font-size:17px;

    font-weight:700;

    color:#1E407C;

    letter-spacing:-0.4px;

}


/*====================================
화살표
====================================*/

.book_intro_arrow{

    font-size:24px;

    color:#7AA9E3;

    margin-left:8px;

}











<style>

/* ==============================
   책 미리보기 Modal
============================== */

#bookPreviewModal {
    --bs-modal-bg: transparent;
}

/* PC에서도 너무 넓어지지 않게 */
.book-preview-dialog {
    max-width: 620px;
    width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
}

.book-preview-content {
    background: #111;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

.book-preview-body {
    padding: 0;
    position: relative;
    overflow: hidden;
}


/* ==============================
   Swiper
============================== */

.bookSwiper {
    width: 100%;
    height: 85vh;
    max-height: 900px;
    background: #111;
}

.bookSwiper .swiper-wrapper {
    align-items: center;
}

.bookSwiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bookSwiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;

    -webkit-user-select: none;
    user-select: none;

    -webkit-user-drag: none;
}


/* ==============================
   닫기 버튼
============================== */

.book-preview-close {
    position: absolute;
    right: 12px;
    top: 12px;

    z-index: 100;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(0,0,0,.55);
    color: #fff;

    font-size: 30px;
    line-height: 38px;

    cursor: pointer;
}


/* ==============================
   좌우 화살표
============================== */

.bookSwiper .swiper-button-prev,
.bookSwiper .swiper-button-next {
    color: #fff;

    width: 42px;
    height: 54px;

    background: rgba(0,0,0,.35);
}

.bookSwiper .swiper-button-prev {
    left: 0;
    border-radius: 0 10px 10px 0;
}

.bookSwiper .swiper-button-next {
    right: 0;
    border-radius: 10px 0 0 10px;
}

.bookSwiper .swiper-button-prev:after,
.bookSwiper .swiper-button-next:after {
    font-size: 25px;
}


/* ==============================
   하단 pagination
============================== */

.bookSwiper .swiper-pagination {
    bottom: 18px !important;
}

.bookSwiper .swiper-pagination-bullet {
    background: #fff;
    opacity: .4;
}

.bookSwiper .swiper-pagination-bullet-active {
    opacity: 1;
}


/* 페이지 번호 */
.book-slide-count {
    position: absolute;

    right: 18px;
    bottom: 14px;

    z-index: 20;

    color: #fff;
    font-size: 13px;

    padding: 4px 10px;

    border-radius: 20px;

    background: rgba(0,0,0,.45);
}


/* ==============================
   모바일
============================== */

@media (max-width: 640px) {

    .book-preview-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .book-preview-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .book-preview-body {
        height: 100%;
    }

    .bookSwiper {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: none;
    }

    .book-preview-close {
        right: 12px;
        top: 12px;
    }

}














/* ============================================================
   일타명리 AI 어드바이스
   모바일 전용 / 최대 420px
   모든 텍스트 최소 12px 기준
   ============================================================ */

.diary-advice,
.diary-advice * {
	box-sizing:border-box;
}

.diary-advice {
	width:100%;
	max-width:420px;
	margin:0 auto;
	color:#29252b;
	font-size:14px;
	line-height:1.55;
	letter-spacing:-0.25px;
}

.diary-advice img {
	display:block;
	max-width:100%;
}

.diary-advice a {
	text-decoration:none;
}


/* ============================================================
   공통 카드
   ============================================================ */

.da-card {
	width:100%;
	background:#fff;
	border:1px solid #f1e6eb;
	border-radius:16px;
	box-shadow:0 5px 18px rgba(65,45,55,.045);
}

.da-section {
	margin-top:10px;
}

.da-section-head {
	margin-bottom:10px;
}

.da-section-title {
	display:flex;
	align-items:center;
	gap:7px;
	margin:0;
	color:#29252b;
	font-size:16px;
	font-weight:800;
	line-height:1.35;
}

.da-section-title i {
	color:#f25f83;
	font-size:18px;
}

.da-section-desc {
	margin:5px 0 0;
	color:#8f878e;
	font-size:12px;
	line-height:1.5;
}


/* ============================================================
   상단
   ============================================================ */

.da-page-head {
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:8px;
	padding:0 2px 4px;
}

.da-page-title {
	margin:0;
	font-size:22px;
	font-weight:900;
	line-height:1.2;
	letter-spacing:-0.7px;
}

.da-page-desc {
	margin:5px 0 0;
	color:#908990;
	font-size:12px;
	line-height:1.5;
}

.da-page-actions,
.da-bottom-actions {
	display:flex;
	align-items:center;
	gap:6px;
}

.da-page-actions {
	flex-shrink:0;
}

.da-bottom-actions {
	justify-content:center;
	margin-top:12px;
}

.da-diary-btn {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	flex-shrink:0;
	min-height:36px;
	padding:6px 10px;
	border:1px solid #f3ccd7;
	border-radius:10px;
	background:#fff8fa;
	color:#e85076;
	font-size:12px;
	font-weight:700;
}

.da-diary-btn i {
	font-size:14px;
}

.da-memo-btn {
	border-color:#dfd3f6;
	background:#faf7ff;
	color:#8262c8;
}


/* ============================================================
   오늘 요약
   ============================================================ */

.da-hero {
	position:relative;
	overflow:hidden;
	min-height:195px;
	padding:16px;
	border-color:#f4d0da;
	background:linear-gradient(
		145deg,
		#fff7fa 0%,
		#fff 62%,
		#f5fff8 100%
	);
}

.da-hero-date {
	position:relative;
	z-index:2;
	color:#3d373e;
	font-size:13px;
	font-weight:800;
}

.da-hero-title {
	position:relative;
	z-index:2;
	margin:9px 92px 8px 0;
	color:#eb577b;
	font-size:22px;
	font-weight:900;
	line-height:1.3;
	letter-spacing:-0.8px;
}

.da-hero-text {
	position:relative;
	z-index:2;
	margin:0 90px 12px 0;
	color:#504950;
	font-size:13px;
	line-height:1.65;
}

.da-mascot {
	position:absolute;
	z-index:1;
	right:6px;
	bottom:30px;
	width:100px;
	height:112px;
	object-fit:contain;
}

.da-tags {
	position:relative;
	z-index:3;
	display:flex;
	flex-wrap:wrap;
	gap:4px;
	padding-right:50px;
}

.da-tag {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:25px;
	padding:3px 7px;
	border-radius:7px;
	background:#f2f0f1;
	color:#4a4549;
	font-size:12px;
	font-weight:800;
	line-height:1.25;
	white-space:nowrap;
}

.da-tag.pink {
	background:#f15d83;
	color:#fff;
}

.da-tag.dark {
	background:#292629;
	color:#fff;
}


/* ============================================================
   AI 한마디
   ============================================================ */

.da-ai {
	padding:15px;
	background:linear-gradient(
		180deg,
		#fff 0%,
		#fff9fb 100%
	);
}

.da-ai-text {
	margin-top:9px;
	padding:13px;
	border-radius:13px;
	background:#fff;
	color:#4d464d;
	font-size:13px;
	line-height:1.8;
}

.da-ai-text strong {
	color:#e95278;
	font-weight:800;
}

.da-ai-text .da-ai-section-title {
	display:inline-block;
	color:#393039;
	font-size:15px;
	font-weight:800;
	line-height:1.5;
}


/* ============================================================
   오늘의 오행 영향 분석
   ============================================================ */

.da-element-section {
	padding:14px;
}


/* 오늘 천간 / 지지 */

.da-today-elements {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:7px;
	margin-top:9px;
}

.da-today-element {
	display:flex;
	align-items:center;
	min-width:0;
	padding:9px;
	border:1px solid #eee9eb;
	border-radius:12px;
	background:#fcfbfc;
}

.da-element-badge {
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 36px;
	width:36px;
	height:36px;
	border-radius:50%;
	color:#fff;
	font-size:13px;
	font-weight:900;
}

.da-element-badge.wood,
.da-mini-element.wood {
	background:#43bd66;
}

.da-element-badge.fire,
.da-mini-element.fire {
	background:#f06a64;
}

.da-element-badge.earth,
.da-mini-element.earth {
	background:#e6a728;
}

.da-element-badge.metal,
.da-mini-element.metal {
	background:#aeb4be;
}

.da-element-badge.water,
.da-mini-element.water {
	background:#528fe3;
}

.da-element-info {
	min-width:0;
	margin-left:8px;
}

.da-element-info strong {
	display:block;
	color:#332e33;
	font-size:13px;
	font-weight:800;
	line-height:1.3;
	white-space:nowrap;
}

.da-element-info small {
	display:block;
	margin-top:2px;
	color:#8f888e;
	font-size:12px;
	line-height:1.3;
	white-space:nowrap;
}


/* ============================================================
   레이더 그래프
   ============================================================ */

.da-radar-wrap {
	margin-top:12px;
	padding:11px 8px 8px;
	border:1px solid #f0e9ec;
	border-radius:13px;
	background:#fffafb;
}

.da-radar-title-row {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	padding:0 3px;
}

.da-radar-title {
	font-size:13px;
	font-weight:800;
}

.da-chart-legend {
	display:flex;
	align-items:center;
	gap:8px;
	color:#777077;
	font-size:12px;
}

.da-chart-legend-btn {
	display:flex;
	align-items:center;
	gap:4px;
	padding:3px 4px;
	border:0;
	border-radius:6px;
	background:transparent;
	color:inherit;
	font:inherit;
	white-space:nowrap;
	cursor:pointer;
	transition:opacity .2s ease, background-color .2s ease;
}

.da-chart-legend-btn:hover,
.da-chart-legend-btn:focus-visible {
	background:#f3edef;
	outline:none;
}

.da-chart-legend-btn.is-off {
	opacity:.4;
	text-decoration:line-through;
}

.da-legend-dot {
	display:inline-block;
	width:8px;
	height:8px;
	border-radius:50%;
}

.da-legend-dot.base {
	background:#577bd6;
}

.da-legend-dot.today {
	background:#f15d83;
}

.da-radar-chart {
	display:block;
	width:100%;
	max-width:300px;
	height:auto;
	margin:4px auto 0;
}

.da-radar-series {
	transform:scale(0);
	transform-origin:0 0;
	opacity:0;
	transition:transform 2.2s cubic-bezier(.22,.61,.36,1), opacity .8s ease;
	will-change:transform, opacity;
}

.da-radar-chart.is-drawn .da-radar-series {
	transform:scale(1);
	opacity:1;
}

.da-radar-chart.is-drawn .da-radar-series-today {
	transition-delay:.35s;
}

.da-radar-chart.is-drawn .da-radar-series.is-hidden {
	transform:scale(.92);
	opacity:0;
	pointer-events:none;
	transition-delay:0s;
}

.da-radar-series-base polygon {
	fill:rgba(87,123,214,.2);
	stroke:#577bd6;
	stroke-width:2.5;
	stroke-dasharray:5 3;
}

.da-radar-series-base circle {
	fill:#577bd6;
	stroke:#fff;
	stroke-width:1.2;
}

.da-radar-series-today polygon {
	fill:rgba(241,93,131,.22);
	stroke:#ed426f;
	stroke-width:3;
}

.da-radar-series-today circle {
	fill:#ed426f;
	stroke:#fff;
	stroke-width:1.2;
}

.da-svg-label-circle.wood {
	fill:#43bd66;
}

.da-svg-label-circle.fire {
	fill:#f06a64;
}

.da-svg-label-circle.earth {
	fill:#e6a728;
}

.da-svg-label-circle.metal {
	fill:#aeb4be;
}

.da-svg-label-circle.water {
	fill:#528fe3;
}

.da-svg-label-text {
	font-family:Arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	fill:#fff;
	text-anchor:middle;
	dominant-baseline:middle;
}


/* ============================================================
   오행 막대 그래프
   ============================================================ */

.da-element-bars {
	margin-top:12px;
}

.da-bars-title {
	margin:0 0 5px;
	color:#373137;
	font-size:13px;
	font-weight:800;
}

.da-bar-row {
	display:grid;
	grid-template-columns:32px minmax(0,1fr) 48px;
	align-items:center;
	gap:6px;
	padding:8px 0;
	border-bottom:1px solid #f3eef0;
}

.da-bar-row:last-child {
	border-bottom:0;
}

.da-mini-element {
	display:flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:28px;
	border-radius:50%;
	color:#fff;
	font-size:12px;
	font-weight:900;
}

.da-bar-group {
	min-width:0;
}

.da-bar-line {
	display:flex;
	align-items:center;
	gap:5px;
	width:100%;
}

.da-bar-line + .da-bar-line {
	margin-top:5px;
}

.da-bar-track {
	position:relative;
	flex:1;
	min-width:0;
	height:8px;
	overflow:hidden;
	border-radius:10px;
	background:#f0edef;
}

.da-bar-fill {
	height:100%;
	border-radius:10px;
}

.da-bar-fill.base {
	background:#c8cbd1;
}

.da-bar-fill.today {
	background:#f16b8d;
}

.da-bar-number {
	flex:0 0 25px;
	width:25px;
	color:#666066;
	font-size:12px;
	line-height:1;
	text-align:right;
}

.da-delta {
	font-size:12px;
	font-weight:900;
	line-height:1.2;
	text-align:right;
	white-space:nowrap;
}

.da-delta.up {
	color:#2ca151;
}

.da-delta.down {
	color:#e15157;
}

.da-delta.same {
	color:#979297;
}


/* ============================================================
   오행 총평
   ============================================================ */

.da-element-summary {
	position:relative;
	display:flex;
	align-items:center;
	min-height:76px;
	margin-top:10px;
	padding:10px 12px 10px 76px;
	overflow:hidden;
	border-radius:12px;
	background:#fff5f8;
	color:#50494f;
	font-size:13px;
	line-height:1.6;
}

.da-summary-mascot {
	position:absolute;
	left:10px;
	top:50%;
	transform:translateY(-50%);
	display:flex;
	align-items:center;
	justify-content:center;
	width:52px;
	height:52px;
	overflow:hidden;
	border:1px solid #f3d8e0;
	border-radius:50%;
	background:#fff;
	box-shadow:0 2px 8px rgba(80,55,65,.08);
}

.da-summary-mascot img {
	width:46px;
	height:46px;
	object-fit:contain;
}

.da-element-summary strong {
	color:#e85478;
	font-weight:800;
}


/* ============================================================
   4대 운세
   ============================================================ */

.da-fortune-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:7px;
}

.da-fortune-card {
	min-width:0;
	min-height:135px;
	padding:11px;
}

.da-fortune-head {
	display:flex;
	align-items:center;
	gap:7px;
}

.da-fortune-icon {
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 32px;
	width:32px;
	height:32px;
	border-radius:9px;
	font-size:17px;
}

.da-fortune-icon.relation {
	background:#fff1f5;
	color:#ef6184;
}

.da-fortune-icon.work {
	background:#f5f0ff;
	color:#9877dd;
}

.da-fortune-icon.money {
	background:#fff2d8;
	color:#d89420;
	border:1px solid #f3d7a0;
}

.da-fortune-icon.money i {
	font-size:18px;
}

.da-fortune-icon.health {
	background:#eefaf1;
	color:#4db96d;
}

.da-fortune-name {
	display:flex;
	align-items:center;
	min-height:32px;
	font-size:13px;
	font-weight:900;
	line-height:1.3;
	white-space:nowrap;
}

.da-stars {
	margin-top:2px;
	color:#ef6083;
	font-size:12px;
	line-height:1;
	letter-spacing:-1px;
}

.da-fortune-text {
	margin:8px 0 0;
	color:#625b61;
	font-size:12px;
	line-height:1.6;
	letter-spacing:-0.2px;
}

.da-level {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:28px;
	margin-top:7px;
	padding:0;
	border-radius:50%;
	background:#fff;
	line-height:1;
}

.da-level .material-symbols-rounded {
	font-size:25px;
	line-height:1;
}

.da-level.good {
	color:#85be2f;
}

.da-level.normal {
	color:#aaa;
}

.da-level.caution {
	color:#ca6589;
}


/* ============================================================
   행동 가이드
   ============================================================ */

.da-guide {
	overflow:hidden;
	border-color:#f4d0da;
	background:linear-gradient(
		145deg,
		#fff7fa 0%,
		#fff 62%,
		#f5fff8 100%
	);
}

.da-guide-row {
	display:grid;
	grid-template-columns:24px 118px minmax(0,1fr);
	align-items:center;
	gap:6px;
	min-height:60px;
	padding:9px 10px;
	border-bottom:1px solid #f1ecee;
}

.da-guide-row:last-child {
	border-bottom:0;
}

.da-guide-row > i:first-child {
	font-size:18px;
}

.da-guide-row b {
	font-size:12px;
	font-weight:800;
	line-height:1.4;
	white-space:nowrap;
}

.da-guide-row span {
	min-width:0;
	color:#5d565c;
	font-size:12px;
	line-height:1.5;
}

.da-guide-row.warning > i,
.da-guide-row.warning b {
	color:#ef5873;
}

.da-guide-row.good > i,
.da-guide-row.good b {
	color:#35a95c;
}

.da-guide-row.bad > i,
.da-guide-row.bad b {
	color:#e95656;
}


/* ============================================================
   AI 질문
   ============================================================ */

.da-question-card {
	padding:13px;
	background:#fff9fb;
}

.da-question-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:7px;
	margin-top:10px;
}

.da-question {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:38px;
	padding:7px 6px;
	border:1px solid #f2ccd7;
	border-radius:18px;
	background:#fff;
	color:#d95376;
	font-size:12px;
	font-weight:700;
	line-height:1.35;
	text-align:center;
}

.da-question:active {
	background:#fff1f5;
}


/* ============================================================
   370px 이하
   ============================================================ */

@media screen and (max-width:370px) {

	.da-hero {
		padding:14px;
	}

	.da-hero-title {
		margin-right:77px;
		font-size:20px;
	}

	.da-hero-text {
		margin-right:76px;
		font-size:12px;
	}

	.da-mascot {
		width:88px;
		height:100px;
	}

	.da-tags {
		padding-right:35px;
	}

	.da-element-section {
		padding:12px;
	}

	.da-today-element {
		padding:8px 6px;
	}

	.da-element-info {
		margin-left:6px;
	}

	.da-element-info strong {
		font-size:12px;
	}

	.da-element-info small {
		font-size:12px;
		white-space:normal;
	}

	.da-fortune-card {
		padding:10px;
	}

	.da-fortune-name {
		font-size:12px;
	}

	.da-guide-row {
		grid-template-columns:22px 92px minmax(0,1fr);
		gap:4px;
	}

	.da-guide-row b,
	.da-guide-row span {
		font-size:12px;
	}

}