/*
  ============================================================
  style.css  =  이 웹페이지의 "옷"
  ------------------------------------------------------------
  CSS는 "어떻게 보일지"를 정합니다. 기본 문법은 이렇습니다:

      꾸밀대상 { 속성: 값; }

  예)  h1 { color: red; }   ->  모든 h1 제목을 빨간색으로

  꾸밀 대상을 고르는 방법 3가지:
      h1        -> h1 태그 전부
      .wrap     -> class="wrap" 인 것 전부   (점 . 으로 시작)
      #todayLabel -> id="todayLabel" 인 것 하나 (샵 # 으로 시작)

  지금 읽고 계신 이 부분은 "주석"이며 디자인에 아무 영향을 주지 않습니다.

  ※ 주의 — HTML과 마찬가지로 CSS도 주석 안에 주석을 넣을 수 없습니다.
     가장 먼저 나오는 닫는 표시에서 끝나버립니다.
  ============================================================
*/

/* ---------- 1) 색깔을 이름표로 미리 정해두기 ----------
   같은 색을 여러 곳에서 쓸 때, 매번 색상 코드를 적는 대신
   이름을 붙여두면 나중에 한 곳만 고쳐도 전체가 바뀝니다.
   --이름: 값;  으로 만들고   var(--이름)  으로 꺼내 씁니다. */
:root {
  --bg:        #f7f7f5;   /* 배경색 (아주 옅은 회색) */
  --surface:   #ffffff;   /* 카드 배경 (흰색) */
  --text:      #1a1a1a;   /* 본문 글자색 */
  --text-soft: #5c5c58;   /* 덜 중요한 글자색 */
  --text-mute: #8a8a85;   /* 가장 흐린 글자색 */
  --line:      #e3e3df;   /* 경계선 */
  --accent:    #1c5d7a;   /* 강조색 (차분한 청록) */
  --accent-bg: #e8f0f4;   /* 강조색의 옅은 배경 */
  --warn:      #8a4b2a;   /* 오류 메시지 색 */
  --warn-bg:   #faf0e8;
  --radius:    10px;      /* 모서리 둥글기 */
  --field-h:   40px;      /* 선택창·버튼·입력칸의 공통 높이 */
}

/* 사용자가 기기를 "다크 모드"로 쓰고 있으면 색만 바꿔줍니다.
   구조는 그대로이고 위에서 정한 이름표의 값만 갈아끼우는 것입니다. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #16181a;
    --surface:   #1f2225;
    --text:      #eceae5;
    --text-soft: #b3b1ab;
    --text-mute: #86847f;
    --line:      #33373b;
    --accent:    #7fc0dd;
    --accent-bg: #23343d;
    --warn:      #e3a279;
    --warn-bg:   #33261d;
  }
}

/* ---------- 2) 전체 기본값 ---------- */

/* * 는 "모든 것"이라는 뜻입니다.
   box-sizing 은 크기를 계산하는 방식인데, border-box 로 두면
   여백을 줘도 요소가 예상보다 커지지 않아 훨씬 다루기 쉽습니다. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;                       /* 브라우저 기본 여백 제거 */
  background: var(--bg);
  color: var(--text);
  /* 글꼴은 앞에서부터 순서대로 시도합니다. 없으면 다음 것을 씁니다. */
  font-family: -apple-system, "Apple SD Gothic Neo", "Pretendard",
               "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;                /* 줄 간격. 논문 읽기엔 넉넉한 편이 좋습니다 */
  /*
    한국어가 단어 중간에서 잘리지 않게 합니다.

    브라우저는 한글을 '글자 단위로 아무 데서나 끊어도 되는 글'로 취급합니다.
    그래서 "그대로 보여줍니다." 가 "…보여줍니" / "다." 처럼 나뉘어
    마지막 줄에 글자 하나만 남는 일이 생겼습니다.
    keep-all 은 "띄어쓰기에서만 줄을 바꿔라" 라는 뜻입니다.

    anywhere 는 그 예외입니다. 한 줄에 도저히 안 들어가는 아주 긴 낱말
    (긴 영문 학술용어나 주소 같은 것)까지 밀어내지 않도록, 그때만 끊게 합니다.
  */
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}

