:root{
      --bg: #0b0f17;
      --bg2:#0f1626;
      --card:#121a2d;
      --card2:#0f182c;
      --line: rgba(255,255,255,.10);
      --text:#e9eef9;
      --muted: rgba(233,238,249,.70);
      --muted2: rgba(233,238,249,.52);
      --brand:#6ea8ff;
      --brand2:#8a7dff;
      --accent:#2dd4bf;
      --shadow: 0 18px 55px rgba(0,0,0,.35);
      --radius: 14px;
      --radius2: 18px;
      --container: 1240px;
      --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
    }

    *{box-sizing:border-box}
    html{height:100%}
    body{
      margin:0;
      min-height:100%;
      display:flex;
      flex-direction:column;
      font-family:var(--font);
      background:
        radial-gradient(1200px 600px at 15% 5%, rgba(110,168,255,.16), transparent 60%),
        radial-gradient(900px 520px at 80% 12%, rgba(138,125,255,.14), transparent 62%),
        radial-gradient(900px 520px at 45% 95%, rgba(45,212,191,.10), transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, #0a0e16 100%);
      color:var(--text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a{color:inherit; text-decoration:none}
    button{font-family:inherit}
    .container{max-width:var(--container); margin:0 auto; padding:0 18px}

    /* ====== PC / MOBILE wrapper ====== */
    #pc{display:block}
    #mobile{display:none}

    /* ====== PC Header ====== */
    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(11,15,23,.86), rgba(11,15,23,.55));
      border-bottom:1px solid var(--line);
    }
    .topbar-inner{
      height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .logo{
      display:flex; align-items:center; gap:10px;
      font-weight:800; letter-spacing:.2px;
    }
    .logo-badge{
      width:38px; height:38px;
      border-radius:12px;
      background: linear-gradient(135deg, rgba(110,168,255,1), rgba(138,125,255,1));
      box-shadow: 0 14px 40px rgba(110,168,255,.18);
      position:relative;
      overflow:hidden;
    }
	.logo-badge:before{
	  content:"";
	  position:absolute;
	  inset:-70%; /* 면적 크게 */
	  
	  background: linear-gradient(
		90deg,
		transparent 30%,
		rgba(255,255,255,.85) 48%,  /* 밝기 크게 */
		rgba(255,255,255,1) 50%,   /* 중심 강조 */
		rgba(255,255,255,.85) 52%,
		transparent 70%
	  );

	  transform: rotate(25deg);
	  animation: sheen 2.2s linear infinite; /* 빠르게 */
	  filter: blur(4px); /* 퍼지는 광택 */
	}

	@keyframes sheen{
	  0%   { transform: translateX(-120%) rotate(25deg); }
	  100% { transform: translateX(120%) rotate(25deg); }
	}

    .nav{
      display:flex; align-items:center; gap:8px;
      padding:10px;
      border:1px solid var(--line);
      background: rgba(18,26,45,.55);
      border-radius:999px;
    }
    .nav a{
      padding:10px 12px;
      border-radius:999px;
      color:var(--muted);
      font-size:14px;
      transition:.18s ease;
    }
    .nav a:hover{
      color:var(--text);
      background: rgba(255,255,255,.06);
    }
    .nav a.active{
      color:var(--text);
      background: linear-gradient(135deg, rgba(110,168,255,.22), rgba(138,125,255,.18));
      border: 1px solid rgba(110,168,255,.22);
    }
    .auth{
      display:flex; align-items:center; gap:10px;
    }
    .btn{
      padding:10px 14px;
      border-radius:12px;
      border:1px solid var(--line);
      background: rgba(18,26,45,.55);
      color:var(--text);
      font-weight:650;
      font-size:14px;
      cursor:pointer;
      transition:.18s ease;
    }
    .btn:hover{transform: translateY(-1px); background: rgba(18,26,45,.72)}
    .btn.primary{
      border:none;
      background: linear-gradient(135deg, rgba(110,168,255,1), rgba(138,125,255,1));
      box-shadow: 0 18px 45px rgba(110,168,255,.18);
    }
    .btn.primary:hover{filter: brightness(1.04)}

    /* ====== Title ====== */
    .page-head{
      padding:26px 0 10px;
    }
    .page-title{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:14px;
    }
    .page-title h1{
      margin:0;
      font-size:26px;
      letter-spacing:-.2px;
    }
    .page-title p{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }
    .title-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(18,26,45,.50);
      color:var(--muted);
      font-size:12px;
      white-space:nowrap;
    }
    .title-dot{
      width:8px; height:8px; border-radius:999px;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(45,212,191,.10);
    }

    /* ====== Gallery Board ====== */
    .board-wrap{
      padding:14px 0 40px;
    }
    .board-card{
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(18,26,45,.62), rgba(18,26,45,.36));
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
	.board-card TABLE {width:100%; }
	.board-card iframe {background-color:#fff;}
	.board-card input, .board-card select, .board-card textarea {color:#000;}
    .board-toolbar{
      padding:16px 16px 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      border-bottom:1px solid var(--line);
      background: rgba(15,22,38,.55);
    }
    .search{
      display:flex; gap:10px; align-items:center;
      width:min(520px, 100%);
    }
    .search input{
      width:100%;
      height:40px;
      padding:0 14px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(10,14,22,.55);
      color:var(--text);
      outline:none;
    }
    .search input:focus{
      border-color: rgba(110,168,255,.45);
      box-shadow: 0 0 0 4px rgba(110,168,255,.10);
    }
    .toolbar-right{
      display:flex; gap:10px; align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .btn.light{
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      color:var(--text);
    }

    .gallery{
      padding:16px;
      display:grid;
      grid-template-columns: repeat(5, 1fr); /* PC 기준 한줄 5개 */
      gap:14px;
    }

    .item{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(15,24,44,.35);
      border-radius: 14px;
      overflow:hidden;
      transition:.18s ease;
      min-height: 240px;
      display:flex;
      flex-direction:column;
    }
    .item:hover{
      transform: translateY(-3px);
      border-color: rgba(110,168,255,.30);
      box-shadow: 0 20px 55px rgba(0,0,0,.32);
    }
    .thumb{
      aspect-ratio: 4/3;
      width:100%;
      background:
        radial-gradient(220px 140px at 20% 20%, rgba(110,168,255,.22), transparent 65%),
        radial-gradient(240px 160px at 80% 25%, rgba(138,125,255,.20), transparent 70%),
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      position:relative;
      border-bottom:1px solid rgba(255,255,255,.10);
	  aspect-ratio: 4/3;   /* 원하는 고정 비율 (4:3, 1:1, 16:9 등 변경 가능) */
	  width:100%;
	  overflow:hidden;
	  position:relative;	  
    }
    .thumb:after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.35) 100%);
      opacity:.85;
    }
	.thumb img{
	  width:100%;
	  height:100%;
	  object-fit: cover;
	  display:block;
	}	
    .thumb .tag{
      position:absolute;
      left:10px; top:10px;
      z-index:1;
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.28);
      color: rgba(233,238,249,.86);
      backdrop-filter: blur(6px);
    }
    .thumb .num{
      position:absolute;
      right:10px; bottom:10px;
      z-index:1;
      font-weight:800;
      letter-spacing:.3px;
      color: rgba(233,238,249,.92);
    }

    .meta{
      padding:12px 12px 14px;
      display:flex;
      flex-direction:column;
      gap:8px;
      flex:1;
    }
    .meta .title{
      font-size:14px;
      font-weight:750;
      letter-spacing:-.2px;
      line-height:1.35;
      color: rgba(233,238,249,.95);
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow:hidden;
      min-height: 38px;
    }
    .meta .desc{
      font-size:12px;
      color: var(--muted2);
      line-height:1.45;
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }
    .meta .row{
      margin-top:auto;
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      font-size:12px;
      color: var(--muted);
    }

    .board-actions{
      padding:14px 16px 16px;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      border-top:1px solid var(--line);
      background: rgba(15,22,38,.55);
    }

    /* ====== Footer ====== */
    footer{
      border-top:1px solid var(--line);
      background: linear-gradient(180deg, rgba(15,22,38,.60), rgba(11,15,23,.82));
      padding:26px 0 16px;
      margin-top:auto;
    }
    .foot-top{
      display:grid;
      grid-template-columns: 1.2fr 1.6fr 1fr;
      gap:18px;
      align-items:start;
    }
    .foot-menu{
      display:flex; gap:14px; flex-wrap:wrap;
      color: var(--muted);
      font-size:13px;
    }
    .foot-menu a:hover{color:var(--text)}
    .foot-info{
      color: var(--muted);
      font-size:13px;
      line-height:1.7;
    }
    .kakao-cta{
      display:flex;
      justify-content:flex-end;
    }
    .kakao-btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      cursor:pointer;
      transition:.18s ease;
      user-select:none;
      white-space:nowrap;
    }
    .kakao-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09)}
    .kakao-icon{
      width:34px; height:34px;
      border-radius: 12px;
      background: linear-gradient(135deg, #FEE500, #ffd34e);
      color:#1f1f1f;
      display:grid; place-items:center;
      font-weight:900;
    }
    .kakao-txt b{display:block; color:var(--text); font-size:13px}
    .kakao-txt span{display:block; color:var(--muted); font-size:12px; margin-top:2px}
    .copyright{
      margin-top:18px;
      padding-top:14px;
      border-top:1px solid var(--line);
      color: rgba(233,238,249,.55);
      font-size:12px;
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }

    /* ====== Mobile Header / Drawer ====== */
    .m-topbar{
      position:sticky;
      top:0;
      z-index:60;
      height:64px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:0 16px;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(11,15,23,.88), rgba(11,15,23,.62));
      border-bottom:1px solid var(--line);
    }
    .m-left{display:flex; align-items:center; gap:12px}
    .hamburger{
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      cursor:pointer;
      display:grid; place-items:center;
      transition:.18s ease;
    }
    .hamburger:hover{background: rgba(255,255,255,.09)}
    .hamburger .bars{
      width:18px; height:12px; position:relative;
    }
    .hamburger .bars:before,
    .hamburger .bars:after,
    .hamburger .bars span{
      content:"";
      position:absolute;
      left:0; right:0;
      height:2px;
      background: rgba(233,238,249,.92);
      border-radius:99px;
    }
    .hamburger .bars:before{top:0}
    .hamburger .bars span{top:5px}
    .hamburger .bars:after{bottom:0}

    .m-title{
      font-weight:850;
      letter-spacing:-.2px;
    }
    .m-actions{display:flex; gap:10px; align-items:center}
    .m-actions .mini{
      padding:10px 12px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: var(--text);
      font-weight:700;
      cursor:pointer;
    }

    .drawer-overlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.55);
      opacity:0;
      pointer-events:none;
      transition: .22s ease;
      z-index:80;
    }
    .drawer{
      position:fixed;
      top:0; left:0;
      height:100%;
      width:min(86vw, 320px);
      background: linear-gradient(180deg, rgba(15,22,38,.98), rgba(11,15,23,.98));
      border-right:1px solid rgba(255,255,255,.10);
      transform: translateX(-102%);
      transition: .24s ease;
      z-index:90;
      padding:18px 16px;
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .drawer.open{transform: translateX(0)}
    .drawer-overlay.open{
      opacity:1;
      pointer-events:auto;
    }
    .drawer-head{
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
    }
    .drawer-close{
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      cursor:pointer;
      color: var(--text);
      font-size:18px;
      line-height:1;
    }
    .drawer-nav{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .drawer-nav a{
      padding:12px 12px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: rgba(233,238,249,.86);
      font-weight:700;
    }
    .drawer-nav a:hover{
      background: rgba(255,255,255,.07);
      border-color: rgba(110,168,255,.26);
    }
    .drawer-auth{
      margin-top:auto;
      display:flex;
      gap:10px;
    }
    .drawer-auth .btn{flex:1}

    /* ====== Responsive rules ====== */
    @media all and (max-width: 1100px){
      .nav{display:none} /* PC에서는 1100 이하부터 메뉴 줄어들 수 있어 숨김 (원하면 제거 가능) */
    }

    @media all and (max-width: 980px){
      /* 핵심 요구사항: 브라우저 가로 사이즈로 #pc/#mobile 전환 */
      #pc{display:none}
      #mobile{display:block}

      .page-title{
        flex-direction:column;
        align-items:flex-start;
      }
      .title-chip{margin-top:8px}
      .gallery{
        grid-template-columns: repeat(2, 1fr);
      }
      .foot-top{
        grid-template-columns: 1fr;
      }
      .kakao-cta{justify-content:flex-start}
    }

    @media all and (max-width: 420px){
      .gallery{
        grid-template-columns: 1fr;
      }
    }
	
/* customer.css - dev UI와 동일 톤으로 최소만 추가 */

/* 필터 카드 정렬 보정 */
.customer-filter-card{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:15px !important;
  flex-direction:row !important;
}
.customer-select{
  width:auto !important;
  min-width:150px !important;
  flex-shrink:0 !important;
  height:50px !important;
  box-sizing:border-box !important;
}
.customer-input-group{
  display:flex !important;
  flex:1 !important;
  max-width:420px !important;
  height:50px !important;
}
.customer-input-group input{
  height:50px !important;
  box-sizing:border-box !important;
}
.customer-input-group .btn{
  height:50px !important;
  padding:0 24px !important;
  white-space:nowrap !important;
}

/* 리스트 서브라인 */
.customer-subrow{
  margin-top:6px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.customer-muted{
  color: var(--text-sub);
  font-size:12px;
}

/* 미수 pill */
.customer-due{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border-color);
  background: var(--bg-input);
}
.customer-due.ok{
  border-color: rgba(45,212,191,.35);
  background: rgba(45,212,191,.10);
}
.customer-due.bad{
  border-color: rgba(255,107,107,.35);
  background: rgba(255,107,107,.10);
}

.money{
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}

/* 폼 */
.customer-form-card{ max-width: 1000px; margin: 0 auto; }
.customer-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.customer-form-grid .form-row label{
  display:block;
  margin:0 0 8px 0;
  font-weight:700;
  color: var(--text-sub);
}
.customer-form-grid .form-row input,
.customer-form-grid .form-row select,
.customer-form-grid .form-row textarea{
  width:100%;
  box-sizing:border-box;
}
.customer-form-grid .form-row.full{ grid-column: 1 / -1; }
.customer-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}

/* 모바일 */
@media (max-width: 980px){
  .customer-filter-card{
    flex-wrap:wrap !important;
  }
  .customer-input-group{
    max-width:100% !important;
  }
  .customer-form-grid{
    grid-template-columns: 1fr;
  }
}


/* customer view - dev header 기반 카드 UI 보강 */

.crm-summary-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
}
.crm-meta-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.crm-pill{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,24,44,.25);
  border-radius:14px;
  padding:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.crm-pill span{color:var(--text-muted); font-size:12px; font-weight:700;}
