/* Hangul glyphs rendered ~2px smaller than Latin at the same font-size,
   without affecting English text (unicode-range scopes this to Korean only) */
@font-face{
  font-family:'SiteFontKR';
  unicode-range:U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
  src:local('Apple SD Gothic Neo'), local('Malgun Gothic'), local('NanumGothic'), local('Noto Sans KR');
  size-adjust:88.2%;
}

*{
  margin:0;
  padding:0;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
  font-family:var(--site-font);
  word-break:keep-all;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

*::-webkit-scrollbar{
  display:none;
}

:root{
  --sidebar-width:26%;
  --content-gap:20px;
  --top-spacing:40px;
  --text-color:#000000;
  --site-font:'SiteFontKR', Arial, Helvetica, sans-serif;
  --selection-bg:#ffffff;
}

::selection{
  background:var(--selection-bg);
}

::-moz-selection{
  background:var(--selection-bg);
}

html{
  font-size:17px;
}

body{
  background:#d8d8d8;
  color:var(--text-color);
  transition:color 0.4s ease;
}

a,
a:link,
a:visited{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

/* sidebar */
.sidebar{
  position:fixed;
  left:0;
  top:0;
  width:var(--sidebar-width);
  height:100vh;
  padding:var(--top-spacing) 30px;
  border-right:0.5px solid #b0b0b0;
  overflow-y:auto;
  background:#d8d8d8;
  z-index:1000;
  display:flex;
  flex-direction:column;
}

.sidebar::after{
  content:'';
  position:absolute;
  top:0;
  right:-4px;
  width:0.5px;
  height:100%;
  background:#b0b0b0;
}

/* logo */
.logo{
  display:flex;
  align-items:center;
  font-size:17px;
  color:var(--text-color);
  margin-bottom:16px;
  font-weight:normal;
  transition:color 0.4s ease;
}

.logo-text{
  white-space:nowrap;
  cursor:pointer;
}

/* sidebar intro text */
.sidebar-intro{
  font-size:17px;
  line-height:24.35px;
  color:var(--text-color);
  margin-bottom:32px;
  transition:color 0.4s ease;
}

.sidebar-intro p{
  margin-bottom:16px;
}

/* menu toggle */
.menu-toggle{
  display:block;
  font-size:22px;
  background:none;
  border:none;
  padding:0;
  margin-bottom:24px;
  cursor:pointer;
  color:var(--text-color);
  transition:color 0.4s ease;
}

/* menu */
.menu{
  margin-left:3px;
  display:none;
}

.sidebar.open .menu{
  display:block;
}

.menu li{
  margin-bottom:14px;
}

.menu a{
  color:var(--text-color);
  font-size:17px;
  transition:color 0.4s ease;
}

.menu a:hover,
.menu a.active{
  color:white;
}

.submenu a.active{
  color:white;
  font-weight:bold;
}

.submenu{
  margin-left:18px;
  margin-top:6px;
  display:none;
}

.menu-item.open .submenu{
  display:block;
}

/* content */
.content{
  margin-left:calc(var(--sidebar-width) + var(--content-gap));
  padding:var(--top-spacing) 0 60px 0;
  width:calc(100% - var(--sidebar-width) - var(--content-gap));
  min-height:100vh;
}

/* common page */
.page-section{
  display:none;
}

.page-section.active{
  display:block;
}

/* text page */
.text-page{
  max-width:720px;
  padding:0 20px;
  line-height:1.5;
  font-size:17px;
}

/* grid */
.image-grid.active{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  align-items:start;
  padding:0 20px;
}

/* home page */
.home-page{
  padding:0 20px;
}

.home-title{
  font-size:17px;
  font-weight:normal;
  margin-bottom:24px;
  padding:0 20px;
  cursor:pointer;
  width:fit-content;
}

#home-grid-items{
  padding:0;
}

.item{
  display:block;
  cursor:pointer;
}

.item img{
  width:100%;
  height:auto;
}

/* detail page */
.detail-page{
  width:100%;
  max-width:940px;
  padding:0 20px;
  margin:0 auto;
}

.project-header{
  margin-bottom:32px;
  width:fit-content;
}

.project-title{
  font-size:17px;
  font-weight:normal;
  line-height:23.5px;
  margin-bottom:8px;
}

.project-date{
  font-size:17px;
  line-height:23.5px;
}

.project-meta{
  display:none;
}

.meta-row{
  display:flex;
  gap:24px;
  margin-bottom:10px;
  align-items:flex-start;
}

.meta-label{
  width:100px;
  flex-shrink:0;
}

.meta-value{
  flex:1;
  line-height:1.4;
}

.project-description{
  max-width:900px;
  margin-bottom:40px;
  line-height:1.5;
}

.project-description p{
  margin-bottom:16px;
}

.project-images{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.project-image-block{
  margin:0;
}

.detail-image{
  width:100%;
  max-width:900px;
  height:auto;
  display:block;
}

/* responsive */
@media (max-width:1024px){
  .content{
    margin-left:calc(var(--sidebar-width) + 20px);
    width:calc(100% - var(--sidebar-width) - 20px);
    padding:var(--top-spacing) 0 50px 0;
  }

  .image-grid.active{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    padding:0 20px;
  }

  .home-page{
    padding:0 20px;
  }

  .home-title{
    padding:0 20px;
  }

  .detail-page{
    padding:0 20px;
  }

  .text-page{
    padding:0 20px;
  }

  #tinyinterest{
    padding:0 20px 200px;
  }
}

@media (max-width:700px){
  .sidebar{
    position:relative;
    width:100%;
    height:auto;
    border-right:none;
    border-bottom:1px solid #999;
    padding:20px 20px;
  }

  .sidebar::after{
    top:auto;
    right:0;
    bottom:-4px;
    left:0;
    width:100%;
    height:0.5px;
  }

  .content{
    margin-left:0;
    width:100%;
    padding:20px 0 40px;
  }

  .image-grid.active{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    padding:0 16px;
  }

  .home-page{
    padding:0 16px;
  }

  .home-title{
    padding:0 16px;
  }

  .detail-page{
    padding:0 16px;
  }

  .text-page{
    padding:0 16px;
  }

  #tinyinterest{
    padding:0 16px 160px;
  }

  .logo{
    margin-bottom:20px;
  }

  .logo-text{
    font-size:16px;
  }

  .project-title{
    font-size:24px;
    line-height:33.3px;
  }

  .meta-row{
    flex-direction:column;
    gap:4px;
  }

  .meta-label{
    width:auto;
  }

  .project-description{
    max-width:100%;
  }

  .detail-image{
    max-width:100%;
  }
}