/* class="wrap" 인 곳: 내용이 너무 옆으로 퍼지지 않게 폭을 제한하고 가운데 정렬 */
.wrap {
  max-width: 760px;      /* 최대 폭. 글줄이 너무 길면 읽기 힘듭니다 */
  margin: 0 auto;        /* 좌우 auto = 가운데 정렬 */
  padding: 0 20px;       /* 좌우 안쪽 여백 (휴대폰에서 글이 화면에 붙지 않게) */
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ---------- 3) 맨 위 머리말 ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 40px 0 28px;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.12em;    /* 글자 사이를 벌려 라벨처럼 보이게 */
  text-transform: uppercase; /* 영문을 모두 대문자로 */
  color: var(--text-mute);
}

h1 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lede {
  margin: 0;
  color: var(--text-soft);
}

.today {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-mute);
}

/* 글 속에 섞여 있는 작은 단추 (본 기록 지우기).
   단추처럼 보이면 이 줄이 시끄러워지므로 링크처럼 보이게 합니다. */
.link-btn {
  font: inherit;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-btn:hover { opacity: 0.75; }

/* ---------- 4) 검색 조건 영역 ----------
   예전에는 flex(가로로 늘어놓고 넘치면 줄바꿈)를 썼는데,
   선택칸이 다섯 개로 늘어나면서 문제가 생겼습니다.
   flex 는 남는 공간을 마지막 줄에 있는 것들끼리 나눠 갖기 때문에,
   윗줄에는 세 개, 아랫줄에는 두 개가 놓이면 아랫줄 칸만 유난히
   넓어져서 세로선이 어긋나 보입니다.

   그래서 grid(격자)로 바꿨습니다. 격자는 줄마다 칸 너비가 똑같으므로
   두 줄이 되어도 위아래 칸의 좌우 끝이 정확히 맞아떨어집니다. */
.controls {
  display: grid;
  /* minmax(0, 1fr) = "남는 공간을 똑같이 나눠 갖되, 내용이 길어도
     칸 밖으로 삐져나오지 않게" 라는 뜻입니다.
     그냥 1fr 로 두면 긴 글자 때문에 칸이 불쑥 넓어질 수 있습니다. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;        /* 세로 간격 14px, 가로 간격 16px */
  align-items: end;      /* 각 칸의 내용을 아래쪽 기준선에 맞춤 */
  margin: 28px 0 24px;
}

.control {
  display: flex;
  flex-direction: column;  /* 라벨과 선택창을 세로로 쌓음 */
  gap: 6px;
  min-width: 0;            /* 긴 글자가 칸을 밀어내지 못하게 막습니다 */
}

.control label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.01em;
  /* 라벨이 두 줄로 접히면 그 칸의 선택창만 아래로 내려가 어긋납니다.
     칸 너비보다 길면 줄바꿈 대신 "..." 으로 줄여서 높이를 지킵니다. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 버튼 두 개가 들어가는 칸. 선택창과 같은 줄에 아래쪽을 맞춰 놓습니다. */
.control-actions {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  justify-content: flex-end;  /* 오른쪽 끝에 붙입니다 */
}

select {
  font: inherit;                    /* body의 글꼴을 그대로 물려받음 */
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  width: 100%;
  /* 선택창과 버튼의 높이를 같은 값으로 못박아 둡니다.
     안쪽 여백으로만 맞추면 글꼴이나 기기에 따라 1~2px 씩 어긋나서,
     나란히 놓았을 때 아랫선이 미세하게 틀어져 보입니다. */
  height: var(--field-h);
}

.btn-primary {
  font: inherit;
  font-weight: 600;
  padding: 0 18px;
  height: var(--field-h);   /* 선택창과 아랫선을 정확히 맞춥니다 */
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;             /* 마우스를 올리면 손가락 모양으로 */
  transition: opacity 0.15s;   /* 변화를 0.15초에 걸쳐 부드럽게 */
}
.btn-primary:hover { opacity: 0.85; }   /* :hover = 마우스를 올렸을 때 */
.btn-primary:disabled {                 /* :disabled = 버튼이 잠겼을 때 */
  opacity: 0.5;
  cursor: not-allowed;
}

/* 다크 모드에서는 강조색이 밝아지므로 글자를 어둡게 해야 읽힙니다 */
@media (prefers-color-scheme: dark) {
  .btn-primary { color: #10171b; }
}

/* 보조 버튼 (저장한 논문 보기) — 강조 버튼보다 조용한 모양 */
.btn-secondary {
  font: inherit;
  font-weight: 600;
  padding: 0 16px;
  height: var(--field-h);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;       /* 글자가 두 줄로 나뉘지 않게 */
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* 저장 목록을 보고 있는 동안에는 눌린 상태처럼 보이게 합니다 */
.btn-secondary.active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- 4-2) 저자·키워드 구독 ---------- */
.subs {
  margin: -6px 0 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 16px;
}

/* summary = 접혀 있을 때 보이는 줄 */
.subs summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  list-style: none;                 /* 브라우저 기본 삼각형을 숨기고 */
}
.subs summary::-webkit-details-marker { display: none; }
.subs summary::before {
  content: "▸";                     /* 직접 그린 삼각형으로 바꿉니다 */
  display: inline-block;
  margin-right: 5px;
  transition: transform 0.15s;
}
.subs[open] summary::before { transform: rotate(90deg); }

.subs-body { margin-top: 14px; }

.subs-help {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-soft);
}

