*{box-sizing: border-box;}

section{
width:409px;
font-size:1.1em;
}
.d-flex{
display:flex;}
.card{
  position: relative;
  font-family:微軟正黑體;
  border:0.11em solid #C3C3C3;
  color:#2C2C2C;
  border-radius:8px;
}
.card-wraper{
  display:flex;
  
}
.img{
  position:relative;
  width:112px;
  height:152px;
  border-right:2.5px solid #C7C5C6;
  border-bottom:2.5px solid #C7C5C6;
  overflow: clip;
  background-color:#fff;
  top:-20px;
  margin-left: 8px;
  z-index:3;
  flex-shrink: 0;
}
.img .upload-area{
  position: relative;
  width:100%;
  height:100%;
  cursor: pointer;
}
.img .upload-area::before{
  content: "+";
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4em;
  color:#fff;
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,0.38);
  z-index: 2;
  opacity: 0;
  transition: .25s all;
}
.img .upload-area:hover::before{
  opacity: 1;
}
.img img{
  position: relative;
}

.card-head{
  position:relative;
  padding-left:120px;
  border-bottom:0.12em solid #C7C5C6;
 background: repeating-linear-gradient(
    to bottom,
    #EAEAEA 0px, 
    #EAEAEA 1.5px,  /* 線條寬度 */
    transparent 2px, 
    transparent 3.5px /* 線條間距 */
  );
  z-index:2;
}
.card-head ::placeholder{  color:#2C2C2C;}
.card-head::before{
  font-family:'Arial';
content: "Collections";;
  position:absolute;
  right:0;
  color:#E4E4E4;
  font-size:1.5em;
  font-weight:bold;
font-style: italic;
  bottom:-6px;
  letter-spacing:2px;
  z-index:0;
}
.card-head span{
  position:relative;
  z-index:2;
  display:block;
  padding:4px;
}
.card-body{
  word-break: break-word;
  padding:4px;
  min-height: 200px; /* 最小高度 */
  line-height:1.5;
 overflow-y: auto;  /* 鼠标悬停时显示滚动条 */
}

.card-footer span{
  color:#969696;
  margin-left:4px;
  margin-right:10px;
  font-size:0.9em;
}
.card-footer ::placeholder{  color:#969696;}
.card-footer label{
flex-shrink: 0;}
.card-footer span input{
  position:relative;
top: 1px;
  color:#969696;
}
#dragButton{
  position:absolute;
  right:0;
  bottom:0;
  width:20px;
  height:20px;
  overflow:hidden;
  cursor:pointer;
user-select: none; /* 禁止文本选择 */
}

#dragButton::before{
content: "";
  position: absolute;
  width: 300%;
  height: 200%;
  z-index: 999;
  background: repeating-linear-gradient( to bottom, #8A8A8A 0px, #8A8A8A 1.5px, transparent 2px, transparent 5px );
  transform: rotate(-45deg);
}
#close-btn{
position: absolute;
  display: flex;
  top: 0;
  right: 0;
  z-index: 9;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#C6DDF9), to(#748EC8));
  background-image: -webkit-linear-gradient(top, #C6DDF9, #748EC8); 
  border: 0.08em solid #000;
  border-radius: 10em;
  width: 13px;
  height: 13px;
  align-items: center;
  justify-content: center;
 cursor:pointer;
}
#close-btn::before{
  content:"x";
  position:absolute;
  top:-5px;
font-size: 0.75em; 
  font-weight: bold;
}

.card-groove{
  margin-top:10px;
  border:0.11em solid #C3C3C3;
  height:34px;
  border-radius:8px;
  display:flex;
  align-items: center;
}
.card-groove .in{
  height:19px;
width: 13px;
background-color:#fff;
border:1.5px solid #BFB9BA;
border-radius:2px;
transform:rotate(-50deg) skew(8deg);
margin-left:12px;
margin-right:4px;
}
.card-groove .un{
  height:19px;
width: 13px;
background-color:#C5B5BA;
border:1px solid #BFB9BA;
border-radius:2px;
transform:rotate(-50deg) skew(8deg);
margin-left:12px;
margin-right:4px;
}

.card input, textarea {
  all: unset;
  display: block;
  width: 100%;
  font-weight:normal;
}

.card input[type="text"] {
  background: none;
  border: none;
}

fieldset {
  text-align: left;
  margin-bottom: 40px;
}
.modal-content ul{
  margin:0;
  text-align: left;
}
.modal-content input{
margin: 4px 0;
font-size: 1.1em;
}
.btn{
  cursor: pointer;;
  padding: 8px 16px;
    background: #3966c6;
    color: #fff;
    border: none;
}
/* ----- Modal 設定 ----- */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index:999;
            padding: 30px;
            justify-content: center;
        }

        .modal-content {
          overflow: auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            width: 80%;
            display: flex;
                max-width: 500px;
                flex-direction: column;
                justify-content: space-between;
        }
.modal-controls{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.modal-footer{
  border-top:1px solid #c1c1c1;padding:8px;text-align: right;
}
        /* 🖼 Modal 內的圖片預覽區 */
        .preview-container {
            width: 110px;
            height: 150px;
            border: 1px solid #ddd;
            overflow: hidden;
            position: relative;
            margin: 10px auto;
            text-align: unset;
        }

        .preview-container img {
            cursor: grab;
        }

        /* 🎮 控制按鈕 */
        .modal-controls button {
            margin: 5px;
        }

/* 可以自定义滚动条样式（如果需要） */
.card-body::-webkit-scrollbar {
    width: 4px;

}

.card-body::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
visibility: hidden;
}

.card-body::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}