:root {
  /* 글자 크기 — 기본 11px */
  --fs-xl: 14px;
  --fs-lg: 12px;
  --fs-md: 11px;
  --fs-sm: 10px;
  --fs-xs: 9px;

  /* 윈도우 98 색 */
  --face: #c0c0c0;        /* 창 바탕 회색 */
  --face-lit: #dfdfdf;    /* 밝은 모서리 */
  --shadow: #808080;      /* 어두운 모서리 */
  --edge: #000000;        /* 가장 어두운 테두리 */
  --field: #ffffff;       /* 목록·입력칸 안쪽 흰색 */
  --fg: #000000;
  --fg-sub: #4d4d4d;
  --title1: #000080;      /* 제목 표시줄 남색 */
  --title2: #1084d0;
  --star: #eab308;        /* 즐겨찾기 별표 */
  --tag-bg: #c0c0c0;
  --tag-fg: #000000;
  --overlay: rgba(64, 64, 64, 0.7);   /* 상세보기 뒷배경 */
  --danger: #7f0000;

  --grid-gap: 2px;        /* 사진 사이 여백 */

  /* 맨 윗줄 로고. 이 두 값만 바꾸면 제목 표시줄 높이가 따라 맞춰진다. */
  --logo-h: 65px;         /* 로고 높이 */
  --logo-pad: 8px;        /* 로고 위아래 여백 */
  --sub-h: 15px;          /* 로고 아래 글자가 차지하는 높이 */
  --sub-ls: 0.9px;          /* 로고 아래 글자의 자간 */

  --search-gap: 15px;     /* 목차 버튼과 검색창 사이 최소 여백 */
  --search-btn-w: 44px;   /* 검색 버튼 폭 (검색창 묶음 최대 폭 계산용) */
  --upthumb-w: 250px;     /* 업로드 대기 목록의 사진 칸 (폰에서는 아래 미디어쿼리로 줄인다) */
  --upthumb-h: 200px;

  /* 사진 보기 창 안의 글자 */
  --dv-name: 13px;        /* 제목 */
  --dv-memo: 12px;        /* 메모 */
  --dv-tag: 11px;         /* 태그 */
  --fs-cp: 10px;          /* 쿠팡 파트너스 안내 문구 */

  /* 태그 목록 화면 */
  --tag-name: 13px;       /* 태그 이름 */
  --tag-cnt: 10px;        /* 태그 옆 사진 수 */

}

* { box-sizing: border-box; }

/* hidden 이 붙은 것은 무조건 숨긴다 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--face);
  color: var(--fg);
  font-family: "MS Sans Serif", Tahoma, Verdana, "Apple SD Gothic Neo", sans-serif;
  font-size: var(--fs-md);
  line-height: 1.45;
}

body { display: flex; flex-direction: column; overflow: hidden; }

button, input, select, textarea {
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--fg);
}

/* ---------- 윈도우 98 입체 테두리 ---------- */
/* 튀어나온 것 (버튼·창) */
.raised, button, nav.tabs button, .foldercard, .rowcard, .upitem, .statbox {
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-lit) var(--edge) var(--edge) var(--face-lit);
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 var(--shadow);
}
/* 눌린 것 / 안쪽으로 파인 것 (입력칸·목록) */
input[type="text"], input[type="password"], input[type="search"], textarea, select,
.sunken, main, .cell, .upthumb, .foldercard .sq, .folderrow .sq, .rowcard .thumb {
  background: var(--field);
}
/* 사진이 놓이는 판은 창 바탕과 같은 회색 */
main, .cell, .upthumb, .foldercard .sq, .folderrow .sq, .rowcard .thumb {
  background: var(--face);
  border: 1px solid;
  border-color: var(--shadow) #ffffff #ffffff var(--shadow);
  box-shadow: inset 1px 1px 0 var(--edge), inset -1px -1px 0 var(--face-lit);
}

