@charset "utf-8";
/* CSS Document */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");
@import url("color.css");

*{margin: 0; padding: 0; box-sizing: border-box; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; outline: 0;}

i{font-family: 'remixicon';}
a{text-decoration: none; cursor: pointer;}
li{list-style: none;}
button{cursor: pointer;}
td{table-layout:fixed; word-break:break-all;}
.blind { visibility: hidden;}
.none{display: none;}
a:hover{text-decoration: none;}
.tl{text-align: left;}
.tc{text-align: center;}
.tr{text-align: right;}
input[type="checkbox"], input[type="radio"] { margin-right: 0.25rem;}
body{background: var(--gray-3); font-weight: 500; overflow-y:hidden;}
::placeholder{var(--gray-7);}
.wrap{overflow: hidden; display: flex; overflow-y: hidden; height: 100vh;}
.cont{position: relative; width: calc(100vw - 240px); height: calc(100vh - 80px); overflow: auto; margin-top: 80px; left: 240px; padding-right: 420px; padding-left: 20px; }
.line{width: 1px; height: 20px; background: var(--gray-4);}
.column{flex-direction: column; display: flex;}
.row{flex-direction: row; display: flex; gap:0.5rem}
.logo {width: 60px; height: 60px; padding: 1rem; background: url(../images/logo.png) center no-repeat; text-indent: -9999px;}
.flex-c{display: flex;flex-direction: column;gap: 1rem;}
.flex-r{display: flex;flex-direction: row;gap: 1rem;}
.al-c{align-items: center;}
.sec-nav{width: 64px; padding: 0; height: 100vh; background: var(--white); display: flex; flex-direction: column; justify-content: space-between; border-right: 1px var(--gray-4) solid;} 
.sec-grp{width: 100%;position: relative;height: 100%;}
.sec-input{flex: 2 1;padding: 1rem;background: var(--white);border-radius: 1rem; margin-left: 1rem;}
.sec-result{flex: 3 1;padding: 1rem;background: var(--white);border-radius: 1rem;}
.sec-storage{flex:1; height: 100vh; align-items: center;width: 100%; overflow-y: auto;}
.sec-first{display: flex; flex-direction:column; justify-content: center; gap: 2rem;}
.sec-first h2{font-size: 2.4rem; font-weight: 600; text-align: center;}
.has-top-bar .sec-storage{padding: 0;overflow: unset;height: calc(100vh - 90px);}
.wrap-min{ gap: 1rem; display: flex; flex-direction: column; margin: 1rem;  width: 100%; overflow-y: auto;}
#pressStorage .wrap-min{width: auto;}
.wrapbox{background: var(--white);border-radius: 1rem;padding: 1.5rem; }
.has-top-bar .top-bar { display: flex;}
.top-bar {
  width: 100%;
  height: 60px;
  background: var(--white);
  align-items: center;
  justify-content: center;
  flex-direction: row;
  justify-content: space-between;
  flex-shrink: 0;
  }
.top-left { display: flex;  align-items: center; }
.back-btn { width: 45px; padding-right: 5px;  height: 60px;  background: none;  border: none;  font-size: 24px;  cursor: pointer; text-align: right;}
.menu-name { font-size: 1rem;  font-weight: 600;  color:var(--gray-9);}
.top-center { position: absolute;  left: 50%;  transform: translateX(-50%);  text-align: center;  width: max-content; display: flex; gap: 8px;}
.title { font-size: 1.1rem; font-weight: 600; color:var(--gray-8);}
.ft-bar{ display: flex;  width: 100%;   height: 20px;   align-items: top;  justify-content: center;}
.ft-bar p{font-size: 0.8rem; color: var(--gray-8);}

.menu {display: flex; flex-direction: column; align-items: center; padding: 0.5rem; gap:0.25rem;}
.menu li{ width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; position: relative; cursor: pointer; font-weight: 400;}
.menu li a{color: var(--gray-7); z-index: 1; position: relative; display: flex; flex-direction: column; align-items: center; padding: 0.5rem; gap:0.25rem;}
.menu li a i{ color: var(--gray-7); font-size: 1.5rem;}

.menu li:hover::before { content:''; position: absolute;width: 100%; height: 100% ;background: var(--gray-5); opacity: 0.2; border-radius: 0.5rem; left: 0; z-index: 0;}
.menu li.on:before{ content:''; position: absolute;width: 100%; height: 100% ;background: var(--blue); opacity: 0.15; border-radius: 0.5rem; left: 0; z-index: 0;}
.menu li.on a, .menu li.on a i, .co{color: var(--blue);}
.menu li.btn-his{border-top: 1px var(--gray-5) solid; margin-top: 0.5rem; padding-top: 0.5rem;}
.menu li.on.btn-his:before{ background: var(--gray); height: calc(100% - 0.5rem);}
.menu li.on.btn-his a, .menu li.on.btn-his a i{color: var(--gray-9);}
.menu li.disable, .menu li.disable a{pointer-events: none; cursor: default; opacity: 0.65;}
.menu li.disable:hover::before { display: none;}