@media (max-width:480px){
  .image-grid.active{
    grid-template-columns:1fr;
    padding:0 12px;
  }

  .home-page{
    padding:0 12px;
  }

  .home-title{
    padding:0 12px;
  }

  .detail-page,
  .text-page{
    max-width:100%;
    padding:0 12px;
  }
}

/* =========================
   TINY INTEREST (POST SYSTEM)
========================= */

#tinyinterest{
  position:relative;
  min-height:100vh;
  padding:0 24px 200px;
}

/* 게시글들이 쌓이는 영역 */
#post-canvas{
  position:relative;
  width:100%;
  min-height:60vh;
}

/* =========================
   POST IT (업로드된 글)
========================= */

.post-card{
  position:absolute;
  width:220px;
  height:220px;
  background:#f2f2f2;
  border:1px solid #999;
  outline:1px solid #999;
  outline-offset:3px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  cursor:grab;
  overflow:hidden;
}

.post-card:active{
  cursor:grabbing;
}

.post-card.owner-post{
  background:#f5f5f5;
}

.post-author{
  font-size:14px;
  border-bottom:1px solid #999;
  padding-bottom:4px;
}

.post-image{
  width:100%;
  height:120px;
  object-fit:contain;  
  background:transparent;
  display:block;

}

.post-text{
  flex:1;
  font-size:14px;
  overflow:auto;
  line-height:1.2;
}

/* 복사/삭제 버튼 한 줄 정렬 */
.post-actions{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  align-items:center;
  gap:8px;
}

.post-copy,
.post-delete{
  width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  color:inherit;
}

.post-copy svg{
  width:14px;
  height:14px;
}

.post-copy:hover,
.post-delete:hover{
  color:white;
}

/* =========================
   EDITOR (하단 입력 UI)
========================= */

.post-editor{
  position:fixed;
  bottom:30px;
  left:calc(var(--sidebar-width) / 2 + 50%);
  transform:translateX(-50%);
  width:500px;
}

.editor-fields{
  display:flex;
  flex-direction:column;
  background:#d8d8d8;
}

.editor-fields input,
.editor-fields textarea,
#image-drop{
  border:none;
  border-bottom:1px solid var(--text-color);
  padding:10px 0;
  font-size:17px;
  background:transparent;
  outline:none;
  color:var(--text-color);
  opacity:0.5;
  width:100%;
  transition:color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
}

.editor-fields input::placeholder,
.editor-fields textarea::placeholder{
  color:var(--text-color);
  opacity:1;
}

.editor-fields input:focus,
.editor-fields textarea:focus{
  opacity:1;
}

.editor-fields textarea{
  height:80px;
  resize:none;
}

#image-drop{
  cursor:pointer;
}

#uploadBtn{
  border:none;
  background:none;
  padding:10px 0;
  font-size:17px;
  color:var(--text-color);
  opacity:0.5;
  width:100%;
  text-align:right;
  cursor:pointer;
  transition:color 0.4s ease, opacity 0.4s ease;
}