.subs-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* 구독 상자 안의 선택창은 위쪽 조건칸과 달리 폭을 꽉 채울 필요가 없습니다.
   위에서 select 전체에 width:100% 를 줬으므로 여기서만 되돌립니다. */
.subs-form select {
  flex: 0 0 auto;
  width: auto;
}
.subs-form input {
  flex: 1 1 200px;
  font: inherit;
  padding: 0 11px;
  height: var(--field-h);   /* 선택창·버튼과 높이를 맞춥니다 */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}
.subs-form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* 등록해둔 목록 */
.subs-list {
  list-style: none;                 /* 글머리 기호 없애기 */
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subs-empty {
  font-size: 13px;
  color: var(--text-mute);
}

/* 등록한 항목 하나 — 알약 모양 */
.subs-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 13px;
}

.subs-kind {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mute);
}

.subs-value { font-weight: 600; }

.subs-del {
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 3px 5px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-mute);
  cursor: pointer;
}
.subs-del:hover { color: var(--warn); }

/* 구독으로 걸려 나온 논문임을 알리는 카드 배지 */
.sub-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
}
@media (prefers-color-scheme: dark) {
  .sub-badge { color: #10171b; }
}

/* 핵심 결론 아래에 붙는 한국어 번역 */
.takeaway-ko {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-soft);
}

/* '기계 번역' 표시 — 사람이 옮긴 것으로 오해하지 않도록 분명히 둡니다 */
.ko-label {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mute);
  vertical-align: 1px;
}

/* ---------- 5) 상태 메시지 ---------- */
.status {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--accent-bg);
  color: var(--text-soft);
  font-size: 14px;
  margin-bottom: 20px;
}
/* class 를 두 개 붙이면(class="status error") 아래 규칙이 덧씌워집니다 */
.status.error {
  background: var(--warn-bg);
  color: var(--warn);
}

/* ---------- 6) 논문 카드 ---------- */
.paper-list {
  display: flex;
  flex-direction: column;   /* 카드를 세로로 쌓음 */
  gap: 18px;
  padding-bottom: 50px;
}

.paper {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.paper-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text-mute);
}

/* 학술지 이름을 알약 모양 배지로 */
.journal {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;   /* 아주 큰 값을 주면 완전한 반원이 됩니다 */
}

.paper h2 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

.authors {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-soft);
  font-style: italic;
}

/* 핵심 결론 — 가장 중요한 부분이라 왼쪽에 색 막대를 세워 강조합니다 */
.takeaway {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 14px;
  margin: 0 0 16px;
}
.takeaway .takeaway-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}
.takeaway p {
  margin: 0;
  font-size: 15px;
}

/* 학술지 등급이 높을수록 배지를 진하게 해서 한눈에 알아보게 합니다.
   숫자가 붙은 class(tier-5 등)는 app.js가 등급에 맞춰 붙여줍니다. */
.journal.tier-5,
.journal.tier-4 {
  background: var(--accent);
  color: #ffffff;
}
@media (prefers-color-scheme: dark) {
  .journal.tier-5,
  .journal.tier-4 { color: #10171b; }
}
.journal.tier-3 { background: var(--accent-bg); }

/* '최상위' 라벨 */
.tier-note {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 1px 7px;
}

/* details/summary = 클릭하면 펼쳐지는 접이식 영역 (자바스크립트 없이 동작) */
details.abstract {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-bottom: 14px;
}
details.abstract summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  list-style: none;          /* 기본 삼각형 표시를 없애고 */
}
details.abstract summary::before {
  content: "▸ ";             /* 직접 만든 삼각형을 붙임 */
  color: var(--text-mute);
}
details.abstract[open] summary::before {
  content: "▾ ";             /* 펼쳐졌을 땐 아래를 향하도록 */
}
.abstract-body {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--text-soft);
}
.abstract-body h4 {
  margin: 14px 0 2px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.abstract-body p { margin: 0 0 8px; }

/* 결론을 어디서 가져왔는지 알려주는 작은 글씨.
   위 라벨의 대문자 변환·자간을 물려받지 않도록 되돌려 줍니다. */
.takeaway-source {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-mute);
}