.sec-tit{font-size: 1.25rem; font-weight: 600; line-height: 1.4;}
.cont-wrap{gap: 1rem; height: 100%; max-height: 100%;overflow-y: auto; display: flex; flex-direction:column; flex: 1;}
.messages{flex:1; overflow:auto; display:flex; flex-direction:column; gap:1rem;}
.msg-row{display:flex; align-items:flex-end; gap:1rem; max-width:100%;}
.msg-row.you{justify-content:flex-start; }
.msg-row.me{justify-content:flex-end; }
.bubble{padding:1rem; border-radius:1rem; max-width:80%; font-size:1rem; line-height:1.5; white-space:pre-wrap; word-break:break-word;  color: var(--darkgray);}
.you .bubble{ background:var(--gray-3); border-top-left-radius:0.5rem;}
.me .bubble{background:var(--blue); color:white; border-radius:1rem 1rem 0.5rem 1rem;}
.sec-first .composer{width: 760px;}
.composer{display:; flex-direction: column; align-items:stretch; padding:0.75rem; border:1px solid var(--gray-4); border-radius:16px; box-shadow:0 1px 2px var(--gray-4) inset; background: var(--white); outline: none; height: fit-content;}
.composer textarea{flex:1; border:0; resize:none; outline:none; font-size:1rem; width: 100%;
  min-height: 50px;
  max-height: 200px;
  overflow-y: auto; /* 내용이 넘치면 스크롤 */
  resize: none;}
.composer-box{flex:1; display:flex; align-items:center; justify-content: space-between;}

.send-btn{border:0; display:flex; font-size: 1.2rem; align-items:center; justify-content:center; padding: 0.5rem; border-radius:50%; color: var(--gray-8);}
.send-btn:hover{background:var(--gray-5);color: var(--gray-9)}

.pv-history{padding:0.8rem; border: 1px var(--gray-5) solid; background: var(--gray-2); color: var(--gray); line-height: 1.4;font-size: 0.875rem;font-weight: 400; border-radius: 1rem; display: flex; gap:0.75rem; flex-direction: column; position: relative; max-height: 220px;  min-height:124px; overflow-y: auto;}
.pv-history p{color: var(--gray-7); font-weight: 700; font-size: 0.8rem; margin-bottom: 0.3rem;}
.pv-history span{color: var(--gray-9);}
.pv-tab{display: flex; flex-direction: row; justify-content:flex-end; gap: 0.25rem; align-items:center; flex-shrink: 0;height: auto;   max-height: 100%; right: 1rem;}
.pv-tab button{border: 0; background: none;}
.pv-tab > div{font-size: 0.95rem; font-weight: 600;}
.pv-tab > p{font-size: 0.95rem; font-weight: 600;}

.pv-cont{margin-bottom: 0.5rem; display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;  overflow: hidden;}
.btn-area{display: flex;align-items: center;align-content: center;flex-direction: row;justify-content: space-between;}
.sec-input .btn-area{justify-content: space-between;}
.sec-result .btn-area{justify-content: space-between;}
.wrapbox .btn-area{justify-content: space-between; width: 100%;}
.btn-area > div{gap: 0.5rem; display: flex; align-items: center;}
.btn-sel-area{display: flex;align-items: center;justify-content: flex-start; flex-direction: row; gap:0.5rem; flex-wrap:wrap;}
.btn-sel-area button{position: relative;}
.file-name:hover::after, .btn-sel-area button[data-title]:hover::after, .tab-group label[data-title]:hover::after  { content: attr(data-title); padding: 0.5rem; border-radius: 0.25rem; background: var(--gray); color: var(--white); font-size: 0.875rem; font-weight: 600; position: absolute; display: block; white-space: nowrap;  z-index: 2;}

.box-btn{flex-direction: row; display: flex; gap: 0.25rem; align-items: center; justify-content: center;}
.btn-sel-area.column{align-items: flex-start;  flex-direction: column;}
.btn-sel-area .row input{width: 300px;}
.btn-sel-area .btn b{font-weight: 700; font-size: 1rem;}


.btn{padding: 0.5rem 0.75rem;border-radius: 0.6rem;background: var(--gray-3);color: var(--gray-9);border: 0;font-size: 0.9rem;font-weight: 500;display: flex;cursor: pointer;flex-direction: row;gap: 0.25rem;align-items: baseline;justify-content: center;}

.btn-s{padding: 0.3rem 0.5rem; border-radius: 0.3rem; background: var(--gray-4); color: var(--gray-9); border: 0; font-size: 0.8rem; font-weight: 500; cursor: pointer;display: flex;flex-direction: row;gap: 0.25rem;align-items: baseline;justify-content: center;}
.btn-no{background: none; border: none; }

.btn-bl{border: 1px var(--blue) solid; color: var(--blue); background: var(--white);}
.btn-bl-half{border: 0; color: var(--blue); background: var(--blue-2);}
.btn-bl-fill{border:0; color:var(--white); background: var(--blue-9); }

.btn-lgr{border: 1px var(--gray-5) solid; background: var(--white);}
.btn-lgr-fill{border:0; color:var(--gray-9); background: var(--gray-3); }
.btn-gr{border: 1px var(--gray) solid; color: var(--gray); background: var(--white);}
.btn-gr-half{border: 0; color: var(--gray); background: var(--gray-1);}
.btn-gr-fill{border:0; color:var(--white); background: var(--gray); }

.btn-red{border: 1px var(--red) solid; color: var(--red); background: var(--white);}
.btn-red-half{border: 0; color: var(--red); background: var(--red-3);}
.btn-red-fill{border:0; color:var(--white); background: var(--red-9); }

.btn-grn{border: 1px var(--green) solid; color: var(--green); background: var(--white);}
.btn-grn-half{border: 0; color: var(--green); background: var(--green-3);}
.btn-grn-fill{border:0; color:var(--white); background: var(--green-9); }