.crm-pill b{font-weight:900;}
.crm-pill.info{border-color: rgba(110,168,255,.25); background: rgba(110,168,255,.10);}
.crm-pill.ok{border-color: rgba(45,212,191,.25); background: rgba(45,212,191,.10);}
.crm-pill.bad{border-color: rgba(255,107,107,.28); background: rgba(255,107,107,.10);}

.crm-badges{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap;}
.crm-badge{
  display:inline-flex; align-items:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  font-size:12px;
  font-weight:800;
}

.crm-memo{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,24,44,.22);
  border-radius:14px;
  padding:12px;
  line-height:1.75;
}

.crm-actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.crm-comment-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.crm-comment-title{display:flex; align-items:center; gap:10px; font-weight:900;}
.crm-dot{width:8px;height:8px;border-radius:999px;background:var(--primary-color); box-shadow:0 0 0 4px rgba(49,130,206,.14);}
.crm-comment-sub{color:var(--text-muted); font-size:12px;}

.crm-comment-form{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,24,44,.22);
  border-radius:16px;
  padding:12px;
}

.crm-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.crm-field label{display:block; margin-bottom:8px; color:var(--text-muted); font-size:12px; font-weight:800;}
.crm-field.full{grid-column:1/-1;}

.crm-input{
  width:100%;
  height:50px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text);
  box-sizing:border-box;
}
.crm-input:focus{
  outline:none;
  border-color: rgba(49,130,206,.45);
  box-shadow: 0 0 0 4px rgba(49,130,206,.10);
}