/* 저장한 날짜 (저장 목록에서만 보입니다) */
.saved-on {
  color: var(--text-mute);
}

.paper-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.btn-small {
  font: inherit;
  font-size: 13px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  text-decoration: none;    /* 링크의 밑줄 제거 */
  transition: border-color 0.15s, color 0.15s;
}
.btn-small:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* 이미 저장한 논문의 버튼 — 눈에 띄게 */
.btn-save.saved {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ---------- 7) 꼬리말 ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 26px 0 40px;
  font-size: 12.5px;
  color: var(--text-mute);
}
.site-footer p { margin: 0 0 6px; }
.disclaimer { color: var(--text-mute); }

/* 화면 버전 — 최신인지 확인할 때만 보면 되므로 아주 조용하게 */
.version {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-mute);
  opacity: 0.75;
}

/* ---------- 8) 화면이 좁을 때(휴대폰) 조정 ----------
   @media = "화면 폭이 560px 이하일 때만 아래 규칙을 적용" 이라는 뜻입니다. */
@media (max-width: 560px) {
  h1 { font-size: 25px; }
  .paper { padding: 18px 16px; }
  /* 선택창은 한 줄에 하나씩 — 둘씩 놓기엔 글자가 잘립니다 */
  .controls { grid-template-columns: minmax(0, 1fr); }
  /* 버튼 두 개는 한 줄을 반씩 나눠 갖습니다 */
  .control-actions > button { flex: 1 1 0; }
}

/* ---------- 9) 마우스를 쓰는 기기에서만 ----------
   (hover: hover) = "마우스처럼 올려놓을 수 있는 기기" 라는 뜻입니다.
   터치 화면에서는 적용되지 않아, 손가락으로 눌렀을 때 색이 남는 문제가 없습니다. */
@media (hover: hover) {
  .paper {
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .paper:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  }
}

/* ---------- 10) 화면이 넓을 때(데스크탑) 조정 ----------
   1180px 이상이면 논문 3편을 나란히 놓아 한눈에 비교할 수 있게 합니다. */
@media (min-width: 1180px) {
  .wrap {
    max-width: 1160px;
  }

  /* 설명글까지 1160px로 늘어나면 한 줄이 너무 길어 읽기 힘듭니다.
     글줄은 적당한 폭으로 묶어둡니다. */
  .site-header .lede,
  .site-header .today {
    max-width: 640px;
  }

  /* 꼬리말은 조금 더 넉넉하게 둡니다.
     640px 로 묶으면 출처 문장이 두 줄로 갈라지면서
     "보여줍니다." 만 다음 줄에 덩그러니 남습니다. */
  .site-footer p {
    max-width: 860px;
  }

  /* display: grid = 격자로 배치하기.
     repeat(3, 1fr) = 같은 너비의 칸 3개를 만든다는 뜻입니다. */
  .paper-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;   /* 세 카드의 높이를 같게 맞춥니다 */
  }

  /* 카드 안을 세로 배치로 바꾸고 버튼을 맨 아래로 밀어,
     제목 길이가 달라도 버튼 줄이 가지런히 놓이게 합니다. */
  .paper {
    display: flex;
    flex-direction: column;
  }
  .paper-actions {
    margin-top: auto;       /* 위쪽 여백을 자동으로 채워 아래로 밀어냄 */
  }

  /* 화면이 넓으면 한 줄에 셋씩 놓습니다.
     선택칸 다섯 개 + 버튼 묶음 하나 = 여섯 칸이라,
     3칸씩 정확히 두 줄로 떨어져 빈 칸이 생기지 않습니다.
       1줄: 관심 분야 · 발표 시기 · 학술지 우선순위
       2줄: 결론 번역 · 이미 본 논문 · [버튼 두 개]  */
  .controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 아주 넓은 화면(2560px 모니터 등)에서도 지나치게 퍼지지 않게 합니다 */
@media (min-width: 1700px) {
  .wrap { max-width: 1400px; }
}