.btn:hover{background: var(--gray-4);}
.btn-bl-half:hover { background: var(--blue-4); }
.btn-gr-half:hover { background: var(--gray-4); }
.btn-red-half:hover { background: var(--red-4); }
.btn-grn-half:hover { background: var(--green-4); }

.btn-bl-fill:hover { background: var(--blue); }
.btn-gr-fill:hover { background: var(--gray); }
.btn-red-fill:hover { background: var(--red); }
.btn-grn-fill:hover { background: var(--green); }


.btn-hl { background: linear-gradient(130deg, var(--blue), var(--blue-5), var(--orange)); border: 0; border-radius: 10px; position: relative;z-index: 1; cursor: pointer; color: var(--blue) ;}

.btn-hl::before { content: ""; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; background-color: var(--white); border-radius: 8px; z-index: -1;}

input[type="text"], input[type="date"], input[type="password"], input[type="number"], textarea, select, .term-btn{border:1px var(--gray-5) solid; padding: 0.4rem; border-radius: 0.5rem;resize: vertical;}
input[type="text"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.term-btn:focus{border:1px var(--blue-7) solid; }
.composer textarea:focus{border: none;}
.grp-inp{display: flex; flex-direction: column; gap: 0.5rem;}
.grp-inp:first-child{margin-top: 1rem;}
.grp-inp p{color: var(--gray); font-size: 0.9rem; font-weight: 600;}

.prev-box{width: 100%;}
.box-tit{width: 100%; background-color: var(--blue); color: var(--white); height: 40px; line-height: 40px; padding: 0 1rem;}
.preview{ padding: 0.5rem; background: var(--gray-3); height: 100%; overflow-y: auto; border-radius: 1rem;display: flex; flex-direction: column;}


.preview.active {padding: 0;}
.preview.active textarea{ padding: 1rem; border: 0; width: -webkit-fill-available; max-width: 580px; margin: 0 auto;}
#titleEditor{border-bottom: 1px var(--gray) solid; font-size: 2rem; height: 150px;}
#subtitleEditor{font-size: 1.1rem; line-height: 1.4; height: 150px;}
#contentEditor{font-size: 1rem; line-height: 1.4; height: calc(100% - 308px);}
.op::after{content: '*'; display: inline-block; color: var(--blue); margin-left: 0.2rem; font-size: 100%;}

.textarea-wrapper { display: flex; flex-direction: column;border:1px var(--gray-5) solid; border-radius: 0.25rem; padding-bottom: .5rem;}

.textarea-wrapper textarea { flex: 1; border: none; outline: none; background: transparent;}

.file-upload { display: flex; align-items: center;font-size: 1.1rem; color: var(--gray-6); cursor: pointer;}
.file-upload input[type="file"] { display: none;}
.file-name {color: var(--gray);}

.ai-textarea {width: 500px; height: 210px; padding: 1rem; font-size: 0.95rem; line-height: 1.4;}  
.ai-textarea::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--blue), var(--blue-3), var(--orange)); border-radius: 1rem; z-index: -1;}

.history{display:none;width: 280px;border-left: 1px var(--gray-4) solid; border-right: 1px var(--gray-4) solid; padding: 1rem; height: 100%; overflow-y: auto;  overflow-x: hidden; gap:0.5rem; flex-direction: column; background: var(--white); box-shadow:3px 0px 4px rgba(0, 0, 0, 0.08); z-index: 1;flex-shrink: 0; position: fixed; left: 63px;}
.history.active{display: flex;}
.history p{font-size: 0.8rem; color: var(--gray); margin-bottom: 0.5rem;}
.history ol{display: flex; flex-direction: column; }
.history h3{font-size: 0.8rem; color: var(--gray); margin-bottom: 0.5rem;}
.history li {display: flex; align-items:center; gap: 4px; position: relative; padding: 0.5rem 1rem 0.5rem 0.5rem ;justify-content:space-between; position: relative;}
.history ol a{font-weight: 400; color: var(--gray-9); font-size: 0.9rem; z-index: 1; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; flex: 1;}
.history li button{display: none; border: 0; background: none; font-size: 0.8rem; padding: 0;cursor: pointer; z-index: 1;}
.history li:hover::before{position: absolute; content: ''; z-index: 0; width: 100%; height: 100%; background: var(--gray-2); border-radius: 8px; left: 0; top:0;}
.history li:hover a{color: var(--gray);}
.history li:hover button{display: inline-flex;}
.history li.on::before{position: absolute; content: ''; z-index: 0; width: 100%; height: 100%; background: var(--blue-2); border-radius: 8px; left: 0; top:0;}
.history li.on a{color: var(--blue); font-weight: 600;}
.hist-li{margin-bottom: 0.8rem;}
.footer{border-top: 1px var(--gray-4) solid; color: var(--gray); display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative;}

.footer a{color: var(--gray);}
.user i{font-size: 1.25rem;border: 1px var(--gray-4) solid; color:var(--gray); border-radius: 50%; background-color: var(--gray-2); padding: 0.25rem;}
.user, .help{ color: var(--gray-7); font-size: 1.75rem; z-index: 1; position: relative; display: flex;    flex-direction: column; align-items: center; padding: 0.5rem; gap: 0.25rem;}


.tab-group {  display: flex;  background: var(--gray-3);  border-radius: 0.5rem;  padding: 0.2rem;  gap: 0.2rem;}
.tab-group input[type="radio"] {display: none;}
.tab-group label {width: max-content;  cursor: pointer;  padding: 0.5rem;  font-size: 0.8rem;  font-weight: 500;  color: var(--gray-7);
  border-radius: 0.4rem;  text-align: center;  transition: all 0.2s ease;}