button {
  cursor: pointer;
  border-radius: 0;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 52px;
}
/* 누르면 테두리가 뒤집히고 내용이 1px 내려간다.
   여백(padding)을 바꾸면 버튼 크기가 들썩이므로 transform 으로만 민다. */
button:active:not(:disabled) {
  border-color: var(--shadow) #ffffff #ffffff var(--shadow);
  box-shadow: inset 1px 1px 0 var(--edge), inset -1px -1px 0 var(--face-lit);
}
button:active:not(:disabled) > * { transform: translate(1px, 1px); }
button:active:not(:disabled) { text-indent: 1px; }
button:disabled { color: var(--shadow); text-shadow: 1px 1px 0 #ffffff; cursor: default; }
button.ghost { }                       /* 윈도우 98 에서는 버튼 생김새가 하나뿐이다 */
button.on, button.ghost.on, nav.tabs button.on {  /* 켜져 있는 상태 = 눌린 모양 */
  border-color: var(--shadow) #ffffff #ffffff var(--shadow);
  box-shadow: inset 1px 1px 0 var(--edge), inset -1px -1px 0 var(--face-lit);
  background:
    repeating-conic-gradient(var(--face) 0% 25%, var(--face-lit) 0% 50%) 0 0 / 2px 2px;
}
button.link {
  background: none; border: none; box-shadow: none; min-width: 0;
  padding: 0 3px; color: var(--title1); text-decoration: underline;
}
button.link:active { text-indent: 0; }
button.danger { color: var(--danger); font-weight: bold; }

input[type="text"], input[type="password"], input[type="search"], select, textarea {
  min-width: 0;
  border-radius: 0;
  padding: 3px 4px;
}
textarea { resize: vertical; }

/* 지금 어디에 연결돼 있는지 알리는 띠 */
.modebar {
  flex-shrink: 0; padding: 4px 8px; text-align: center;
  background: #ffffcc; border-bottom: 1px solid var(--shadow);
  font-size: var(--fs-sm);
}
.modebar.warn-server { background: #ffd6d6; font-weight: bold; }

/* 로그인 잠금 알림 띠 */
#alertbar {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; background: #ffd6d6;
  border-bottom: 1px solid var(--shadow);
  font-size: var(--fs-md); font-weight: bold; color: var(--danger);
}
#alertmsg { flex: 1 1 auto; min-width: 0; }

/* ---------- 상단 (창 안의 도구 모음) ---------- */
header { flex-shrink: 0; background: var(--face); border-bottom: 1px solid var(--shadow); }
.hrow { display: flex; align-items: center; gap: 5px; padding: 4px 6px; flex-wrap: wrap; }
.hrow + .hrow { border-top: 1px solid var(--face-lit); }
/* 맨 윗줄 전체가 창 제목 표시줄. 높이는 아래 padding 으로 조절한다. */
.apptitlebar {
  background: linear-gradient(90deg, var(--title1), var(--title2));
  padding: var(--logo-pad) 15px;
  position: relative;
  /* 로고가 흐름 밖에 있어 줄 높이를 밀어내지 못하므로 여기서 잡아준다.
     위아래 여백을 더한 값이라 두 변수 중 무엇을 바꿔도 알아서 맞는다. */
  min-height: calc(var(--logo-h) + var(--sub-h) + var(--logo-pad) * 2);
}
/* 로고와 그 아래 글자는 오른쪽 버튼 개수와 상관없이 줄 한가운데 놓여야 하므로
   흐름에서 빼내어 가운데에 고정한다. */
.appbrand {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.applogo { height: var(--logo-h); width: auto; display: block; }
.appsub {
  height: var(--sub-h); line-height: var(--sub-h);
  font-size: var(--fs-md); color: #ffffff; white-space: nowrap;
  letter-spacing: var(--sub-ls);
  /* 로고 묶음은 클릭을 통과시키므로 이 링크만 다시 받게 한다 */
  pointer-events: auto; text-decoration: none;
}
.title {
  font-size: var(--fs-lg); font-weight: bold; color: #ffffff;
  padding: 0 2px; margin-right: 2px;
}
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1 1 auto; }

nav.tabs { display: flex; gap: 3px; flex-wrap: wrap; }
/* 검색창은 목차 줄 맨 오른쪽. 기준 폭과 최소 폭을 0 으로 둬야 좁은 화면에서
   아랫줄로 밀려나지 않고 남는 공간만큼만 차지한다.
   줄 자체가 이미 gap 5px 을 주므로, 목차 버튼과의 실제 간격이 --search-gap 이
   되도록 그 차이만 왼쪽 여백으로 더한다. */
/* 목차와 검색창 사이 최소 간격. 줄 자체가 gap 5px 을 주므로 그 차이만 더한다. */
nav.tabs { margin-right: calc(var(--search-gap) - 5px); }
/* 검색창 + 검색 버튼 한 묶음. 위 규칙(늘어나기·오른쪽 붙기)은 이 묶음이 갖는다.
   최대 폭은 검색창 220px 에 버튼 자리를 더한 값이라 검색창 자체는 220px 을 지킨다. */
.searchwrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* 남는 자리가 생기면 버튼이 오른쪽 끝에 붙는다 */
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(220px + 4px + var(--search-btn-w));
  margin-left: auto;
}
.searchwrap > button { flex-shrink: 0; white-space: nowrap; min-width: 0; padding: 5px 8px; }
.searchbox {
  flex: 1 1 0;
  min-width: 0;
  max-width: 220px;
}
nav.tabs button { min-width: 0; padding: 5px 11px; }