#uploadBtn:hover{
  opacity:1;
}

/* =========================
   PROJECT EDIT CONTROLS
========================= */

#owner-edit-btn{
  display:none;
  position:fixed;
  bottom:30px;
  right:30px;
  padding:10px 24px;
  border:1px solid #999;
  background:#d8d8d8;
  cursor:pointer;
  font-size:15px;
  z-index:1500;
}

#owner-edit-btn:hover{
  background:white;
}

#edit-save-bar{
  display:none;
  position:fixed;
  bottom:30px;
  right:30px;
  gap:10px;
  z-index:1500;
}

#edit-save-bar.active{
  display:flex;
}

#edit-save-bar button{
  padding:10px 24px;
  border:1px solid #999;
  background:#d8d8d8;
  cursor:pointer;
  font-size:15px;
}

#edit-save-bar button:hover{
  background:white;
}

.is-editing{
  outline:1px dashed #aaa;
  min-height:1em;
  cursor:text;
  padding:2px 4px;
}

.image-editable{
  cursor:pointer;
  opacity:0.75;
  transition:opacity 0.2s;
}

.image-editable:hover{
  opacity:0.5;
}

.set-thumb-btn,
.thumb-set-btn,
.delete-img-btn{
  display:inline-block;
  margin-top:6px;
  margin-right:4px;
  padding:4px 12px;
  font-size:14px;
  border:1px solid #999;
  background:#d8d8d8;
  cursor:pointer;
}

.set-thumb-btn.is-thumb,
.thumb-set-btn.is-thumb{
  background:black;
  color:white;
  border-color:black;
}

.set-thumb-btn:hover:not(.is-thumb),
.thumb-set-btn:hover:not(.is-thumb),
.delete-img-btn:hover{
  background:white;
}

/* =========================
   UPLOAD CONFIRM MODAL
========================= */

.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.3);
  z-index:2000;
  align-items:center;
  justify-content:center;
}

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

.modal-box{
  background:#d8d8d8;
  border:1px solid #999;
  padding:28px 24px;
  max-width:320px;
  width:90%;
  text-align:center;
}

.modal-box p{
  font-size:16px;
  line-height:1.5;
  margin-bottom:20px;
}

.modal-buttons{
  display:flex;
  gap:10px;
  justify-content:center;
}

.modal-buttons button{
  border:1px solid #999;
  background:#d8d8d8;
  padding:8px 16px;
  cursor:pointer;
  font-size:15px;
}

.modal-buttons button:hover{
  background:white;
}

/* 관리 모달 */
.manage-modal-box{
  max-width:400px;
  text-align:left;
}

.manage-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.manage-row span{
  flex:1;
  font-size:16px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.manage-btn{
  border:1px solid #999;
  background:#d8d8d8;
  padding:4px 10px;
  cursor:pointer;
  font-size:14px;
  white-space:nowrap;
  flex-shrink:0;
}

.manage-btn:hover{
  background:white;
}

.manage-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:20px;
  border-top:0.5px solid #999;
  padding-top:16px;
}

/* =========================
   ADD IMAGE / CATEGORY / ITEM BUTTONS
========================= */

.add-image-slot-btn{
  display:block;
  margin-top:12px;
  padding:8px 20px;
  border:1px solid #999;
  background:#d8d8d8;
  cursor:pointer;
  font-size:15px;
}

.add-image-slot-btn:hover{
  background:white;
}

img.detail-image[src=""]{
  display:none;
}

/* 사이드바 하단 오너 액션 */
#sidebar-owner-actions{
  display:none;
  margin-top:auto;
  padding-top:24px;
  border-top:0.5px solid #b0b0b0;
}

.sidebar-owner-btn{
  display:block;
  font-size:17px;
  color:var(--text-color);
  margin-bottom:14px;
  margin-left:3px;
  cursor:pointer;
  transition:color 0.4s ease;
  background:none;
  border:none;
  padding:0;
  text-align:left;
  width:100%;
}

.sidebar-owner-btn:hover{
  color:white;
}

/* =========================
   RESPONSIVE FIX
========================= */

@media (max-width:700px){

  .post-editor{
    width:90%;
    left:50%;
  }

  .post-card{
    width:180px;
    height:180px;
  }
}

/* =========================
   REMIX BALL
========================= */

.remix-ball{
  position:fixed;
  top:0;
  left:0;
  width:105px;
  height:105px;
  border-radius:50%;
  border:1px solid #999;
  outline:1px solid #999;
  outline-offset:3px;
  background:#d8d8d8;
  color:var(--text-color);
  font-size:19px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1800;
  transition:color 0.4s ease;
}

.remix-ball:hover{
  background:white;
}