.tab-group input[type="radio"]:checked + label {  background: white;  color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset;}





.wrap-card{border: 1px var(--gray-4) solid; border-radius: 1rem; padding: 1rem;}
.card-head{padding: 0; justify-content:space-between; gap:0.5rem; align-items: center;}
.card-head .flex-c{gap: 0.5rem;}
.card-tit{ color: var(--black);}
.card-time{ font-size: 0.8rem; color: var(--gray);}
.card-head-btn button{ width: 2rem; height: 2rem;}
.ico-btn{border: 0; background: none; color: var(--gray);}
.ico-btn-l{border: 0; background: none; color: var(--gray); font-size: 1.5rem;}

.card-li{gap: 10px;column-width: 600px;column-gap: 1rem;display: flex;flex-direction: row;flex-wrap: wrap;}
.card-item  {border: 1px solid var(--gray-5);border-radius: 16px;padding: 1.25rem;display: flex;flex-direction: column;gap: 8px;width:-webkit-fill-available;margin-bottom: 1rem;width: calc(50% - 10px);}

.item-head {display: flex;align-items: flex-start;flex-direction: column;gap: 1rem; border-bottom: 1px var(--gray-4) solid; flex-shrink: 0; padding-bottom: 1rem;}  

.group-name {font-size: 1rem;font-weight: 400;}
.group-name input{padding: 0.2rem; font-size: 1rem;}
.group-name .grp-count{color: var(--gray); margin-left: 0.2rem;}
.item-tit {font-size: 1.5rem;font-weight: 600;}
.item-date {font-size: 0.9rem;color: var(--gray-7);font-weight: 500;}
.item-prev{font-size: 1rem;color: var(--gray-8);font-weight: 300; line-height: 1.8; flex: 1 1 auto; overflow-y: auto;}

.item-footer {align-items: center; justify-content: space-between; margin-top: auto; }
.key-area{display: flex; gap: 0.5rem;}
.key-area span{padding: 0.5rem 1rem; border-radius: 1rem; background-color: var(--blue-2); color: var(--blue); font-size: 0.9rem;}
.cont-item{color: var(--gray); line-height: 1.4;}

.dropdown, .selectbox {  position: relative;  display: inline-block;}

.drop-cont {  display: none;  position: absolute; padding: 0.5rem;  top: calc(100% + 0.25rem);  left: 0; min-width: 300px; max-height:30vh;  background: white;  border: 1px solid var(--gray-5);  border-radius: 0.5rem;  box-shadow: 0 4px 12px var(--gray-4);  z-index: 100;  overflow: auto;  flex-direction: column; gap: 0.5rem; }
.drop-cont.on{display: flex;}
.drop-li { padding: 0.75rem 1rem; border: 1px var(--gray-4) solid; cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem;border-radius: 0.5rem; color: var(--darkgray);}
.drop-li:hover { background:var(--gray-3);}
.drop-li.on {  background:var(--blue-1); color: var(--blue); border: 0; }
.drop-top {  display: flex;  justify-content: space-between;  align-items: center;}
.drop-tit {  font-weight: 600;  font-size: 0.9rem; }
.drop-desc {  font-weight: 400; font-size: 0.85rem;  line-height: 1.4; overflow: hidden; display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 1; text-overflow: ellipsis; color: var(--gray);}
.newgroup .btn{width: 100%;}

.selc-cont {  display: none;  position: absolute;  background-color: var(--white); border: 1px var(--gray-3) solid; z-index: 10; border-radius: 0.5rem; flex-direction:column; padding: 0.25rem; width: max-content;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  }
.selc-cont.on{display: flex;}
.selc-li { padding: 0.75rem 1rem; cursor: pointer; display: flex; flex-direction: row;align-items: center;    justify-content: space-between;gap: 0.2rem; color: var(--darkgray); font-size: 0.9rem; border-radius: 0.5rem;}
.selc-li:hover { background:var(--gray-3);}
.selc-li.on {  background:var(--blue-1); color: var(--blue); }
.selc-li.newgroup{padding: 0rem;}
.btn-at:last-child .selectbox:last-child .selc-cont{right: 0;}
/* 이건 적용되는거 보고 살릴지 수정할지 
tr:last-child .selc-cont{bottom: 0;}*/
.td-btn .selc-cont{right: 0;}
.selc-cont .period{padding: 0.5rem; align-items: center; gap: 0.25rem; }