.viewtoggle { display: flex; gap: 2px; }
.viewtoggle button { min-width: 0; padding: 3px 5px; line-height: 0; }
.viewtoggle svg { width: 12px; height: 12px; display: block; }

/* ---------- 본문 (안쪽으로 파인 흰 판) ---------- */
main { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; margin: 4px; }
.view { display: none; }
.view.on { display: block; }
.empty { color: var(--fg-sub); padding: 20px 0; text-align: center; }
.sectiontitle { font-size: var(--fs-md); font-weight: bold; margin: 0 0 5px; }

/* 그리드 보기 — 모바일 4개 / 데스크톱 8개 */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(8, 1fr); } }
.cell { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 자세히 보기 — 가로형 카드 */
.rows { display: flex; flex-direction: column; gap: 4px; }
.rowcard { display: flex; gap: 7px; align-items: flex-start; padding: 5px; position: relative; }
.rowcard .thumb { width: 120px; height: 90px; flex-shrink: 0; overflow: hidden; }
.rowcard .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rowcard .body { min-width: 0; flex: 1 1 auto; }
.rowcard .ttl { font-size: var(--fs-lg); font-weight: bold; margin-bottom:12px;}
/* 메모가 비어도 태그 위치가 고정되도록 한 줄 자리를 남긴다 */
.rowcard .memo {
  font-size: var(--fs-sm); color: var(--fg-sub);
  white-space: pre-wrap; word-break: break-word;
  min-height: calc(var(--fs-sm) * 2.15);
}

/* 태그 */
.tags { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.tag {
  background: var(--tag-bg); color: var(--tag-fg);
  padding: 0 5px; font-size: var(--fs-sm);
  border: 1px solid; border-color: #ffffff var(--shadow) var(--shadow) #ffffff;
}

/* 즐겨찾기 별 */
.star { width: 13px; height: 13px; display: block; fill: none; stroke: #ffffff; stroke-width: 1.5px; }
.star.on { fill: var(--star); stroke: #000000; }
.starbtn {
  position: absolute; right: 2px; bottom: 2px; z-index: 2;
  min-width: 0; padding: 2px; line-height: 0;
}

.starbtn.nopress { display: block; pointer-events: none; }
/* 즐겨찾기가 켜져 있으면 눌린 모양 */
.starbtn.on {
  border-color: var(--shadow) #ffffff #ffffff var(--shadow);
  box-shadow: inset 1px 1px 0 var(--edge), inset -1px -1px 0 var(--face-lit);
}
.rowcard .starbtn, .panel .starbtn { position: static; }
.rowcard .star, .panel .star { stroke: var(--shadow); }
.rowcard .star.on, .panel .star.on { stroke: #000000; }

/* 선택 모드 — 체크박스 등장 애니메이션 */
.check {
  position: absolute; left: 2px; top: 2px; z-index: 2;
  width: 14px; height: 14px; background: var(--field);
  border: 1px solid; border-color: var(--shadow) #ffffff #ffffff var(--shadow);
  box-shadow: inset 1px 1px 0 var(--edge);
  opacity: 0; transform: scale(.6);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.rowcard .check { left: auto; right: 5px; top: 5px; }
body.selectmode .check { opacity: 1; transform: scale(1); }
.check.on::after {
  content: ""; position: absolute; left: 4px; top: 0;
  width: 4px; height: 8px; border: solid #000000; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 폴더 */
.foldergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.foldercard { padding: 3px; }
.foldercard .tbar { margin: 0; }
.foldercard .fbody {
  background: var(--field);
  border: 1px solid; border-color: var(--shadow) #ffffff #ffffff var(--shadow);
  box-shadow: inset 1px 1px 0 var(--edge), inset -1px -1px 0 var(--face-lit);
  padding: 4px; margin-top: 3px;
}
.foldercard .sq {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; background: var(--field);
  border: none; box-shadow: none;
}
.foldercard .sq img { width: 100%; height: 100%; object-fit: cover; }
.foldercard .tbar span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foldercard .tbar span:last-child { flex-shrink: 0; padding-left: 6px; font-weight: normal; }
.cnt { color: var(--fg-sub); font-size: var(--fs-sm); }
.folderlist { display: flex; flex-direction: column; gap: 3px; }
.folderrow { display: flex; align-items: center; gap: 7px; padding: 4px 6px; cursor: pointer; background: var(--face); }
.folderrow .sq { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.folderrow .sq img { width: 100%; height: 100%; object-fit: cover; }
.folderico { width: 56%; height: auto; }
.folderrow .folderico { width: 20px; height: 17px; }
.rowbtns { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.foldercard .rowbtns { gap: 0 7px; margin-top: 2px; }

/* 스크롤해도 위에 붙어 있는 도구 줄 */
.stickybar {
  position: sticky; top: -6px; z-index: 5;
  background: var(--face);
  padding: 6px 0;
  border-bottom: 1px solid var(--shadow);
  margin-bottom: 6px;
}

/* 업로드 대기 목록 */
.uplist { display: flex; flex-direction: column; gap: 5px; }
.upitem { display: flex; gap: 7px; padding: 5px; align-items: flex-start; }
/* 고르기 체크박스는 썸네일 왼쪽 칸 */
.pickcell {
  flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 2px 4px 0; cursor: pointer;
}
.pickcell input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.upitem.picked { outline: 2px solid var(--title1); outline-offset: -1px; }
.upthumb { position: relative; width: var(--upthumb-w); height: var(--upthumb-h); flex-shrink: 0; overflow: hidden; cursor: pointer; }
/* 사진 속 글자를 읽을 수 있도록 잘라내지 않고 전체를 보여준다 */
.upthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 썸네일 위 오버레이 — 처리 중 / 완료 / 실패 */
.upthumb .ov { position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; color: #ffffff; font-size: var(--fs-sm); text-align: center; }
.upthumb.doing .ov { display: flex; background: rgba(0,0,128,.55); }
.upthumb.done  .ov { display: flex; background: rgba(0,0,0,.35); }
.upthumb.fail  .ov { display: flex; background: rgba(127,0,0,.6); }
.upfields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fieldrow { display: flex; gap: 4px; align-items: center; }
.fieldrow label { width: 34px; flex-shrink: 0; color: var(--fg); font-size: var(--fs-sm); }
/* 최근에 쓴 태그 — 눌러서 바로 넣는다 */
.recenttags { display: flex; flex-wrap: wrap; gap: 3px; padding-left: 38px; }
.recenttags button {
  min-width: 0; padding: 0 5px; font-size: var(--fs-sm);
}

.warn { color: var(--danger); font-size: var(--fs-sm); font-weight: bold; }

/* 통계 — 섹션 하나하나가 작은 창 (남색 제목 표시줄 + 흰 본문) */
.statbox { padding: 3px; margin-bottom: 6px; }
.statbox .tbar { margin: 0; }
.statbody {
  background: var(--field);
  border: 1px solid; border-color: var(--shadow) #ffffff #ffffff var(--shadow);
  box-shadow: inset 1px 1px 0 var(--edge), inset -1px -1px 0 var(--face-lit);
  padding: 5px 7px; margin-top: 3px;
}
.statline { display: flex; align-items: baseline; justify-content: space-between; padding: 1px 0; gap: 8px; }
.statline b { font-size: var(--fs-lg); }

/* ---------- 모달 = 윈도우 98 창 ---------- */
/* 작은 창(확인·입력·겹침 확인 등)은 사진 보기 창보다 위에 떠야 한다.
   같은 z-index 면 HTML 에서 나중에 나온 사진 보기 창이 덮어버려 안 보인다. */
.mask { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 12px; background: var(--overlay); }
#m-detail { z-index: 50; }
.mask.on { display: flex; }
.box {
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-lit) var(--edge) var(--edge) var(--face-lit);
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 var(--shadow), 2px 2px 0 rgba(0,0,0,.35);
  padding: 3px 9px 9px;
  width: 100%; max-width: 300px; max-height: 100%;
  overflow-y: auto; overflow-x: hidden;
}
/* 제목 표시줄 */
.box h3, .tbar {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, var(--title1), var(--title2));
  color: #ffffff; font-size: var(--fs-md); font-weight: bold;
  margin: 0 0 8px; padding: 2px 3px 2px 5px;
}
/* 제목 표시줄만 상자 가장자리까지 늘린다 */
.box > h3, .box > .tbar { margin-left: -6px; margin-right: -6px; }
/* 상자 안 입력칸은 상자 폭을 넘지 않는다 */
.box input, .box textarea, .box select { max-width: 100%; }
.box p { margin: 0 0 8px; }
.btnrow { display: flex; gap: 5px; justify-content: flex-end; margin-top: 9px; flex-wrap: wrap; }

/* 진행 모달 (작은 창 + 숫자 + 진행률 막대) */
#m-progress .box { max-width: 230px; }
.bar {
  height: 14px; margin-top: 5px; padding: 2px;
  background: var(--field);
  border: 1px solid; border-color: var(--shadow) #ffffff #ffffff var(--shadow);
  box-shadow: inset 1px 1px 0 var(--edge);
}
/* 윈도우 98 진행률 막대는 네모 칸이 채워지는 모양 */
.bar > i {
  display: block; height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, var(--title1) 0 8px, var(--face) 8px 10px);
  transition: width .15s linear;
}

/* 사진을 끌어다 놓는 자리 */
.dropzone {
  background: var(--field);
  border: 2px dashed var(--shadow);
  padding: 14px 10px; text-align: center;
}
.dropzone.over { border-color: var(--title1); background: #e8eeff; }
.dropzone b { font-size: var(--fs-md); }
#m-cover .box { max-width: 320px; }
#m-cover .dupprev { justify-content: center; }
#m-cover .dupprev img { width: 96px; height: 96px; }

/* 제목 표시줄 안에 놓는 버튼 */
.tbar button { min-width: 0; padding: 0 6px; }

/* 사진 상세보기 — 가로 최대 400px 창 */
.viewer {
  display: flex; flex-direction: column;
  width: 100%; max-width: 280px; max-height: 100%;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-lit) var(--edge) var(--edge) var(--face-lit);
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 var(--shadow), 2px 2px 0 rgba(0,0,0,.35);
  padding: 3px;
}
.viewer .tbar { margin-bottom: 3px; }
.viewer .stage {
  position: relative; flex-shrink: 0;
  height: 40vh; overflow: hidden;
  background: var(--field); touch-action: none;
  border: 1px solid; border-color: var(--shadow) #ffffff #ffffff var(--shadow);
  box-shadow: inset 1px 1px 0 var(--edge);
}
/* 사진은 가운데에 절대 위치로 둔다. 그래야 회전해도 창 크기가 흔들리지 않는다.
   회전했을 때의 최대 크기는 app.js 의 fitStageImage 가 계산해 넣는다. */
.viewer .stage img {
  position: absolute; left: 50%; top: 50%;
  display: block;
  /* 사진을 옆으로 밀 때 브라우저의 "이미지 끌기"가 끼어들어 스와이프가 끊기는 것을 막는다 */
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
.viewer .navbtn { position: absolute; top: 50%; transform: translateY(-50%); min-width: 0; padding: 6px 4px; }

.viewer .navbtn.prev { left: 4px; }
.viewer .navbtn.next { right: 4px; }
/* 사진 바로 아래 붙는 사진 정보 */
.panel { overflow-y: auto; padding: 6px 4px 2px; min-height: 0; }
.panel .head { display: flex; align-items: baseline; gap: 5px; }
.panel .head .ttl { font-size: var(--fs-md); font-weight: bold; word-break: break-word; }
/* 사진 보기 창 안에서는 글자를 조금 크게 본다 */
.viewer .panel .head .ttl { font-size: var(--dv-name); }
.viewer .panel .memo { font-size: var(--dv-memo); }
.viewer .panel .tags .tag { font-size: var(--dv-tag); }
.meta { color: var(--fg-sub); font-size: var(--fs-sm); margin-top: 2px; }
.dupprev { display: flex; gap: 5px; margin: 5px 0; }
.dupprev img {
  width: 72px; height: 72px; object-fit: cover; background: var(--field);
  border: 1px solid; border-color: var(--shadow) #ffffff #ffffff var(--shadow);
}

/* 제목 표시줄 오른쪽 닫기 버튼 (윈도우 98 창 모서리의 ✕) */
.tbtn {
  min-width: 0; width: 16px; height: 14px;
  padding: 0; line-height: 1; font-size: var(--fs-sm);
  display: flex; align-items: center; justify-content: center;
}

/* 폰에서는 업로드 대기 목록의 사진 칸을 줄인다. 안 그러면 가로를 거의 다 먹는다. */
@media (max-width: 767px) {
  :root { --upthumb-w: 180px; --upthumb-h: 144px; }
}

/* 태그 목록 — 태그 조각을 가나다순으로 늘어놓는다 */
.taglist { display: flex; flex-wrap: wrap; gap: 4px; }
.tagcard {
  display: flex; align-items: baseline; gap: 4px;
  min-width: 0; padding: 4px 6px;
}
.tagcard .tagname { font-size: var(--tag-name); }
.tagcard .cnt { font-size: var(--tag-cnt); }

/* 쿠팡 파트너스 배너 — 사진 바로 아래.
   배너는 300px 고정이라 좁은 폰에서는 삐져나온다. 남는 폭에 맞춰 줄이고(--cp-s),
   줄인 만큼 칸 높이도 줄인다(--cp-h). 두 값은 app.js 의 fitBanner 가 재서 넣는다. */
.cpad { margin-top: 3px; }
.cpwrap {
  width: 100%; height: var(--cp-h, 70px);
  display: flex; justify-content: center; overflow: hidden;
}
.cpwrap iframe {
  width: 300px; height: 70px; border: 0; display: block;
  transform: scale(var(--cp-s, 1)); transform-origin: top center;
}
.cpnote {
  margin: 3px 0 0; text-align: center; line-height: 1.35;
  font-size: var(--fs-cp); color: var(--fg-sub);
}