.crm-radio{display:flex; gap:10px; flex-wrap:wrap;}
.crm-radio label{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor:pointer;
}
.crm-form-actions{margin-top:12px; display:flex; justify-content:flex-end;}

.crm-comment-list{margin-top:12px; display:flex; flex-direction:column; gap:10px;}
.crm-comment-item{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,24,44,.20);
  border-radius:16px;
  padding:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.crm-comment-topline{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.crm-pill-mini{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.crm-pill-mini.dev{border-color: rgba(49,130,206,.28); background: rgba(49,130,206,.12);}
.crm-pill-mini.maint{border-color: rgba(138,125,255,.25); background: rgba(138,125,255,.10);}

.crm-time{color:var(--text-muted); font-size:12px;}
.crm-comment-text{margin-top:8px; line-height:1.65;}
.crm-empty{
  padding:18px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:16px;
  color:var(--text-muted);
  text-align:center;
}

@media (max-width: 980px){
  .crm-summary-grid{grid-template-columns:1fr;}
  .crm-meta-grid{grid-template-columns:1fr;}
  .crm-form-grid{grid-template-columns:1fr;}
  .crm-comment-item{flex-direction:column;}
  .crm-actions{justify-content:flex-start;}
}

/* ✅ 메모(full) 줄이 2칸/3칸 상관없이 "행 전체" + 내부 100%로 강제 */
.customer-form-grid{
  width: 100%;
}

.customer-form-grid .form-row{
  width: 100%;
  min-width: 0;           /* grid/flex에서 줄어드는 버그 방지 */
}

.customer-form-grid .form-row.full{
  grid-column: 1 / -1;    /* 이미 있어도 한번 더 */
  width: 100%;
  display: block !important;
}
.customer-form-grid .form-row.full label{
  display:block;
  margin: 0 0 8px 0;
}
/* ✅ label/textarea가 나란히 배치되며 textarea만 줄어드는 케이스까지 잡기 */
.customer-form-grid .form-row.full textarea{
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 혹시 input/select도 full에서 같이 쓰면 같이 커지게 */
.customer-form-grid .form-row.full input,
.customer-form-grid .form-row.full select{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}