.srch{padding: 0.5rem 0.75rem;border-radius: 0.6rem;background: var(--gray-3);color: var(--gray-9);font-size: 0.9rem;font-weight: 500;display: flex;cursor: pointer;flex-direction: row;gap: 0.25rem;align-items: baseline;justify-content: center;}
.srch input{border: 0;padding: 0; background: none;}
.srch input:focus{outline: 0; border: 0;}
.hist-modal {  position: absolute;  background-color: var(--white);  border: 1px solid var(--gray-2);  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  min-width: 100px;  z-index: 1000;  padding: 10px;}
.hist-modal .edit-btn,.hist-modal .delete-btn {  padding: 8px;  cursor: pointer;  text-align: center;  font-size: 0.9rem;  color: var(--gray);  text-align: left;}
.hist-modal .edit-btn:hover,.hist-modal .delete-btn:hover {  background-color: var(--gray-2);}
.grp-ico{font-size: 0.875rem;font-weight: 500;padding: 3px 8px;border-radius: 8px; }
.grp0, .tab .grp-ico{background-color: var(--gray-4);color: var(--gray-9);}
.grp1, .tab.on .grp-ico{background-color: var(--blue-2); color: var(--blue);}
.grp2{background-color: var(--green-2); color: var(--green);}
.grp3{background-color: var(--purple-2); color: var(--purple);}
.grp4{background-color: var(--orange-2); color: var(--orange);}
.grp5{background-color: var(--lightblue-2); color: var(--lightblue);}
.grp6{background-color: var(--violet-2); color: var(--violet);}
.grp7{background-color: var(--yellow-2); color: var(--yellow);}
.grp8{background-color: var(--pink-2); color: var(--pink);}
.grp9{background-color: var(--lightgreen-2); color: var(--lightgreen);}
.grp10{background-color: var(--red-2); color: var(--red);}

.co1{color: var(--blue);}
.co2{color: var(--green);}
.co3{color: var(--violet);}
.co4{color: var(--orange);}
.co5{color: var(--lightblue);}
.co6{color: var(--purple);}
.co7{color: var(--yellow);}
.co8{color: var(--pink);}
.co9{color: var(--lightgreen);}
.co10{color: var(--red);}

.tab-menu {  width: 100%;  overflow-x: auto;   white-space: nowrap;  border-bottom: 1px solid var(--gray-4); margin: 20px 0 0;}
.tab-menu::-webkit-scrollbar {  height: 6px;}
.tab-menu::-webkit-scrollbar-thumb {  background: var(--gray);  border-radius: 3px;}
.tab-menu::-webkit-scrollbar-track {  background: var(--gray-2);}
.tab-container {  display: flex;  gap: 8px; }

.tab {padding: 10px 6px;border: none;background: none;font-size: 16px;cursor: pointer;white-space: nowrap;transition: 0.2s ease;color: var(--gray-7);display: flex;align-items: center;flex-direction: row;}
.tab.on { color: var(--black);  font-weight: bold; border-bottom: 3px solid var(--black);}
.tab > .grp-ico{padding: 3px 5px;margin-left: 5px;font-size: 0.725rem;}
.strg-cont { width: 100%; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px;}

.grid2{display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;}
.grid3{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;}
.gap0{gap: 0;}
.gap1{gap: 1rem;}
.gap2{gap: 2rem;}
.grid2 > *{  min-width: 0;}
.grid2-2{display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem;}

.box-head{display: flex; align-items: center; flex-direction: row; justify-content: space-between;}
.box-cont {margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: 1rem;}
.box-cont img{max-width: 100%;}
.sum-article-li{display: flex;flex-direction:column;gap: 0.8rem;}
.sum-article-li li{display: flex; gap: 0.5rem; padding: 1rem; border-radius: 1rem;align-items:center; flex: 0 1 auto; }
.sum-article-li li:nth-child(odd){background-color: var(--gray-3);}
.sum-li-num{padding: 0.5rem; font-size: 1rem; font-weight: 700;}
.sum-tit{color: var(--gray-8);}
.flex-c .sum-txt::after{width: 100%; content: ''; display: block; height: 1px; background: var(--gray-3); margin-top: 1rem;}
.flex-c .sum-txt:last-child::after{display: none;}
.sum-txt{color: var(--gray-9); font-size: 1.4rem; }

.sum-li-num{color: var(--blue);}
.sum-li-cont{display: flex; flex-direction: column; gap: 0.5rem;}
.sum-li-cont div{ gap: 0.5rem;}
.sum-li-cont div span{color:var(--gray); font-size: 0.875rem;}
.sum-li-cont div a{color:var(--gray-7); font-size: 1rem;max-width: 100%;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
.sum-li-count span{ color: var(--blue); background: var(--blue-2); border-radius: 1rem; padding: 0.25rem 0.5rem; font-size: 0.875rem; font-weight: 700; white-space: nowrap;}

.banner{height: 200px;}
.survey { width: 500px; background: url(../images/survey.png) center no-repeat; background-size: contain; height: 297px; position: absolute; bottom: 60px; left: 10px; animation: shrinkBox 1.5s forwards; z-index: 10;}

.term{padding: 0.5rem 1.5rem; align-items: center;}

.btn-area > div.btn-prev{display: none;}

.modal{display: none; position: fixed; z-index: 10; flex-direction: column; left: 0; top: 0; width: 100vw; height: 100vh; justify-content: center; align-items: center; background: var(--gray-4);}
.modal2{display: none; position: fixed; z-index: 10; flex-direction: column; left: 45%; bottom: 80px;}
.md-layer{flex-direction: column; background: var(--white); border-radius: 1rem;  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); min-width: 360px}
.md720{width: 720px;height: 720px;overflow: hidden;display: flex;flex-direction: column;justify-content: space-between;}


.md-prev{width: 80vw;max-height: 80vh;overflow: hidden;display: flex;flex-direction: column;justify-content: space-between;}
.md-tit{display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 1rem;border-bottom: 1px solid var(--gray-4);}
.md-tit h3{font-size: 1.25rem; gap: 1rem;}
.md-tit span{font-size: 0.9rem; color: var(--gray); font-weight: 600; margin-left: 1rem;}
.md-tit .btn-no{font-size: 1.5rem; color: var(--gray-9);}
.md-prev .btn-area{padding: 0.75rem;}

