/* =====================================================================
   1단 구조  ·  상단 플레이어(왼쪽) / 가로 카테고리 / 본문 상자(공지 + 목록)
   / 하단 이미지·배너란.  색·너비·배경·커서는 스킨 옵션.
   ===================================================================== */
:root{
  --wrap-w:900px; --content-w:700px; --player-w:240px; --intro-img-w:240px;
  --gap:18px; --player-gap:28px; --top-space:40px; --content-min-h:420px;
  --fs:13px;
  --point:#c94b5c; --point2:#e79aa3; --ink:#222;
  --bg:#fff; --content-bg:#ffffff;
  --line:#d5d5d5; --muted:#8a8a8a; --field:#f6f6f6;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* "OOO 님의 블로그입니다" 상단 문구 숨기기 */
[data-tistory-react-app="Namecard"]{display:none}

body{
  /* 사이버틱한 느낌으로 굴림 계열을 우선 사용. 굴림은 진짜 굵은 글꼴이 따로 없어서
     font-weight를 세게 주면 브라우저가 억지로 두껍게(합성 볼드) 그려서 뭉개져 보임
     -> 기본은 얇게(400), 제목만 살짝(500) 주는 식으로 맞춤 */
  font-family:"Gulim","굴림","GulimChe","Dotum","돋움","Apple SD Gothic Neo",sans-serif;
  font-weight:400;
  font-size:var(--fs); line-height:1.7; color:var(--ink); background-color:var(--bg);
  background-position:center top;background-attachment:fixed;
}
body.bg-repeat-cover{background-size:cover;background-repeat:no-repeat}
body.bg-repeat-repeat{background-size:auto;background-repeat:repeat}

/* 공통 박스 (각 영역이 독립된 상자) */
.box{background:#fff;border:1px solid var(--line);padding:12px}

/* 전체 프레임 (배경 없음, 위치만) */
.wrap{
  position:relative;
  width:var(--wrap-w);
  max-width:100%; padding:0; margin-top:var(--top-space); margin-bottom:var(--top-space);
}
.wrap.is-center{margin-left:auto;margin-right:auto}
/* 겉을 감싸는 테두리는 쓰지 않음 (바깥 틀 / 본문 상자 모두) */
.wrap{border:0}
.main{border:0}

/* ===================== ① 상단 : 플레이어 (왼쪽 위) ===================== */
.topbar{display:flex;align-items:center;gap:var(--gap);margin-bottom:var(--player-gap)}
/* 상자가 아니라 한 줄짜리 최소 UI라, 폭은 내용만큼만 잡고 --player-w 는 '최대 폭'으로만 씀
   (곡 제목이 길어도 이 폭을 넘지 않게 줄임표로 잘림) */
.topbar__player{width:auto;max-width:min(100%,var(--player-w));flex:0 1 auto}
/* 플레이어 오른쪽 남는 자리 : 필요하면 여기에 자유롭게 뭔가 넣을 수 있게 비워둠 */
.topbar__free{flex:1 1 auto;min-width:0;text-align:right;color:var(--muted)}

/* ---- 플레이어 : 테두리·배경 없이 한 줄 ---- */
.mp{
  display:flex;align-items:center;gap:8px;
  border:0;background:transparent;padding:0;margin:0;
  line-height:1;
}
.mp__controls{display:flex;align-items:center;gap:6px;margin:0;flex:0 0 auto}
.mp__controls button{
  width:auto;height:auto;padding:0;border:0;background:none;
  color:var(--point2);font-size:calc(var(--fs) - 3px);line-height:1;cursor:pointer;
}
.mp__controls button:hover{color:var(--point);background:none}
.mp__nowplaying{
  margin:0;min-width:0;flex:0 1 auto;
  font-size:calc(var(--fs) - 1px);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#mp-artist-wrap{color:var(--muted)}

/* 재생 위치 막대 : 얇은 선 하나 */
.mp__seek{
  -webkit-appearance:none;appearance:none;
  width:64px;height:2px;flex:0 0 auto;margin:0;padding:0;
  background:var(--point);border:0;border-radius:0;cursor:pointer;
}
.mp__seek::-webkit-slider-thumb{-webkit-appearance:none;width:7px;height:7px;border:0;border-radius:50%;background:var(--point2)}
.mp__seek::-moz-range-thumb{width:7px;height:7px;border:0;border-radius:50%;background:var(--point2)}
.mp__seek::-moz-range-track{height:2px;background:var(--point);border:0}

/* 재생 시간(00:00 / 00:00) : 단순하게 보이려고 숨겨둠.
   다시 보이게 하려면 아래 display:none 을 지우세요 (스크립트는 그대로 동작 중) */
.mp__time{
  display:none;
  font-family:ui-monospace,"IBM Plex Mono",monospace;font-size:calc(var(--fs) - 3px);color:var(--muted);
}
.mp__vol{
  position:relative;width:40px;height:12px;flex:0 0 auto;margin:0;cursor:pointer;
  display:flex;align-items:center;
}
.mp__vol::before{
  content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:2px;background:var(--point);
}
.mp__vol-fill{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:2px;background:var(--point2);width:30%;pointer-events:none;
}
.mp__vol-thumb{
  position:absolute;top:50%;left:30%;
  width:7px;height:7px;border-radius:50%;background:var(--point2);
  transform:translate(-50%,-50%);pointer-events:none;
}
/* 유튜브로 소리만 재생할 때 쓰는 자리 : 화면 밖으로 밀어 두되 display:none 은 쓰지 않음
   (완전히 숨기면 브라우저가 재생을 막는 경우가 있음) */
.mp__yt{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

.yt-list--hidden{display:none}
.yt-list{list-style:none;margin:0;padding:0}
.yt-list li{
  padding:7px 8px;border-bottom:1px dotted var(--line);
  font-size:calc(var(--fs) - 1px);color:var(--ink);cursor:pointer;
}
.yt-list li:last-child{border-bottom:0}
.yt-list li:hover{color:var(--point)}

/* ===================== ② 가로 카테고리 ===================== */
.catbar{margin-bottom:var(--gap);padding:8px 12px;border:0;padding-left:0;padding-right:0} /* 카테고리 줄 테두리 없음 */
.catbar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 20px}
.catbar li{display:flex;align-items:baseline;gap:10px;position:relative;margin:0}
.catbar a{display:inline-block;padding:4px 2px;color:var(--ink);white-space:nowrap}
.catbar a:hover{color:var(--point)}
/* 하위 카테고리 : 기본은 부모 옆에 나란히, 조금 작고 흐리게 */
.catbar ul ul{gap:0 12px;margin:0}
.catbar ul ul a{font-size:calc(var(--fs) - 1px);color:var(--muted)}
.catbar ul ul a:hover{color:var(--point)}
.catbar .c_cnt,.catbar .cnt,.catbar .count{color:var(--muted);font-size:calc(var(--fs) - 3px);margin-left:3px}
/* 스크립트로 카테고리 <ul> 맨 앞에 붙는 '홈' 링크 : 카테고리들과 같은 모양 */
.catbar__home a{color:var(--ink)}
.catbar__home a:hover{color:var(--point)}
/* 스크립트로 카테고리 <ul> 맨 뒤에 붙는 '방명록' 링크. 다른 카테고리와 같은 모양이지만
   글 분류가 아니라서 살짝 구분되게 흐린 색으로 둠 (같게 하려면 아래 두 줄을 지우세요) */
.catbar__guest a{color:var(--muted)}
.catbar__guest a:hover{color:var(--point)}
/* 왼쪽 정렬 옵션 (스킨 편집에서 선택) */
.catbar.is-left ul{justify-content:flex-start}

/* ===================== ③ 본문 상자 ===================== */
.main{
  width:min(100%,var(--content-w));margin:0 auto;
  min-width:0;min-height:var(--content-min-h);padding:28px;
  background-color:var(--content-bg);
}
.main>*:first-child{margin-top:0}

/* ---- 공지란 : 이미지(왼쪽) + 텍스트(오른쪽) ---- */
.intro{display:flex;gap:22px;align-items:flex-start;margin-bottom:26px}
.intro__img{flex:0 0 auto;width:var(--intro-img-w);max-width:45%}
.intro__img img{width:100%;height:auto;border:1px solid var(--line)}
.intro__text{flex:1 1 auto;min-width:0;line-height:1.9}
.intro__text a{color:var(--point)}
/* 공지 글에 <p> 로 문단을 나눠 쓴 경우 : 위아래 여백을 본문과 비슷하게 맞춤 */
.intro__text p{margin:0 0 10px}
.intro__text p:last-child{margin-bottom:0}
.intro__text>*:first-child{margin-top:0}
.intro__text img{display:inline-block;margin:4px 0}
.intro__text hr{border:0;border-top:1px solid var(--line);margin:10px 0}

/* 티스토리 공지글 */
.notice{border:1px solid var(--line);padding:8px 12px;margin-bottom:18px}
.notice__item{color:var(--muted)}
.notice__item::before{content:"공지 · ";color:var(--point)}

/* ---- 목록(board) : 카테고리별 목록 스타일 ---- */
.board{margin:0}

/* 카드 공통 */
.card__link{display:block;color:var(--ink)}
.card__thumb img{width:100%;object-fit:cover;border:1px solid var(--line)}
.card__title{display:block;font-weight:500}
.card__summary{display:block;color:var(--muted)}
.card__meta{display:flex;gap:10px;color:var(--muted);font-size:calc(var(--fs) - 2px)}
.card__cmt{color:var(--point)}

/* 댓글은 기본 숨김 → 스트림(갤러리형2) 또는 글 상세에서만 노출 */
.card__comments{display:none}
/* 갤러리형2(스트림) 목록 : 사진 오른쪽 칸 자체에는 테두리를 두지 않음.
   (이 칸은 사진 높이만큼 세로로 늘어나서, 테두리를 주면 댓글 아래로 빈 공간이 길게 남음)
   align-self:start 로 내용 높이만큼만 차지하게 두고, 테두리는 아래 댓글란에만 두름 */
html.ls-stream .card__comments{
  grid-column:2;grid-row:1 / span 2;margin-top:0;align-self:start;
  border:0;padding:0;
}
/* 댓글란에도 테두리를 두지 않음 (테두리를 다시 넣고 싶으면 아래 줄에
   border:1px solid var(--line);padding:14px; 를 추가하면 됨) */
html.ls-stream .card__comments .comments{margin-top:0}
body#tt-body-page .card__comments{display:block;margin-top:34px}
body#tt-body-page .board{display:block}
body#tt-body-page .card{display:block}

/* ---- 글 상세(퍼머링크) ---- */
.post{padding:4px 0 8px}
.post__title{font-size:calc(var(--fs) + 6px);margin:0 0 8px;font-weight:700}
.post__meta{display:flex;gap:12px;color:var(--muted);font-size:calc(var(--fs) - 1px);margin-bottom:20px}
.post__meta a:hover{color:var(--point)}
.post__body{line-height:1.85}
.post__body img{margin:10px auto;border:1px solid var(--line);border-radius:var(--content-img-radius);background:var(--field)}
/* ---- 접은 글 (에디터의 '접은 글' 기능) ----
   티스토리는 <div data-ke-type="moreLess"> 안에 버튼(.btn-toggle-moreless)과
   내용(.moreless-content)만 넣어주고, 펼치고 접는 동작은 스킨이 맡는다.
   펼친 상태는 바깥 div 에 .open 클래스가 붙는 것으로 표시함 (티스토리 기본 방식과 동일).
   버튼을 누르는 처리는 skin-body.js 가 담당 */
div[data-ke-type="moreLess"]>.moreless-content{display:none}
div[data-ke-type="moreLess"].open>.moreless-content{display:block !important}
.btn-toggle-moreless{
  /* 가운데로 놓고 싶으면 margin 을 10px auto 로 바꾸세요 */
  display:block;width:fit-content;margin:10px 0;padding:0;cursor:pointer;
  border:0;background:none;color:var(--muted);font-size:calc(var(--fs) - 1px);
  text-decoration:none;
}
.btn-toggle-moreless:hover{color:var(--point)}

/* 글 아래에 티스토리가 자동으로 붙이는 "'○○' 카테고리의 다른 글" 목록.
   클래스로 바로 감춰서 잠깐 보였다 사라지는 일이 없게 함 (JS 쪽 제거는 안전망) */
.another_category,
[class*="another_category"]{display:none !important}

.post__tags{margin-top:20px;color:var(--muted);font-size:calc(var(--fs) - 1px)}
.post__admin{margin-top:14px;color:var(--muted);font-size:calc(var(--fs) - 2px)}
.post__admin a:hover{color:var(--point)}

/* 목록형 = 제목 + 날짜 */
html.ls-list .card{border-bottom:1px solid var(--line)}
html.ls-list .card__link{display:block;padding:11px 2px}
html.ls-list .card__thumb,html.ls-list .card__summary{display:none}
html.ls-list .card__body{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
html.ls-list .card__meta{flex:0 0 auto}
html.ls-list .card__cmt{display:none}

/* 갤러리형1 = 썸네일 격자 */
html.ls-gallery .board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
html.ls-gallery .card__link{display:block;padding:0}
html.ls-gallery .card__body{display:block}
html.ls-gallery .card__thumb{display:block}
html.ls-gallery .card__thumb img{aspect-ratio:1/1}
html.ls-gallery .card__title{margin-top:8px;text-align:center}
html.ls-gallery .card__summary,html.ls-gallery .card__meta{display:none}

/* 갤러리형2(스트림) = 본문 전체(이미지 포함) 좌측 + 제목/날짜·댓글 우측, 세로로 쭉 */
.card__full{display:none}
html.ls-stream .card{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;
  padding:22px 0;
}
/* 화면에 진입하자마자 바로 보이는 첫 몇 장은 제외하고, 스크롤을 꽤 내려야 나오는 카드부터만
   실제로 그리지 않고 대략적인 높이(640px)만 미리 잡아둠 -> 이미지가 하나씩 늦게 로드되면서
   카드들이 밀려 내려가는(계단식) 현상은 줄이면서, 눈에 잘 띄는 위쪽 카드에서 추정 높이와
   실제 높이가 달라 스크롤이 덜컹이는 것은 피함 */
html.ls-stream .card:nth-child(n+6){
  content-visibility:auto;
  contain-intrinsic-size:auto 640px;
}
/* 글 사이 구분선 : 기본은 없음. 스킨 편집 > '갤러리형2(스트림) 글 사이 구분선 사용'을 켜면 표시됨 */
html.ls-stream .card:first-child{padding-top:4px}
html.ls-stream .card__full{
  display:block;grid-column:1;grid-row:1 / span 2;
}
html.ls-stream .card__full img{margin:0 0 8px;border:1px solid var(--line);width:100%;border-radius:var(--content-img-radius);background:var(--field)}
html.ls-stream .card__full p{margin:0 0 8px}
html.ls-stream .card__date-badge{
  display:inline-block;margin-top:4px;
  font-family:ui-monospace,"IBM Plex Mono",monospace;font-size:calc(var(--fs) - 2px);
  color:var(--muted);background:var(--field);border:1px solid var(--line);padding:5px 10px;
}
html.ls-stream .card__full-title{
  display:none;
}
html.ls-stream .card__thumb,html.ls-stream .card__summary,html.ls-stream .card__link{display:none}

/* ---- 댓글 / 방명록 폼 ---- */
.comments{margin-top:14px;padding-top:0}

/* 티스토리가 글 아래에 자동으로 붙이는 영역들 숨기기
   · container_postbtn : 공감/공유/신고 버튼
   · another_category  : "'○○' 카테고리의 다른 글" 목록
   스크립트(skin-head.js 의 stripRelated)로도 지우지만, 그건 티스토리가 그린 뒤에 도는 거라
   잠깐 보였다 사라질 수 있어서 CSS 로 처음부터 안 보이게 해둠 */
.container_postbtn{display:none !important}
.another_category,.another_category_rolling,#another_category,
.area_related,.related_post,.tt_article_related{display:none !important}

.comments__list ol,.comments__list ul{list-style:none;margin:0;padding:0}
.c{padding:12px 0;border-top:1px solid var(--line)}
.c:first-child{border-top:0}
.c__head{display:flex;gap:9px;align-items:baseline}
.c__name{font-weight:600}
.c__date{color:var(--muted);font-size:calc(var(--fs) - 3px)}
.c__body{margin-top:5px}
.c__ctrl{margin-top:5px;color:var(--muted);font-size:calc(var(--fs) - 3px)}
.c__ctrl a:hover{color:var(--point)}
.c--reply{margin-left:18px;border-top:1px dashed var(--line)}
.c--reply::before{content:"⤷ ";color:var(--muted)}
.secret .c__body,.c.secret .c__body{color:var(--point2)}

.cform{margin-top:18px}
.cform__id{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.cform__id input{flex:1 1 90px;min-width:0;border:1px solid var(--line);padding:7px 9px;background:#fff}
.cform__secret{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:calc(var(--fs) - 1px);margin-bottom:7px;cursor:pointer}
.cform textarea{width:100%;min-height:88px;resize:vertical;border:1px solid var(--line);padding:11px;background:#fff}
.cform__send{margin-top:8px;border:1px solid var(--ink);background:#fff;color:var(--ink);padding:8px 20px;cursor:pointer}
.cform__send:hover{background:var(--ink);color:#fff}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--point)}

/* ---- 방명록 ---- */
.guest__img{text-align:center;margin-bottom:16px}
.guest__img img{margin:0 auto}
.guest__form{margin-top:0;margin-bottom:24px}
.guest__list{border-top:1px solid var(--ink);padding-top:14px}

/* ---- 홈 커버 ---- */
.cover{margin-bottom:8px}
.cover>*+*{margin-top:34px}
.cover__label{color:var(--muted);font-size:calc(var(--fs) - 1px);margin-bottom:12px}
.cover__label:empty{display:none}
.cover-featured__item{display:block}
.cover-featured__frame{max-width:260px;margin:0 auto 14px;display:block}
.cover-featured__frame img{max-width:100%;width:auto;height:auto;display:block;margin:0 auto}
.cover-featured__title{display:block;font-weight:700;font-size:calc(var(--fs) + 3px)}
.cover-featured__summary{margin-top:8px;color:var(--muted)}
.cover-row{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.cover-row:first-of-type{border-top:0}
.cover-row__thumb img{width:70px;height:70px;object-fit:cover;border:1px solid var(--line)}
.cover-row__title{display:block;font-weight:600}
.cover-row__summary{display:block;color:var(--muted);margin-top:3px}
.cover-row__meta{display:block;color:var(--muted);font-size:calc(var(--fs) - 3px);margin-top:6px}
.cover__more{display:inline-block;margin-top:14px;color:var(--point)}

/* ---- 페이징 ---- */
.paging{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:26px;color:var(--muted)}
.paging a{padding:6px 10px;border:1px solid transparent}
.paging a:hover{color:var(--point)}
.paging .num[selected]{border-color:var(--line);color:var(--ink)}
.paging .no_more{opacity:.3;pointer-events:none}

/* ---- 반응형 ---- */
@media (max-width:900px){
  .wrap{width:100%}
  .main{padding:20px}
  .topbar{flex-wrap:wrap;gap:10px}
  .topbar__player{max-width:100%}
  .topbar__free{text-align:right}
  .catbar ul{gap:2px 14px}
  .intro{flex-direction:column;gap:14px}
  .intro__img{width:100%;max-width:100%}

  html.ls-gallery .board{grid-template-columns:repeat(2,1fr)}

  /* 갤러리형2(스트림) : 데스크톱은 [본문] [제목/댓글] 2열 그리드였는데,
     좁은 화면에서는 .card 자체를 1열로 바꾸고 그 안의 칸도 고정 grid-column/grid-row를
     풀어서 위→아래로 자연스럽게 쌓이게 함 */
  html.ls-stream .card{grid-template-columns:1fr;gap:14px}
  html.ls-stream .card__full,html.ls-stream .card__comments{grid-column:1;grid-row:auto}
  html.ls-stream .card__comments{margin-top:6px}

  .cover-featured__item{grid-template-columns:1fr}
  /* 손가락으로 누르기엔 좁았던 클릭/터치 영역들을 넉넉하게 */
  .catbar a{padding:8px 4px}
  /* 손가락으로 누를 수 있게 여백만 넓힘 (테두리 없는 모양은 그대로) */
  .mp__controls{gap:10px}
  .mp__controls button{font-size:calc(var(--fs) - 2px);padding:6px 2px}
  .paging a{padding:9px 11px}
  .yt-list li{padding:10px 8px}
  .cform__send{padding:11px 22px}
}

@media (max-width:480px){
  /* 작은 화면에서는 기본 글자 크기를 한 단계 키워서 가독성 확보
     (--fs 기준으로 제목/본문/메타 폰트가 전부 비례해서 커짐) */
  :root{--fs:14px}
  .main{padding:16px}
  .wrap{margin-top:24px;margin-bottom:24px}
}