/* 보라색 카드 스타일 + 동일 높이 */
      .card-purple {
        background-color: #7367f0;
        color:#fff;
        
      }
      /* 캔버스 부모에 고정 높이를 줘야 Chart.js가 꽉 차게 그림 */
      #emotionChartBox { height: 200px; } /* 오른쪽 카드 높이에 맞춰 조절 */
    
      /* Calendar */
      #routineCalendar {
        --cell-size: 46px;
      }
      .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
      }
      .cal-head {
        text-align: center;
        font-weight: 600;
        color: #6b7280; /* muted */
        font-size: 0.9rem;
        padding-bottom: 6px;
      }
      .cal-cell {
        height: var(--cell-size);
        border-radius: 10px;
        background: #f8fafc;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        /* box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.04); */
        font-weight: 600;
        color: #9aa0a6; /* 기본은 흐리게 */
      }
      .cal-cell.muted { opacity: 0.45; }
      .cal-cell .check {
        position: absolute;
        bottom: 6px;
        right: 8px;
        font-size: 18px;
        color: #22c55e; /* green-500 */
      }
      .cal-cell.done {
        background: #ecfdf5;            /* 초록 아주 옅게 */
        color: #065f46;                  /* 글자 진초록 */
        /* box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.25); */
      }
      .cal-legend {
        margin-top: 10px; font-size: .9rem; color:#6b7280;
      }
      @media (max-width: 576px){
        #routineCalendar { --cell-size: 38px; }
      }
      i.check{
        color: #22c55e;
      }


    /* 프로필 이미지 사이즈/정렬 */
    /* 래퍼: 중앙 정렬, 좌/우 여백 제어 */
    .banner-img-wp-laon{
      width: 100%;
      /* height: 100%;  ← 부모 높이가 유동이면 100%가 오히려 문제를 만듭니다. 제거 */
      display: flex;                 /* 가운데 정렬을 위해 flex 컨테이너로 */
      justify-content: center;       /* 가로 중앙 */
      align-items: center;           /* 세로 중앙 */
      padding-left: 0;               /* 모바일 기본값은 0 */
    }

    /* 실제 프로필 이미지 박스 */
    .banner-img-laon{
      /* 가변 폭이지만 최대값을 제한 */
      width: min(200px, 100%);
      /* 안정적인 종횡비(정사각형). 원한다면 4/3 등으로 변경 */
      aspect-ratio: 1 / 1;
      background-size: cover;
      background-position: center;
      border-radius: 28px;
      animation: border-radius-ani 4.5s linear infinite alternate;
      box-shadow: var(--box-light-shadow);
    }

    /* 태블릿~데스크탑에서만 왼쪽 패딩을 주고 크기를 조금 키움 */
    @media (min-width: 768px){
      .banner-img-wp-laon{ padding-left: 16px; }  /* 기존 30px → 완화. 필요 없으면 0 유지 */
      .banner-img-laon{ width: min(250px, 100%); }
    }

    /* 더 큰 화면에서 */
    @media (min-width: 1200px){
      .banner-img-laon{ width: min(300px, 100%); }
    }

    /* 카드 안쪽 여백 문제 예방 (선택사항)
      카드 바디가 padding이 많아 overflow처럼 보일 경우 줄여주세요 */
    .card .card-body{ padding: 1.25rem; }

      /* 선택된 금액 버튼 강조 */
      #supportAmounts .btn.active{
        background: var(--bs-primary);
        color:#fff;
        border-color: var(--bs-primary);
      }
    /* todo list */
    .laon-todo-card .todo-row{
        display:flex; align-items:center; gap:12px; padding:14px 16px;
      }
      .laon-todo-card .todo-row:hover{ background:#f8f9fb; }
      .todo-text{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .todo-right{ display:flex; align-items:center; gap:12px; }
      .todo-time{ color:#9aa0a6; font-size:.875rem; }
      /* 완료 리스트(연한 보라색 배경) */
      /* #todoDoneList .list-group-item{ background:#f5f0ff; }
      #todoDoneList .list-group-item:hover{ background:#eee7ff; } */
      #todoDoneList .list-group-item{ background:#e3f7eb; }
      #todoDoneList .list-group-item:hover{ background:#e9f8ef; }
      /* 체크박스 정렬 */
      .form-check-inline-cb{ margin-right:0; }
      /* 아이콘 버튼 최소화 */
      .icon-btn{ border:0; background:transparent; padding:4px 6px; color:#6b7280; }
      .icon-btn:hover{ color:#333; }

      /* === Todo toolbar & row icons === */
    .todo-toolbar{ display:flex; align-items:center; }
    .todo-toolbar .tool-right{
      margin-left:auto; display:flex; align-items:center; gap:8px;
    }
    .icon-only{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; }


    .todo-move { color:#6b7280; }
    .todo-move:hover { color:#333; }
    .todo-edit { color:#6b7280; }
    .todo-edit:hover { color:#333; }

    .todo-select { margin-left:8px; }
    .todo-text-btn { all:unset; cursor:pointer; flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:15px; }

    .modal .form-label { font-weight:600; }

    /* 투두 카드 내부 패딩: 오른쪽만 작게 */
    .laon-todo-card .card-header{ padding:12px; }      /* top-right-bottom-left */
    .laon-todo-card .card-body{  padding:12px 6px 12px 12px;}
    .laon-todo-card .list-group-item{ padding:8px 6px 8px 12px; }  /* 행의 우측 여백도 축소 */


    /* 리스트에서 날짜 숨김 */
    .laon-todo-card .todo-time{ display:none !important; }

    /* 상단 툴바 정렬: 왼쪽 체크박스, 오른쪽 아이콘들 */
    .todo-toolbar{ display:flex; align-items:center; gap:10px; margin:0 10px;}
    .todo-toolbar .tool-right{ margin-left:auto; display:flex; gap:8px; }
    .icon-only{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; }

    /* 기본(데스크톱) — 아주 좁게 */
    .laon-todo-card .todo-right{ display:flex; align-items:center; gap:6px; }
    .laon-todo-card .icon-btn{ padding:0 2px; }                /* 아이콘 버튼 여백 축소 */
    .laon-todo-card .todo-right .form-check-input{ margin:0; } /* 체크박스 좌우 마진 제거 */

    /* 모바일 간격 축소 */
    @media (max-width: 576px){
      .laon-todo-card .list-group-item.todo-row{ padding:6px; }
      .laon-todo-card .todo-right{ gap:4px; }
      .icon-only{ width:32px; height:32px; }
      .laon-todo-card .icon-btn{ padding:0 1px; }
    }

    /* 검색바: 왼쪽 아이콘 내장 */
    .search-with-icon{ position:relative; }
    .search-with-icon .form-control{ padding-left: 36px; }
    .search-with-icon .search-icon{
      position:absolute; left:12px; top:50%; transform:translateY(-50%);
      color:#9aa0a6; pointer-events:none; /* 아이콘 클릭해도 입력창 포커스 유지 */
    }

    /* 오른쪽 새로고침은 버튼 테두리/배경 제거 (아이콘만 보이게) */
    #todoRefresh.icon-btn{ border:0; background:transparent; padding:0 6px; color:#9aa0a6; }
    #todoRefresh.icon-btn:hover{ color:#333; }


    /* Tabs */
    .tab-switch{ display:flex; gap:8px; }
    /* .tab-btn{
      border:0; padding:.5rem .9rem; border-radius:999px; 
    }
    .tab-btn.active{ background:#26b36f; color:#fff; box-shadow: 0 .6rem 1.2rem rgba(38,179,111,.25); } */

    /* base */
    .tab-btn { 
      min-width: 30px;
      min-height: 30px;
      background: var(--body-bg);
      box-shadow: var(--btn-shadow);
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border-radius: 30px;
      -webkit-appearance: none;
      color: var(--dark-color);
      text-transform: capitalize;
      text-align: center;
      border: none;
      cursor: pointer;
      outline: none !important;
      transition: var(--transition);
      overflow: hidden;
      position: relative;
      z-index: 2;
      padding: 6px;
    }

    /* 활성 탭 = hover 모양 고정 */
    .tab-btn.active{
      border-color: var(--dark-color);
      box-shadow: var(--btn-hover-shadow);
    }

    /* 비활성 탭은 hover 효과 제거(기본 모양 유지) */
    .tab-btn:not(.active):hover{
      border-color: transparent;            /* 또는 없음 */
      box-shadow: var(--btn-shadow);        /* 기본 그림자 유지 */
    }

    /* 선택적으로 포커스 표시(접근성) */
    .tab-btn:focus-visible{
      outline: 2px solid rgba(38,179,111,.6);
      outline-offset: 2px;
    }


    /* Sketch box */
    .sketch-wrap .form-input{ overflow:hidden; }
    .sketch-canvas{ display:block; width:100%; height:500px; background:#fff; border-radius:14px; }

    .sketch-color{ width:32px; height:32px; padding:0; border:0; background:transparent; }
    .sketch-range{ width:180px; margin:0; }

    /* 스케치 컨테이너 */
    .sketch-card{
      background:#fff; border-radius:16px;
      box-shadow:0 10px 30px rgba(0,0,0,.06);
      padding:14px;
    }

    /* 상단 툴바(고정, absolute 아님) */
    .sketch-topbar{
      border-bottom:1px solid rgba(0,0,0,.06);
      padding-bottom:.5rem; margin-bottom:.75rem;
    }




    /* 컨트롤 폭 */
    .sketch-range{ width:180px; }
    @media (max-width:576px){
      .sketch-card{ padding:12px; }
      .sketch-canvas{ height:240px; }
      .sketch-range{ width:120px; }
    }

    .sec-btn-pix {
        min-width: 30px;
        min-height: 30px;
        background: var(--body-bg);
        box-shadow: var(--btn-shadow);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
        -webkit-appearance: none;
        color: var(--dark-color);
        text-transform: capitalize;
        text-align: center;
        border: none;
        cursor: pointer;
        outline: none !important;
        transition: var(--transition);
        overflow: hidden;
        position: relative;
        z-index: 2;
        padding: 6px;
    }

    .sec-btn-pix:hover {
        border-color: var(--dark-color);
        box-shadow: var(--btn-hover-shadow);
    }

    .sec-btn-pix.primary-btn {
        background: linear-gradient(145deg, #2da55e, #36c46f);
        color: var(--white-color);
        border: none;
        box-shadow: 4px 4px 8px #9e9e9e, -4px -4px 8px #ffffff;
    }

    .sec-btn-pix.primary-btn:hover {
        background: linear-gradient(145deg, #0c0c21, #0e0e28);
    }
    .submit-btn-laon.sec-btn-pix {
        width: 30px;
        min-height: 30px;
        border-radius: 30px;
    }

    .sketch-text-controls .form-control-sm { height: 32px; }
    #sketchTextMode.active { box-shadow: 0 0 0 .2rem rgba(25,135,84,.15); } /* on 표시 */
    .sketch-canvas { cursor: crosshair; }
    .sketch-canvas.text-mode { cursor: text; }

    #sketchTextSize { accent-color: var(--bs-primary); }
    #sketchTextSizeLabel { min-width: 42px; text-align: right; }

    /* 보드 아이콘 버튼 */
    .icon-btn-board {
      background: transparent; border:0; padding:.375rem; width:40px; height:40px;
      display:inline-flex; align-items:center; justify-content:center;
      
      box-shadow: none !important;
    }

    .icon-btn-board i{ font-size:20px; line-height:1; }

    /* hover 피드백 */
    /* .icon-btn-board:hover{ background: rgba(0,0,0,.06); } */

    /* 🔵 눌림(active) 상태:  지우개 모두 동일 스타일 */
    .icon-btn-board.active,
    .icon-btn-board[aria-pressed="true"]{
          
      background: rgba(var(--bs-primary-rgb, 13,110,253), .12);
      color: var(--bs-primary, #0d6efd);
    }


    /* 선택 경로/점선을 그리는 UI 캔버스 */
    #sketchUiCanvas{
      position:absolute; 
      pointer-events:none; /* 클릭은 아래 메인 캔버스가 받음 */
    }

    #imageResultsPrimary img, #imageResultsSearch img {
        max-width: 180px; border-radius: 8px; cursor: pointer; display: block;
      }
      #imageResultsPrimary img.selected-image {
        outline: 3px solid #32b768; outline-offset: 2px;
      }

      /* 둥근 컬러피커 공통 사이즈 */
    #sketchColor {
      --size: 20px;              /* 필요하면 32px, 48px 등으로 변경 */
      -webkit-appearance: none;
      appearance: none;
      width: var(--size);
      height: var(--size);
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: none;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0 2px 12px rgba(0,0,0,.08);
    }

    /* WebKit(Chrome/Safari/Edge) */
    #sketchColor::-webkit-color-swatch-wrapper { padding: 0; }
    #sketchColor::-webkit-color-swatch {
      border: 2px solid #e9ecef;        /* 테두리 색상 */
      border-radius: 50%;
    }

    /* Firefox */
    #sketchColor::-moz-color-swatch {
      border: 2px solid #e9ecef;
      border-radius: 50%;
    }

    /* 포커스 접근성 링 */
    #sketchColor:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(13,110,253,.25);
    }


    /* daily-log 모달 아이콘 버튼 */
    .icon-btn-modal {
      background: transparent; border:0; padding:.375rem; width:40px; height:40px;
      display:inline-flex; align-items:center; justify-content:center;
      
      box-shadow: none !important;
    }

    .icon-btn-modal i{ font-size:20px; line-height:1; }

    /* hover 피드백 */
    /* .icon-btn-board:hover{ background: rgba(0,0,0,.06); } */

    /* 🔵 눌림(active) 상태:  지우개 모두 동일 스타일 */
    .icon-btn-modal.active,
    .icon-btn-modal[aria-pressed="true"]{
          
      background: rgba(var(--bs-primary-rgb, 13,110,253), .12);
      color: var(--bs-primary, #0d6efd);
    }

    .laon-list-a{
    text-decoration: none;
    color: var(--primary-color);
}

/* 장식 아이콘: 클릭 불가 */
.search-submit-btn { pointer-events: none; }

/* transurfing-plate md - modal */
/* .markdown-body {font-family: "맑은 고딕";} */
  .markdown-body h1,.markdown-body h2,.markdown-body h3{margin-top:1.25rem;margin-bottom:.75rem;font-weight:700}
  .markdown-body p,.markdown-body li{line-height:1.7}
  .markdown-body ul{padding-left:1.2rem}
  .markdown-body table{width:100%;border-collapse:collapse;margin:1rem 0}
  .markdown-body th,.markdown-body td{border:1px solid #e5e7eb;padding:.5rem .75rem}
  .markdown-body blockquote{border-left:4px solid #e5e7eb;padding-left:.75rem;color:#6b7280}
  .markdown-body code{background:#f3f4f6;padding:.15rem .35rem;border-radius:.25rem}


  /* 모달의 마크다운 본문만 대상 */
  #plateHowtoContent :where(p, li, td, th, code, pre, blockquote) {
    font-size: 0.95rem;   /* ← 여기 숫자만 조절 (예: 0.9rem / 14px 등) */
    line-height: 1.7;
  }

  /* 표와 코드 가독성 약간 보정 (선택) */
  #plateHowtoContent pre, 
  #plateHowtoContent code { 
    line-height: 1.6; 
  }
  #plateHowtoContent table { 
    font-size: 1rem; 
  }

  /* 헤드라인은 손대지 않음 (h1~h6는 그대로) */

.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
    background-color: var(--yellow-color);
    border-color: var(--yellow-color);
}



.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--yellow-color);
    background: transparent;
}