.md-cont{display: flex; padding: 1.5rem; flex-direction:column; gap:1rem;  flex: 1 1 auto;  overflow: hidden;}
.md-mid{display: flex; flex: 1 1 auto; overflow: hidden;}

.md-btn-area{max-height: 20%;display: flex; justify-content: space-between;  align-items: stretch;  padding: 1rem;  gap: 1rem;  border-top: 1px solid var(--gray-5);flex-direction:column}
.md-prev .md-btn-area{justify-content: center; }
.md-btn-area .btn{font-size: 1rem;}
.ft-lt{flex: 20 1 0px; overflow: auto; border-right: 1px solid var(--gray-5);}
.ft-rt{flex: 80 1 0px; gap: 1rem; overflow: auto;display: flex; flex-direction: column;}
.ft-lt, .ft-rt {  height: 100%; overflow-y: auto;  padding: 1rem;}
.ft-lt li{}
.ft-lt li a{color: var(--gray-9); padding: 0.75rem; border-radius: 0.75rem;}
.ft-lt li a:hover{background: var(--gray-3);}

.ftli{ display: flex; flex-direction: column; gap: 0.5rem; flex-flow: wrap; justify-content: normal; align-items: center;;}
.ftli dt {font-size: 0.875rem;  width: 100%; font-weight: 600; color: var(--gray-8);}
.ftli dd input[type="checkbox"] {  display: none;}
.ftli dd label {  display: inline-block;  padding: 0.5rem 1rem;  font-size: 0.9rem;  border-radius: 1rem;  background: var(--gray-3); color: var(--gray-9);  cursor: pointer;  transition: 0.2s ease;}
.ftli input[type="checkbox"]:checked + label {  background: var(--blue-2); color: var(--blue);}



.selected-list {  flex: 1; overflow-y: auto; display: flex;  gap: 0.5rem;  flex-wrap: wrap;  list-style: none;  margin: 0;  padding: 0;  font-size: 0.85rem;}
.selected-list li {  background: var(--blue-2);  color: var(--blue);  padding: 0.3rem 0.6rem;  border-radius: 1rem; display: flex; align-items: center; flex-direction: row; gap: 0.25rem;}
.selected-list li .btn-no{color: var(--blue); font-size: 0.7rem; line-height: 0.7rem;}
.md-btn{display: flex;flex-shrink: 0;align-items: center;gap: 0.5rem;justify-content: space-between;}
.compare-tit{font-size: 1.6rem; margin-top: 0.5rem;}

.tb1{width: 100%;}
.tb1 th {font-size: 0.9rem; padding: 1rem; text-align: left; color: var(--gray-8);}
.tb1 tbody tr:hover, .tb1 tbody tr:nth-child(odd):hover{background: var(--blue-1);}
.tb1 td:first-child{border-radius: 0.8rem 0 0 0.8rem;}
.tb1 td:last-child{border-radius: 0 0.8rem 0.8rem 0;}
.tb1 tbody tr:nth-child(odd){background: var(--gray-3);}
.tb1 td{padding: 1rem ; height: 3rem; vertical-align: middle; font-size: 1rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; max-width: 1px; color: var(--gray-8);}
.tb1 td.line2{padding: 0.5rem 1rem;  font-size: 0.875rem; line-height: 1.35; overflow: visible; gap: 0.5rem; display: flex; justify-content: space-between; align-items: center;}

.tb2 th{font-size: 0.9rem; padding: 1rem; text-align: left; color: var(--gray-8);}
.tb2 td:first-child{border-radius: 0.8rem 0 0 0.8rem;}
.tb2 td:last-child{border-radius: 0 0.8rem 0.8rem 0;}
.tb2 td{padding: 1rem ;  line-height: 1.4; color: var(--gray-9); white-space: normal;  overflow: visible;  text-overflow: unset; vertical-align: middle;}
.tb2 tbody tr:nth-child(odd){background: var(--gray-3);}
.tb2 tbody tr:hover, .tb2 tbody tr:nth-child(odd):hover{ background: var(--blue-1);}


.tb3 th{font-size: 0.9rem; padding: 1rem; text-align: left; color: var(--gray-8); border-top: 1px var(--gray-5) solid; border-bottom: 1px var(--gray-5) solid;}
.tb3 td{padding: 1rem ;  line-height: 1.4; color: var(--gray-9); white-space: normal;  overflow: visible;  text-overflow: unset; vertical-align: middle; border-bottom: 1px solid var(--gray-4);}
.tb3 tbody tr:hover{ background: var(--gray-3);}

.openPrev{cursor: pointer;}
.tb-tit{color: var(--darkgray); line-height: 1.4; overflow: hidden; display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2; text-overflow: ellipsis; margin-bottom: 0.25rem; }
.tb-txt{ font-weight: 400; line-height: 1.4; overflow: hidden; display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2; text-overflow: ellipsis; color: var(--gray);}
.td-btn{flex-direction: row; display: flex; gap: 0.25rem; align-items: center; justify-content: center;}
.pagination{width: 100%; text-align: center; padding: 1rem 0; display: flex; flex-direction: row; gap: 0.25rem; align-items: center; justify-content: center;}
.pagination li a{color: var(--gray-8);width: 2rem; height: 2rem; border-radius: 1rem; line-height: 2rem;}
.pagination li a:hover{background: var(--gray-3); }
.pagination li.on a{font-weight: 700;  }
.pagination li a.disabled {cursor: not-allowed;}
.pagination li a.disabled i{color: var(--gray-5);}
.pagination li a.disabled:hover{background: none }
.cats{position: relative; display: inline-block;}
.cat{ background: var(--blue); color: var(--white); padding: 0 0.25rem;  font-size: 0.8rem; border-radius: 0.5rem; display: inline-block; cursor: pointer;}
.cat-pop {  display: none;  position: absolute;  padding: 0.4rem; border-radius: 0.75rem;  z-index: 100;  background: var(--white); border: 1px solid var(--blue-5); color: var(--gray-9);}
.cats:hover .cat-pop {  display: flex; }

