/* --- [기존 스타일] --- */
    body {
      /* background: #f9f6ef; */
      font-family: 'Malgun Gothic', sans-serif;
      margin: 0;
    }

    .tab-content {
      display: none;
      padding: 20px;
    }

    .tab-content.active {
      display: block;
    }

    .tab2 {
      font-family: 'HJ한전서B', serif;
    }

    svg {
      background: transparent !important;
    }

    .wrap {
      /* width: 890px; */
      max-width: 95%;
      margin: 16px auto 40px;
      display: grid;
      grid-template-columns: 40% 60%;
      gap: 16px;
      align-items: start;
    }

    #tab1 .panel-wrap {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: space-between;
    }

    .panel {
      background: #fff;
      border: 1px solid #e1d8c8;
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
    }

    #tab1 .panel-wrap .panel {
      width: calc((25% - 30px));
      display: flex;
      flex-direction: column;
      align-content: space-between;
      gap: 7px;
      min-width: 150px;
    }

    #tab1 .panel-wrap .panel .panel-img {
      width: 100%;
      text-align:center;
    }

    #tab1 .panel-wrap .panel .panel-img>img {
      width: 50%;
      aspect-ratio: 16 / 9;
      object-fit: contain;
    }
	/* 도장등록 전 페이지 */
	#tab1 .panel-wrap.panel-wrap2{
	  width: 100%;
	  display: none;/*활성화시 flex로! */
	  padding-top: 15%;
	  justify-content: center;
	}
    .panel-wrap.panel-wrap2 .first-page {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .panel-wrap.panel-wrap2 .page-title {
      text-align: center;
    }

    .header-switch.first-page-switch .header-switch-btn {
      padding: 6px;
    }

    .panel-quick-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--border);
      padding-top: 9px;
    }

    .panel-quick-box a {
      width: 50%;
      text-align: center;
    }

    .panel-quick-box a button {
      color: var(--text-secondarys);
    }

    .panel-quick-box a:hover button {
      font-weight: 600;
      color: var(--primary-red);
    }

    .panel-quick-box a:first-of-type {
      border-right: 1px solid var(--border);
      ;
    }

    #tab3 .panel,
    #tab4 .panel {
      display: flex;
      flex-direction: column;
      align-content: center;
      align-items: center;
    }

    .panel-h2-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      border-bottom: 1px solid var(--border);
    }

    .panel h4 {
      margin: 6px 0 12px;
      font-size: 17px;
      font-weight: 700;
      color: #7a2b2b;
    }

    /* 툴팁을 위한 기본 컨테이너 설정 */
    .css-minibtn.miniBtnMember {
      position: relative;
    }

    /* 툴팁 스타일 (::after 가상 요소 사용) */
    .css-minibtn[data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      background-color: #333;
      color: #fff;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
      bottom: 120%;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
      z-index: 10;
    }

    .css-minibtn[data-tooltip]:hover::after {
      opacity: 1;
      visibility: visible;
    }

    button.panel-pop i {
      font-size: 16px;
      color: var(--text-secondary);
    }

    button.css-minibtn {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: var(--text-secondary);
    }

    button.css-minibtn .pop-show {
      display: block;
    }

    .row {
      display: flex;
      gap: 8px;
      align-items: center;
      margin: 8px 0;
      flex-wrap: wrap;
    }

    .row label {
      min-width: 28px;
      font-weight: 600;
    }

    .row input[type="text"] {
      flex: 1;
      height: 36px;
      border: 1px solid #d8cfc0;
      border-radius: 8px;
      padding: 0 12px;
      font-size: 15px;
      outline: none;
    }

    .row small {
      color: #8b7d6a;
    }

    .btn {
      height: 34px;
      padding: 0 14px;
      border-radius: 8px;
      border: 1px solid #b84b4b;
      background: var(--primary-red);
      color: #fff;
      font-weight: 700;
      cursor: pointer;
      font-size: 14px;
    }

    .btn.secondary {
      background: #fff;
      color: var(--primary-red)
    }

    .btn:disabled {
      opacity: .5;
      cursor: not-allowed;
    }

    .btn.primary {
      background: var(--primary-red);
      color: #fff;
    }

    .preview-grid {
      display: flex;
      flex-wrap:wrap;
      gap: 15px;
      justify-items: center;
      align-items: start;
      justify-content: space-around;
    }

    .seal-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .seal-caption {
      font-size: 12px;
      color: #5c4f3e;
      text-align: center;
      line-height: 1.2;
    }

    .seal-sm {
      width: 100px;
      height: 100px;
    }

    .font-loading {
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .font-loaded {
      opacity: 1;
    }

    .control-inline {
      display: inline-flex;
      gap: 8px;
      align-items: center;
    }

    select,
    input[type="number"] {
      height: 30px;
      border: 1px solid #d8cfc0;
      border-radius: 8px;
      padding: 0 10px;
      font-size: 14px;
      outline: none;
    }

    .seal-card {
      position: relative;
      padding: 6px;
      border: 2px solid transparent;
      border-radius: 12px;
      transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
      cursor: pointer;
    }

    .seal-card:hover {
      border-color: #e7b1b1;
      box-shadow: 0 0 0 3px rgba(173, 36, 36, .10);
    }

    .seal-card.selected {
      border-color: var(--primary-red);
      box-shadow: 0 0 0 4px rgba(173, 36, 36, .18);
      background: #fff7f7;
    }

    .seal-card svg {
      pointer-events: none;
    }

    .imgUploaded {
      height: 432px;
      overflow-y: scroll;
    }

    img.uploadedSeals {
      margin: 5px;
      height: 120px;
      width: 120px;
      border-color: var(--primary-red);
      box-shadow: 0 0 0 4px rgba(173, 36, 36, .18);
      background: #fff7f7;
    }

    img.uploadedSigns {
      margin: 5px;
      height: 100px;
      width: 250px;
      border-color: var(--primary-red);
      box-shadow: 0 0 0 4px rgba(173, 36, 36, .18);
      background: #fff7f7;
    }

    .boldRed {
      color: var(--primary-red);
      text-shadow: 0 0 1px red;
    }

    @font-face {
      font-family: 'Chosun100Year';
      src: url('/resources/fonts/Chosun100Year.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    /* --- [!!수정!!] 네비게이션 스타일 --- */
    .nav-switch-container {
      padding: 12px 12px 8px;
      border-bottom: 1px solid #e1d8c8;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      justify-content: space-between;
    }

    .nav-switch {
      display: inline-flex;
      border-radius: 8px;
      padding: 4px;
      gap: 10px
    }

    .switch-btn {
      padding: 6px 16px;
      border: none;
      background: #e6ded4;
      color: #7a6a55;
      font-size: 15px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .switch-btn:hover,
    .switch-btn.active,
    .switch-btn.btn.btn-primary {
      background-color: var(--primary-red);
      color: #ffffff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }



    /* ----- 모달 공통 스타일 ----- */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      transition: opacity 0.3s ease;
    }

    .modal-overlay.visible {
      display: flex;
    }

    .modal-content {
      background-color: #fff;
      border-radius: 12px;
      width: 90%;
      max-width: 1200px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
      transform: scale(0.95);
      transition: transform 0.3s ease;
      display: flex;
      flex-direction: column;
      max-height: 90vh;
    }

    .modal-overlay.visible .modal-content {
      transform: scale(1);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e9ecef;
      padding: 1.25rem 1.5rem;
      flex-shrink: 0;
      /* 헤더는 줄어들지 않음 */
    }

    .modal-title {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 600;
    }

    .btn-close {
      background: none;
      border: none;
      font-size: 1.75rem;
      font-weight: 300;
      color: #888;
      cursor: pointer;
      padding: 0.5rem;
      line-height: 1;
      transition: color 0.2s ease;
    }

    .btn-close:hover {
      color: #000;
    }

    .modal-body {
      margin-top: 55px;
      padding: 1.5rem;
      overflow-y: auto;
      /* ++본문 내용이 길어지면 스크롤 */
    }

    .modal-body::-webkit-scrollbar {
      width: 5px;
    }

    .modal-body::-webkit-scrollbar-track {
      background: #f1f1f1;
    }

    .modal-body::-webkit-scrollbar-thumb {
      background: #b84b4b;
      ;
      width: 3px;
    }

    .modal-footer {
      border-top: 1px solid #e9ecef;
      padding: 1.25rem 1.5rem;
      display: flex;
      justify-content: flex-end;
      flex-shrink: 0;
      /* 푸터는 줄어들지 않음 */
    }

    /* ----- 탭 스타일 (모달 내부) ----- */
    .tab-nav {
      width: calc(100% - 3rem);
      display: flex;
      border-bottom: 2px solid #e9ecef;
      margin-bottom: 1rem;
      position: fixed;
      top: 85px;
      background: #fff;
      justify-content: space-between;
    }

    .tab-button {
      background: none;
      border: none;
      padding: 0.75rem 1rem;
      cursor: pointer;
      font-size: 1rem;
      color: #555;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      transition: color 0.2s ease, border-color 0.2s ease;
    }

    .tab-button:hover {
      color: #000;
    }

    .tab-button.active {
      font-weight: 600;
      color: var(--primary-red);
      border-bottom-color: var(--primary-red);
    }

    .modal-tab-panel {
      display: none;
      padding: 0.5rem 0;
      line-height: 1.6;
    }

    .modal-tab-panel.active {
      display: block;
    }


    /* ----- [!!추가!!] 일반도장.html 스타일 (모달 내부에 적용) ----- */
    /* :root는 전역이라 그대로 두거나, 모달 내부용 변수로 바꿀 수 있습니다. */
    /* 여기서는 충돌을 피하기 위해 필요한 변수만 사용합니다. */
    :root {
      --bg: #f6f7fb;
      --panel: #ffffff;
      --border: #cdd2e8;
      --label: #6b6f80;
      --text: #0f172a;
      --accent: #e11d48;
      --accent-dark: #c91818;
      --primary-red: #a61118;
      --primary-red-dark: #861616;
      /* 빨강 메인색 (#e11d48 → 붉은계열 primary) */
      --accent-bg: rgba(225, 29, 72, .1);
      /* 빨강 투명 배경 */
      --error: #e11d48;
      --line: #d0d3dc;
      --card-bg: #fff;
      --page-bg: #f6f7fb;
      --ink: red;
      --soft-shadow: 0 12px 32px rgba(0, 0, 0, .06);
      --border-radius-lg: 12px;
      --border-radius-md: 10px;
      --border-radius-sm: 8px;
      --header-text: #222;
      --sub-text: #666;
    }

    #stampModal .general-seal-generator h1 {
      margin: 0 0 16px 0;
      font-size: 18px;
      font-weight: 600;
      color: #222;
    }


    /* 이용가능 멤버 모달 */
    div#infoModal .modal-content {
      width: 45%;
    }

    .count-mem-warp {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e1d8c8;
      padding-bottom: 10px;
      margin-bottom: 15px;
    }

    .count-member {
      display: flex;
      gap: 5px;
    }

    .func-btn-box button {
      color: var(--label);
    }

    .minifindicon {
      position: absolute;
      top: 12px;
      left: 7px;
    }

    #nameInput.mem-nameinput {
      padding: 10px 25px;
    }

	.input-area {
      flex: 1;
      min-width: 0;
      position: relative;
    }	
	#nameInput {
      width: 80%;
      font-size: 14px;
      line-height: 1.4;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
      outline: none;
      font-family: inherit;
    }
    #nameInput:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(79, 70, 229, .18);
    }
    
    /* 공통 버튼 스타일 */
    .action-btn {
      flex-shrink: 0;
      cursor: pointer;
      appearance: none;
      border: 0;
      border-radius: 8px;
      background: var(--primary-red);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      padding: 10px 14px;
      line-height: 1.2;
      box-shadow: 0 6px 16px rgba(225, 29, 72, 0.4);
      /* 빨강 그림자 */
      transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
    }

    .action-btn:hover {
      background: #d41445;
      /* hover 때 살짝 어두운 빨강 */
      box-shadow: 0 8px 20px rgba(225, 29, 72, 0.55);
    }

    .action-btn:active {
      transform: scale(.97);
      background: #b3133d;
      box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
    }

    .save-row {
      text-align: center;
      margin-top: 16px;
    }

    #saveFixedSignBtn {
      cursor: pointer;
      appearance: none;
      border: 0;
      border-radius: 8px;
      background: var(--accent);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      padding: 10px 16px;
      line-height: 1.2;
      box-shadow: 0 6px 16px rgba(225, 29, 72, 0.4);
      min-width: 120px;
      transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
    }

    #saveFixedSignBtn:hover {
      background: #d41445;
      box-shadow: 0 8px 20px rgba(225, 29, 72, 0.55);
    }

    #saveFixedSignBtn:active {
      transform: scale(.97);
      background: #b3133d;
      box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
    }

    #saveFixedSignBtn:disabled {
      opacity: .4;
      cursor: not-allowed;
      box-shadow: none;
    }

    .rule {
      font-size: 11px;
      line-height: 1.4;
      color: #6b6f80;
      margin-bottom: 8px;
    }

    .error {
      font-size: 11px;
      line-height: 1.4;
      color: var(--error);
      min-height: 14px;
      margin-top: 4px;
    }
    
    .mem-list-box {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .mem-list-head {
      width: 100%;
      border-bottom: 1px solid #e1d8c8;
    }

    ul.mem-list li {
      display: flex;
      flex-direction: row;
    }

    ul.mem-list li span {
      font-size: 12px;
      color: var(--sub-text);
      gap: 4px;
    }
    
    /* 다운로드, 삭제 버튼 부분만 커서 pointer로 지정하기 위해 추가 */
    .panel .panel-quick {
		cursor:auto;
	}