.tab-content { display: none; margin-bottom: 1rem; }
.tab-content.on { display: flex; width:100% ;  }

.box-txt{padding:1rem; border: 1px var(--gray-5) solid; background: var(--gray-2); color: var(--gray-8); line-height: 1.4;font-size: 1rem; font-weight: 400; border-radius: 1rem; width: 100%; display: flex;}

.box-txt article {margin-bottom: 1rem;} 
.box-txt h3 {  font-size: 18px;  margin: 0 0 8px 0;  color: var(--gray-9);}
.box-txt p {white-space: normal; line-height: 1.5;}
.box-txt b {color: var(--blue); margin: 0 0.2rem;}

.login{ justify-content: center; align-items: center; align-content: center; height: 100vh;}
.loginbg{background: radial-gradient(closest-side, var(--purple-3) 0%, var(--blue-2) 70%,  var(--green-1) 100%); position: fixed; aspect-ratio: 1 / 1; top: -230vh; left: -50vw; width: 200vw; height: 300vh; pointer-events: none; z-index: -1;}
.login-wrap{background: white;display:flex;flex-direction:column;align-items:center;justify-content:center;padding: 3.6rem;border-radius: 1rem;width: 500px;gap: 0.8rem;box-shadow: 0 0 10px 0 var(--blue-1);}
.login-wrap h1{ font-size: 1.2rem; font-weight: 900; color: var(--gray-9); }
.login-wrap p{font-size: 1rem;font-weight: 400;color: var(--gray-7);margin-bottom: 2rem;}
.help{text-align:center;color:var(--gray);font-size: 1rem;}
.login .logo {width: 230px; height: 30px; padding: 0; background: url(../images/logotype.png) center no-repeat; text-indent: -9999px;}

.login-wrap form{display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 1rem;}
.field input{ border: 1px var(--gray-5) solid;}
.field input, .login-wrap .btn{width: 100%;padding: 1rem;font-size: 1.2rem;border-radius: 0.75rem;}


.li-table{display: flex; flex-direction: column; }
.li-table li{display: flex;flex-direction:row;align-items: baseline;justify-content: space-between;gap: 1rem;padding: 0.5rem;border-radius: 0.5rem;}
.li-table li:nth-child(even){background: var(--gray-3);}


.selc-cont .srch{margin: 0.75rem 0.25rem;}
.select-all{padding: 0.75rem 0.5rem;font-size: 0.9rem; color: var(--gray-9);}
.checkbox-list li{ padding: 0.75rem; display: flex; flex-direction: row; align-items: center;}
.checkbox-list li input{border-radius: 0.25rem;}
.checkbox-list li label{font-size: 0.9rem;color: var(--gray-9);}
.select-all:hover, .checkbox-list li:hover{background: var(--gray-3); border-radius: 0.5rem;}

.selc-cont.userpop{bottom: 50px; left: 40px;font-size: 0.9rem; font-weight: 500; color: var(--gray-8);}
.userpop .info-menu{padding: 0.75rem 1rem; border-radius: 0.5rem; cursor: pointer; }
.userpop .info-menu:hover{background-color: var(--gray-3);}
.info-box{border-top: 1px var(--gray-3) solid; border-bottom: 1px var(--gray-4) solid; padding: 1rem 0.5rem;}
.plan{display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap:0.5rem; padding: 0 0.5rem;}
.credits { display: grid; grid-template-columns: max-content auto; gap: 0.75rem; padding: 1rem; margin-top: 0.5rem; color: var(--darkgray); background-color: var(--gray-3); border-radius: 0.5rem; font-size: 0.85rem; font-weight: 300;}
.credits dd {text-align: right;}
.credits dd span{color: var(--blue);}

.md-body{overflow-y: auto;}

.pressModalList{
   		width: 100vw;
   		height: 100vh;
   		background: var(--gray-4);
   		left: 0;
   		top: 0;
      display: flex;
          position: fixed;
    z-index: 10;
   		flex-direction: column;
   		flex-wrap: nowrap;
   		align-items: center;
   		justify-content: center;}
.pressModalDetail {
   		display: none;
   		position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: var(--gray-4);
      align-items: center;
      justify-content: center;
      z-index: 11;
   	}   	   			


@keyframes shrinkBox {
      0% {width: 500px; height: 297px; } 
      50% { width: 500px; height: 297px; }
      100% { width: 220px; height: 130px; }
  }

@media screen and (max-width: 1600px) 
{
  .wrap-min{width: 100%;}
}
@media screen and (max-width: 1280px) 
{
  .card-li{flex-direction: column;}
  .card-item{width: 100%;}
  html{min-width: 1280px; overflow-x: auto;}
}








@media (prefers-color-scheme: dark) {
  body, .tab-group,.box-txt {
    background: var(--darkgray);
  }
.login .logo { background: url(../images/logotype-dark.png) center no-repeat; text-indent: -9999px;}

  .sec-nav,
  .sec-input,
  .sec-result,
  .wrapbox,
  .modal .md-cont,
  .top-bar,
  .preview,
  .dropdown-content,
  .md-cont,
  .login-wrap,
  .composer,
  .history,
  .drop-cont,
  .tab-group input[type="radio"]:checked + label,
  #pressStorageTopBar {
    background: var(--black)!important;
  }

  .menu li a,
  .menu-name,
  .title,
  .ft-bar p,
  .pv-history,
  .pv-history p,
  .pv-history span,
  .card-tit,
  .card-time,
  .cont-item,
  .dropdown-btn,
  .dropdown-content a,
  .file-upload,
  .file-nam,
  .grp-inp p,
  .sec-tit,
  .grp0,
  .tab .grp-ico,
  .tab,
  .sum-tit,
  .login-wrap p,
  .login-wrap span,
  .menu li a i,
  .tab-group label,
  .pagination li a,
  .box-txt, .tb2 th , .tb3 th, 
  .srch,
  .compare-tit{
    color: var(--gray);
  }
  
.item-tit,
.login-wrap h1,
.pv-tab button,
.pv-tab > div,
.history li button,
.menu li.on a, 
.menu li.on a i,
.menu li.on:before,
.back-btn,
.sum-li-cont div a,
.sec-first h2,
.menu li.on.btn-his a, .menu li.on.btn-his a i,
.history li:hover a,
.drop-li,
.tab-group input[type="radio"]:checked + label,
.pagination li.on a, .box-txt h3, .tb2 td, .tb3 td{
  color: var(--white);
}

.btn,
.item-date,
.sum-txt,
.sum-li-cont,
.tb1 td,
.ft-lt li a,
.ftli dt,
.md-tit, .md-tit .btn-no,
.history ol a,
.tb1 th,
.checkbox-list li label, .select-all, .selc-li, .li-table li,.tb-tit
{
  color: var(--lightgray);
}

input[type="text"], 
input[type="password"], 
input[type="date"], 
select, 
.term-btn,
input[type="number"],
textarea ,
.textarea-wrapper,
.pv-history{
  background: var(--black);
  color: var(--white);
  border-color: var(--gray-6);
}
.srch{background: var(--gray-8);}
.srch input[type="text"]{background: none;}
.md-layer, .modal .md-cont{background: #121212; }
.ftli dd label{color: var(--lightgray);}
.ftli input[type="checkbox"]:checked + label, .selected-list li, .selected-list li i {  background: var(--blue); color: var(--white);}
.tb3 tbody tr:hover{background: none;}
.btn{background: var(--gray-7);}
.sum-article-li li:nth-child(odd){background: var(--gray-9);}
.history li:hover::before{position: absolute; content: ''; z-index: 0; width: 100%; height: 100%; background: var(--gray-4); border-radius: 8px; left: 0; top:0;}

.hist-modal {  position: absolute;  background-color: var(--black);  border: 1px solid var(--gray-2);  border-radius: 5px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  min-width: 100px;  z-index: 1000;  padding: 10px;}
.hist-modal .edit-btn,.hist-modal .delete-btn {  padding: 8px;  cursor: pointer;  text-align: center;  font-size: 0.9rem;  color: var(--gray);  text-align: left;}
.hist-modal .edit-btn:hover,.hist-modal .delete-btn:hover {  background-color: var(--gray-3);}
.selc-cont, .selc-cont.userpop{background: var(--black); color: var(--lightgray);}
.credits{background-color: var(--gray-1); color: var(--white);}
.credits dd span{color: var(--lightblue);}
.userpop .info-menu:hover{background-color: var(--black);}
.send-btn{background: var(--gray-8); color: var(--white);}
.send-btn:hover{color: var(--white); background: var(--gray-6);}
.btn-bl{border: 1px var(--blue) solid; color: var(--blue); background: var(--black);}
.btn-bl-half{border: 0; color: var(--blue); background: var(--blue-3);}
.btn-bl-fill{border:0; color:var(--white); background: var(--blue); }

.btn-lgr{border: 1px var(--gray-5) solid; background: var(--black);}
.btn-gr{border: 1px var(--gray) solid; color: var(--gray); background: var(--black);}
.btn-gr-half{border: 0; color: var(--gray); background: var(--gray-1);}
.btn-gr-fill{border:0; color:var(--gray); background: var(--gray); }

.btn-red{border: 1px var(--red) solid; color: var(--red); background: var(--black);}
.btn-red-half{border: 0; color: var(--red); background: var(--red-3);}
.btn-red-fill{border:0; color:var(--white); background: var(--red); }

.btn-grn{border: 1px var(--green) solid; color: var(--green); background: var(--black);}
.btn-grn-half{border: 0; color: var(--green); background: var(--green-2);}
.btn-grn-fill{border:0; color:var(--white); background: var(--green); }

.btn-hl { background: linear-gradient(130deg, var(--blue), var(--blue-5), var(--orange));}
.btn-hl::before { background-color: var(--black);}

.ai-textarea::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--blue), var(--blue-3), var(--orange)); border-radius: 1rem; z-index: -1;}

.tab.on { color: var(--white); border-bottom: 3px solid var(--white);}
.grp1, .tab.on .grp-ico{background-color: var(--blue-3);} 

.tb1 tbody tr:nth-child(odd){background: var(--gray-8);}
.composer{border: var(--gray-9) solid 1px;}

.you .bubble{background: var(--gray-1); color: var(--lightgray);}




}