style.css
body{

font-family:sans-serif;
background:#937E5F;
margin:0;
padding:30px;

}

.container{

max-width:700px;
margin:auto;
background:white;
padding:30px;
border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.1);

}

h1{

text-align:center;

}

label{

display:block;
margin-top:18px;
font-weight:bold;

}

input,
select,
textarea{

width:100%;
padding:10px;
margin-top:5px;
box-sizing:border-box;

}

canvas{

margin-top:30px;

}

button{

margin-top:20px;

width:100%;

padding:10px;

background:#444;

color:white;

border:none;

border-radius:12px;

font-size:14px;

cursor:pointer;

}

button:hover{

background:#52392a;

}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 450px;
    height: 400px;
    margin: 20px auto;
}

.record-title {
  margin-top: 35px;
  font-size: 22px;
}

.record-card {
  margin-top: 15px;
  padding: 18px;
  background: #f7f1ec;
  border: 1px solid #d8c8ba;
  border-radius: 10px;
}

.record-card h3 {
  margin: 0 0 10px;
  color: #000000;
  font-weight: 650;
}

.record-card p {
  margin: 6px 0;
  line-height: 1.6;
}

.delete-button {
  margin-top: 12px;
  width: auto;
  padding: 8px 18px;
  background: #a94442;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.delete-button:hover {
  background: #843534;
}

.no-records {
  margin-top: 15px;
  color: #777;
}

.save-actions {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

.save-actions button {
  margin-top: 0;
}

.cancel-edit-button {
  background: #777;
}

.cancel-edit-button:hover {
  background: #555;
}

.record-buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.record-buttons button {
  width: auto;
  margin-top: 0;
  padding: 8px 18px;
  font-size: 14px;
}

.edit-button {
  background: #eee5da;
  color: #52392a;
  border: 1px solid #d8c8ba;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

.edit-button:hover {
  background: #e3d5c7;
}
.delete-button {
  background: transparent;
  color: #9a8173;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
}

.delete-button:hover {
  color: #9b4d43;
  background: #f7eeee;
  border-radius: 6px;
}

.edit-button {
  background: #6f4e37;
}

.edit-button:hover {
  background: #52392a;
}

.mini-chart-container {
  position: relative;
  width: 220px;
  height: 180px;
  margin: 15px auto;
}

/* 画面全体を左右に分ける */
.app-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 25px;
  max-width: 1400px;
  margin: 20px auto;
  padding: 0 20px;
  align-items: start;
}

/* 左側の保存一覧 */
.sidebar {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* 右側の入力画面 */
.app-layout .container {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* 左側ではカードを少し小さくする */
.sidebar .record-card {
  padding: 15px;
}

.sidebar .record-card h3 {
  font-size: 20px;
}

.sidebar .record-card p {
  font-size: 14px;
}

/* 左側の小さい味グラフ */
.sidebar .mini-chart-container {
  width: 190px;
  height: 160px;
}

/* スマホ・画面が狭い場合 */
@media (max-width: 900px) {
  .app-layout {
    display: flex;
    flex-direction: column;
    padding: 10px;
  }

  .container {
    order: 1;
  }

  .sidebar {
    order: 2;
    position: static;
    width: 100%;
    max-height: none;
  }
}

.filter-area{
    margin-bottom:20px;
}

.filter-area label{
    display:block;
    margin-top:10px;
    font-weight:bold;
}

.filter-area select{
    width:100%;
    padding:8px;
    margin-top:5px;
    border-radius: 10px;
}

/* PC画面の配置 */
.app-layout {
  display: grid;
  grid-template-columns: 380px minmax(500px, 1fr);
  grid-template-areas: "sidebar main";
  gap: 25px;
  max-width: 1500px;
  margin: 20px auto;
  padding: 0 20px;
  align-items: start;
}

.sidebar {
  grid-area: sidebar;
  width: auto;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.app-layout .container {
  grid-area: main;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* 画面が狭い場合は縦に並べる */
@media (max-width: 900px) {
  .app-layout {
    display: flex;
    flex-direction: column;
    padding: 10px;
  }

  .app-layout .container {
    order: 1;
  }

  .sidebar {
    order: 2;
    position: static;
    width: 100%;
    max-height: none;
  }
}
.sidebar .filter-area {
  margin: 0 0 20px;
  padding: 12px;
  background: #f7f1ec;
  border-radius: 10px;
}

.sidebar .filter-area label {
  display: block;
  margin: 10px 0 5px;
  font-weight: bold;
}

.sidebar .filter-area label:first-child {
  margin-top: 0;
}

.sidebar .filter-area select {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.app-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    gap: 0;
}

.container {
    padding: 48px;
}

.coffee-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 0.8fr);
    gap: 64px;
    align-items: start;
}

.coffee-form,
.coffee-result {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.chart-container {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 32px;
}

/* ===== Coffee Note UI redesign ===== */

:root {
    --bg: #ffffff;
    --panel: #fbfaf6;
    --text: #171717;
    --muted: #77736d;
    --line: #d8d3ca;
    --accent: #8a5a3b;
}

/* 全体 */
body {
    margin: 0;
    padding: 0;
    background: #BBB2A1 ;
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

/* 画面の大枠 */
.app-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 32px;
    max-width: 1500px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 32px;
    box-sizing: border-box;
}

/* 左の保存エリア */
.sidebar {
    position: sticky;
    top: 32px;
    align-self: start;

    padding: 28px 22px;

    background: var(--panel);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 28px;

    box-shadow: none;
}

/* メイン */
.app-layout .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 42px 48px 48px;

    background: #937E5F;
    border-radius: 16px;
    box-shadow: none;

    box-sizing: border-box;
}

/* タイトル */
h1 {
    margin: 0 0 48px;
    text-align: left;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 46px;
    font-weight: 500;
    letter-spacing: -1.5px;
}

/* 中央＋右 */
.coffee-workspace {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(320px, 0.8fr);
    gap: 72px;
    align-items: start;
}

/* ラベルなど */
label {
    margin-top: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.coffee-form,
.coffee-result {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 左タイトル */
.record-title {
    margin: 0 0 24px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 500;
}

/* フィルター箱 */
.sidebar .filter-area {
    margin: 0 0 24px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

/* チャート */
.chart-container {
    width: 100%;
    max-width: 420px;
    height: 330px;
    margin: 0 auto 36px;
}

/* 画面が狭い時 */
@media (max-width: 950px) {
    .app-layout {
        display: flex;
        flex-direction: column;
        padding: 18px;
    }

    .app-layout .container {
        padding: 28px;
    }

    .coffee-workspace {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sidebar {
        position: static;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ===== Taste sliders ===== */

.coffee-form input[type="range"] {
    width: 100%;
    height: 24px;
    margin: 0 0 12px;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;
    cursor: pointer;
}


/* Chrome / Edge / Safari の線 */
.coffee-form input[type="range"]::-webkit-slider-runnable-track {
    height: 2px;
    background: #c9c5bd;
    border-radius: 999px;
}


/* Chrome / Edge / Safari の丸 */
.coffee-form input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 13px;
    height: 13px;

    margin-top: -5.5px;

    background: #1b1b1b;
    border: none;
    border-radius: 50%;
}


/* Firefox の線 */
.coffee-form input[type="range"]::-moz-range-track {
    height: 2px;
    background: #c9c5bd;
    border-radius: 999px;
}


/* Firefox の丸 */
.coffee-form input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;

    background: #1b1b1b;
    border: none;
    border-radius: 50%;
}

/* ===== Saved coffee mini card ===== */

.sidebar {
    padding: 26px 18px;
}

/* 保存カード */
.sidebar .record-card {
    margin-top: 18px;
    padding: 18px;

    background: #ffffff;
    border: none;
    border-radius: 22px;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}


/* 豆の名前 */
.record-card-header h3 {
    margin: 0;

    color: #171717;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 500;
}


/*ミニカード 産地 タイトル*/
.record-origin {
    margin: 4px;
    color: #000000;
    font-size: 12px;
    letter-spacing: 0.04em;
}

.preference-score {
    position: relative;
    width: auto;
    margin: 0;
    padding: 2px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #76675c;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
}

.preference-score:hover {
    background: transparent;
    color: #625248;
}

.preference-score:focus-visible {
    outline: 1px solid #9a7459;
    outline-offset: 3px;
}

.preference-score strong {
    color: #6f4d36;
    font-weight: 650;
}

.preference-score-tooltip {
    position: absolute;
    right: 0;
    top: calc(100% + 7px);
    z-index: 30;
    display: none;
    width: min(210px, calc(100vw - 32px));
    padding: 10px 12px;
    box-sizing: border-box;
    background: #fffdf9;
    border: 1px solid #cfc1b5;
    border-radius: 9px;
    box-shadow: 0 5px 14px rgba(82, 57, 42, 0.12);
    color: #514941;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    white-space: normal;
}

.preference-score:hover .preference-score-tooltip,
.preference-score:focus-visible .preference-score-tooltip,
.preference-score.is-open .preference-score-tooltip {
    display: block;
}

.preference-score-tooltip-title {
    display: block;
    margin-bottom: 6px;
    color: #493c33;
    font-weight: 650;
}

.preference-score-detail,
.preference-score-total,
.preference-score-result {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.preference-score-total {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #ded4cb;
}

.preference-score-result {
    margin-top: 2px;
}

.preference-score-tooltip .preference-score-detail strong,
.preference-score-tooltip .preference-score-total strong,
.preference-score-tooltip .preference-score-result strong {
    color: #514941;
    font-weight: 600;
}



/* 抽出・温度・焙煎 */
.record-profile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 8px;
    margin-top: 18px;
}

/* 豆量・グラインダー */
.record-brew-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
  text-align: center;
}

.record-brew-details .brew-detail:nth-child(4) {
  grid-column: 1 / -1;
}

.brew-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.detail-label {
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #8a857e;
}

.brew-detail strong {
  font-size: 11px;
  font-weight: 500;
}




/* 各プロフィール */
.profile-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 7px;

    color: #4b4844;
    font-size: 10px;
    text-align: center;
}

/* 豆量 */
.coffee-number-input {
  display: flex;
  align-items: center;
  gap: 6px;
}

.coffee-number-input input {
  flex: 1;
  min-width: 0;
}

.coffee-number-input span {
  flex-shrink: 0;
}


/* 将来アイコンが入る場所 */
.profile-icon {
    width: 38px;
    height: 38px;

    background: #f3f0e9;
    border-radius: 50%;
}


/* ミニレーダー */
.sidebar .mini-chart-container {
    width: 150px;
    height: 130px;

    margin: 18px auto 12px;
}


/* 味の数値 */
.taste-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    padding-top: 12px;

    border-top: 1px solid #e5e1da;

    color: #5e5a54;
    font-size: 10px;
    text-align: center;
}


/* 編集・削除 */
.record-buttons {
    display: flex;
    justify-content: flex-end;

    gap: 6px;
    margin-top: 14px;
}


.record-buttons button {
    width: auto;
    margin: 0;
    padding: 6px 10px;

    background: transparent;
    color: #77736d;

    border: 1px solid #d8d3ca;
    border-radius: 999px;

    font-size: 10px;
}


.record-buttons button:hover {
    background: #f3f0e9;
    color: #171717;
}


/* 削除だけ赤くしない */
.record-buttons .delete-button {
    background: transparent;
    color: #77736d;
}

/* ===== Main form redesign ===== */

/* 豆名・産地　例イエメン */
.coffee-form input[type="text"] {
    padding: 10px 2px 8px;
    margin: 0 0 12px;

    background: transparent;
    border: none;
    border-bottom: 1px solid #bdb8af;
    border-radius: 0;

    font-size: 12px;
    color: #171717;

    outline: none;
}

/* 入力している場所だけ線を濃く */
.coffee-form input[type="text"]:focus {
    border-bottom-color: #171717;
}


/* セレクト 枠の中　淺煎り　ハンドドリップ　HOT */
.coffee-form select {
    padding: 11px 12px;
    margin: 0 0 12px;

    background: #f3f0e9;
    border: none;
    border-radius: 10px;

    color: #171717;
    font-size: 11px;

    outline: none;
    cursor: pointer;
}


/* セレクトを選択中 */
.coffee-form select:focus {
    outline: 1px solid #bdb8af;
}


/* 各ラベル 豆量　抽出温度*/
.coffee-form label {
    margin-top: 4px;

    color: #55514c;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ===== Taste profile ===== */

.taste-profile-header {
    margin-bottom: 8px;
}

.taste-profile-header > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.taste-profile-header p {
    margin: 5px 0 0;

    color: #8a857e;
    font-size: 11px;
}


/* 4つの味 */
.live-taste-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin: 0 0 34px;
    padding: 18px 0;

    border-top: 1px solid #dedad2;
    border-bottom: 1px solid #dedad2;
}

.live-taste-values div {
    text-align: center;
}

.live-taste-values span {
    display: block;

    margin-bottom: 6px;

    color: #8a857e;
    font-size: 9px;
    letter-spacing: 0.08em;
}

.live-taste-values strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 400;
}

/* ===== Coffee profile meta ===== */

.coffee-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 22px 0 28px;
}

.meta-item {
    text-align: center;
}

.meta-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 10px;

    background: #f3f0e9;
    border-radius: 50%;
}

.meta-item span {
    display: block;

    color: #99938b;
    font-size: 9px;
    letter-spacing: 0.14em;
}

.meta-item strong {
    display: block;
    margin-top: 5px;

    font-size: 11px;
    font-weight: 500;
}

/* ===== Coffee identity ===== */

.coffee-identity {
    margin: 24px 0 18px;
}

.coffee-identity h2 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.coffee-identity p {
    margin: 5px 0 0;

    color: #8a857e;
    font-size: 12px;
    letter-spacing: 0.05em;
}

/* ===== Right profile polish ===== */

.coffee-result {
    padding-left: 8px;
}

/* TASTE PROFILE 見出し */
.taste-profile-header {
    margin-bottom: 18px;
}

.taste-profile-header > span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
}

.taste-profile-header p {
    margin-top: 6px;
    color: #918b83;
    font-size: 10px;
}


/* 豆名・産地 */
.coffee-identity {
    margin: 0 0 30px;
}

.coffee-identity h2 {
    margin: 0;
    font-size: 32px;
    line-height: 1.05;
}

.coffee-identity p {
    margin-top: 7px;
    font-size: 11px;
}


/* BREW / TEMP / ROAST */
.coffee-meta {
    margin: 0 0 34px;
    gap: 24px;
}

.meta-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 9px;
}

.meta-item span {
    font-size: 8px;
    letter-spacing: 0.18em;
}

.meta-item strong {
    margin-top: 6px;
    font-size: 11px;
}


/* レーダーを少し大きく */
.coffee-result .chart-container {
    max-width: 390px;
    height: 320px;
    margin: 0 auto 30px;
}


/* 味数値 */
.live-taste-values {
    margin-bottom: 38px;
    padding: 18px 0;
}

.live-taste-values strong {
    font-size: 22px;
}

/* ===== Coffee Profile finishing ===== */


/* 上の小見出し */
.taste-profile-header {
    margin-bottom: 24px;
}

/* 豆名を主役に */
.coffee-identity {
    margin-bottom: 34px;
}

.coffee-identity h2 {
    font-size: 34px;
    line-height: 1;
    margin: 0;
}

.coffee-identity p {
    margin-top: 8px;
    color: #8d8880;
}

/* 3つのプロフィール */
.coffee-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;

    margin-bottom: 38px;
    padding-bottom: 28px;

    border-bottom: 1px solid #ded9d0;
}

.meta-icon {
    width: 58px;
    height: 58px;
}

/* レーダー */
.coffee-result .chart-container {
    width: 100%;
    max-width: 280px;
    height: 250px;

    margin: 0 auto 28px;
}

/* 4つの数値 */
.live-taste-values {
    margin: 0 0 15px;
    padding: 10px 0;

    border-top: 1px solid #ded9d0;
    border-bottom: 1px solid #ded9d0;
}

/* メモ */
.coffee-result textarea {
    min-height: 110px;

    background: transparent;
    border: 1px solid #d5d0c7;
    border-radius: 12px;

    resize: vertical;
}

.chart-container {
    width: 85%;
    max-width: 320px;
    margin: 0 auto;
}

/* ===== Save button ===== */

#saveButton {
    margin-top: 24px;
    width: 100%;
    padding: 14px 20px;

    background: transparent;
    color: #5f4635;

    border: 1px solid #8a6a53;
    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.15em;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

#saveButton:hover {
    background: #6f4e37;
    color: #444;
}

/* ===== Saved card buttons finishing ===== */

.sidebar .record-buttons {
    margin-top: 12px;
    padding-top: 10px;

    border-top: 1px solid #ebe7df;
}

.sidebar .record-buttons button {
    padding: 4px 8px;

    background: transparent;
    border: none;
    border-radius: 0;

    color: #9a958d;

    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.sidebar .record-buttons button:hover {
    background: transparent;
    color: #292724;
}

/* 削除も普段は赤くしない */
.sidebar .record-buttons .delete-button {
    background: transparent;
    color: #9a958d;
}



/* 保存カードをふわっと浮かせる */
.sidebar .record-card {
  position: relative;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.sidebar .record-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(82, 57, 42, 0.12);
}

/* ===== 豆の親カード ===== */

.bean-group-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: 18px 0 8px;
  padding: 12px 14px;

  background: #f4efe7;
  border-radius: 12px;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.bean-group-card:hover {
  transform: translateY(-2px);
  background: #eee5da;
}

.bean-group-card strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 500;
}

.bean-group-card span {
  color: #8a8177;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.coffee-map {
  width: 100%;
  max-width: 360px;
  margin: 0 auto ;
}

.coffee-map img {
  width: 100%;
  height: auto;
  display: block;
}
.coffee-map-stage {
  position: relative;
  width: 100%;
}

.map-marker {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #7a4a2a;
  border-radius: 50%;

  animation: marker-pop 0.35s ease-out;
}

.map-marker.latinAmerica {
  background: #b66a3c;
}

.map-marker.africa {
  background: #c89b3c;
}

.map-marker.asia {
  background: #5f8f79;
}

.map-marker.oceania {
  background: #5f7896;
}

.coffee-result {
  margin-top: -90px;
}

@keyframes marker-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  70% {
    transform: scale(1.6);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.view-all-records {
    display: block;
    text-align: center;
    text-decoration: none;

    margin-top: 8px;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    color: #7a5138;
}


/* ========================================
   記録一覧ページ
======================================== */
body.records-page {
  --records-card-texture: url("img/records-paper-brown.svg");
  background: #c2b69b;
}

/* Comparison preview: set data-card-texture="none" on body for solid cards. */
body.records-page[data-card-texture="none"] {
  --records-card-texture: none;
}

.records-page .record-card {
  max-width: 520px;
  margin: 10px auto;
  padding: 12px;
}

.records-page .mini-chart-container {
  width: 150px;
  height: 125px;
  margin: 8px auto;
}

.records-page .record-profile {
  margin: 6px 0;
  gap: 8px;
}

.records-page .record-brew-details {
  margin: 6px 0;
  gap: 12px;
}

.records-page .taste-values {
  margin-top: 6px;
}

/* ================================
   すべての記録の豆名
================================ */

.records-page .record-card h3 {
  margin: 0 0 4px;
  color: #000000;
  font-weight: 700;
}

.records-page .record-origin {
  margin: 0 0 6px;
}

.records-page .record-card {
  max-width: 520px;
  margin: 8px auto;
  padding: 10px 14px;
}

.records-page .profile-icon {
  width: 22px;
  height: 22px;
}

.records-page .record-profile {
  margin-top: 8px;
  gap: 4px;
}

.records-page .profile-item {
  gap: 3px;
}

.records-page .record-brew-details {
  margin-top: 6px;
  gap: 4px;
}

.records-page .mini-chart-container {
  width: 120px;
  height: 100px;
  margin: 4px auto;
}

.records-page .taste-values {
  margin-top: 2px;
}

.records-page .records-list-card {
  background: #e3daca;
  background-image: var(--records-card-texture);
  background-size: 256px 256px;
  max-width: 480px;
  margin: 8px 0;
  padding: 12px 16px;
  box-sizing: border-box;
}

.records-card-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0px;
}

.records-page .record-origin {
  margin: 0 0 8px;
}

.records-page .records-preference-score {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: -2px auto 4px;
  padding: 2px 7px;
  box-sizing: border-box;
  overflow: visible;
  background: #f4efe7;
  border-radius: 999px;
  font-size: 10px;
}

.records-page .records-preference-score .preference-score-tooltip {
  right: auto;
  left: 0;
  text-align: left;
}

.records-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  margin-bottom: 8px;
}

.records-page .records-rating {
  margin: 0 0 8px;
  text-align: center;
  font-size: 12px;
}

.records-page .records-brew-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.records-page .records-gear-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.records-page .records-gear-icon[src*="V60 Dripper"] {
  width: 24px;
}

.records-brew {
  display: flex;
  justify-content: space-between;
  gap: 0;
  margin-bottom: 8px;
  font-size: 9px;
  text-align: center;
}

.records-brew span {
  flex: 1;
}


.records-brew span {
  display: flex;
  flex-direction: column;
}

.records-brew strong {
  font-size: 11px;
  font-weight: 500;
}
.records-page .taste-values {
  display: flex;
  gap: 0;
  font-size: 10px;
  margin-bottom: 15px;
  text-align: center;
}

.records-page .taste-values span {
  flex: 1;
}

.records-mini-chart {
  position: relative;
  width: 110px;
  height: 90px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   総合評価
======================================== */



.rating-star {
    width: auto;
    min-width: 0;
    padding: 0;

    background: none;
    border: none;
    border-radius: 0;

    color: #c8c1ba;
    font-size: 24px;
    line-height: 1;

    cursor: pointer;

    grid-column: 2;
    grid-row: 1;

    display: flex;
    align-items: center;

   
}

.rating-star:hover {
    background: none;
}

.rating-star.active {
    color: #795033;
}

.records-page #recordsResetButton {
  width: auto;
  margin-top: 8px;
  padding: 10px 32px;

  font-size: 11px;
}

.records-page h2 {
  font-size: 18px;
  margin: 18px 0 10px;
  cursor: pointer;
}

.records-page .records-controls {
  display: grid;
  grid-template-columns: 
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 1fr)
    auto
    minmax(280px, 1.4fr);

  gap: 12px;
  max-width: 1100px;
  margin: 20px auto;
  padding-bottom: 2px;
  
  position: relative;
}

.records-page #recordSearch {
  min-width: 0;
  border: 3px solid #444;
  border-radius: 6px;
}

.records-page .records-controls::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  right: 0;
  height: 1px;
  background: #171717;
}


@media (min-width: 701px) and (max-width: 1080px) {
  .records-page .records-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  }

  .records-page #recordSearch {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {

  .records-page .records-controls {
    grid-template-columns: 1fr;
  }

  .records-page #recordSearch {
    grid-column: 1;
  }

}


@media (max-width: 800px) {

  .records-page .preference-score-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  
  }

  .records-page .preference-score-criteria-title {
    white-space: nowrap;
  }

}

.records-page #recordCount {
  justify-self: start;
  max-width: 900px;
  margin: 0 0 16px;
  color: #3B2A20;
  font-weight: 400;
}

.records-page #allRecordList {
  width: 100%;
  max-width: none;
  margin: 0;
}

.records-page .record-grid:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(3, 175px);
  gap: 12px;
  justify-content: center;
}

@media (max-width: 648px) {
  .records-page .record-grid:not([hidden]) {
    grid-template-columns: repeat(2, 175px);
  }
}

.bean-group-picker {
  display: none;
}

@media (max-width: 420px) {
  .records-page .bean-group-picker {
    display: block;
    position: relative;
    margin: 4px 0 0;
    color: #444;
    font-size: 12px;
  }

  .bean-group-picker summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 2px solid #444;
    border-radius: 6px;
    background: #f7f1ec;
    list-style: none;
    cursor: pointer;
  }

  .bean-group-picker summary::-webkit-details-marker {
    display: none;
  }

  .bean-group-picker summary::before,
  .records-page .bean-group-picker .bean-group-button::before {
    content: "";
    flex: 0 0 9px;
    width: 9px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(105deg, #67422e 43%, #cfbca4 46%, #cfbca4 52%, #67422e 55%);
    transform: rotate(25deg);
  }

  .bean-group-picker summary::after {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    margin: 0 2px 3px auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  .bean-group-picker[open] summary::after {
    margin-bottom: -3px;
    transform: rotate(225deg);
  }

  .bean-group-picker .bean-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }

  .bean-group-picker .bean-count {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #777;
  }

  .bean-group-panel {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    z-index: 60;
    max-height: min(360px, 55dvh);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #444;
    border-radius: 6px;
    background: #f7f1ec;
    box-shadow: 0 3px 10px rgb(0 0 0 / 10%);
  }

  .records-page .bean-group-picker .bean-group-button {
    justify-content: flex-start;
    gap: 8px;
    min-height: 36px;
    margin: 0;
    padding: 8px;
    border: 0;
    border-radius: 3px;
  }

  .records-page .bean-group-picker .bean-group-button.active,
  .records-page .bean-group-picker .bean-group-button:hover {
    padding: 8px;
    border: 0;
    background: #e6dece;
  }

  .bean-group-picker .bean-pagination:not(:empty) {
    position: sticky;
    bottom: -4px;
    margin: 4px 0 0;
    padding: 4px 0;
    background: #f7f1ec;
  }

  .records-page .records-browser .records-main {
    /* Let the swipe area use the page's existing 40px side gutters. */
    margin-inline: -40px;
    padding-left: 0;
  }

  .records-page .record-grid:not([hidden]) {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    box-sizing: border-box;
    padding-inline: calc((100vw - 175px) / 2);
    padding-bottom: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc((100vw - 175px) / 2);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .records-page .record-grid::-webkit-scrollbar {
    display: none;
  }

  .records-page .record-grid > .records-list-card {
    flex: 0 0 175px;
    max-width: none;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .records-page .records-preference-score .preference-score-tooltip {
    left: 50%;
    transform: translateX(-50%);
  }
}

.roast-scale-dots {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
}


.roast-scale-dots::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1px;
  background: #795030;
  z-index: 0;
}

.roast-scale-dots span {
  position: relative;
  z-index: 1;
}

.roast-scale-dots span {
  width: 8px;
  height: 8px;
  background: #444;
  border-radius: 50%;
  display: block;
}

.roast-scale {
  width: 140px;
  margin: 14px auto 10px;
}

.roast-scale-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.records-page .records-roast-scale .roast-scale-labels {
  font-size: 10px;
}



/* 表示切替スイッチ */

.settings-toggle {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  min-width: 72px;
  margin: 0;
  cursor: pointer;
}

.settings-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.settings-toggle-track {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 22px;
  box-sizing: border-box;
  overflow: visible;
  background: #c9c2b9;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.settings-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}

.settings-toggle input:checked + .settings-toggle-track {
  background: #444;
}

.settings-toggle input:checked + .settings-toggle-track::after {
  transform: translateX(18px);
}

.settings-toggle input:focus-visible + .settings-toggle-track {
  outline: 2px solid #9a7459;
  outline-offset: 2px;
}

.settings-toggle-state {
  min-width: 24px;
  color: #796f67;
  font-size: 10px;
}

.sidebar-visibility-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 9px 10px;
  background: #fffdf9;
  border: 1px solid #ded4cb;
  border-radius: 9px;
}

.sidebar .filter-area .sidebar-visibility-setting .settings-toggle {
  display: flex;
  margin: 0;
  font-weight: 400;
}

.visibility-setting-label {
  color: #444;
  font-size: 11px;
  line-height: 1.4;
}

.records-visibility-setting {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex: 0 0 auto;
  width: auto;
  justify-content: center;
  gap: 8px 6px;
  min-height: 34px;
  padding: 6px 0px;
  border: 0;
  box-sizing: border-box;
  background: transparent;
  
  border-radius: 15px;
}

.preference-score-criteria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 12px 8px;
  width: 100%;
  min-width: 0;
  contain: inline-size;
}

.preference-score-criteria[hidden] {
  display: none;
}

.preference-score-criteria-title {
  align-self: center;
  color: #594b41;
  font-size: 11px;
  font-weight: 650;
}

.preference-score-criteria label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.preference-score-criteria label span {
  margin: 0;
  white-space: nowrap;
}

.preference-score-criteria select {
  width: auto;
  min-width: 80px;
  margin: 0;
  padding: 6px 8px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #c9b7a7;
  border-radius: 7px;
}

.preference-score-criteria-status {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  color: #444;
  font-size: 12px;
  white-space: nowrap;
}

.preference-analysis-button[hidden],
.preference-analysis-panel[hidden] {
  display: none;
}

/* ========================================
   好みの傾向
======================================== */

.preference-analysis-panel {
  margin-top: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e1dbd2;
  border-radius: 12px;
}

.preference-analysis-panel h3 {
  margin: 0 0 8px;
  color: #4f3d31;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 500;
}

#preferenceAnalysisMessage,
.preference-analysis-description {
  color: #756d65;
  font-size: 11px;
  line-height: 1.7;
}

#preferenceAnalysisMessage {
  margin: 0;
}

.preference-analysis-description {
  margin: 10px 0 4px;
}

.preference-chart-area {
  width: 100%;
}

.preference-chart-area canvas {
  width: 100% !important;
  height: 220px !important;
  margin-top: 8px;
}

.preference-series-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 9px 0 2px;
}

.preference-series-controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #625850;
  font-size: 10px;
  cursor: pointer;
}

.preference-series-controls input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.preference-series-check {
  position: relative;
  width: 24px;
  height: 14px;
  background: #d2cbc2;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.preference-series-check::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.preference-series-controls input:checked + .preference-series-check {
  background: #8a6a53;
}

.preference-series-controls input:checked + .preference-series-check::after {
  transform: translateX(10px);
}

.preference-series-controls input:focus-visible + .preference-series-check {
  outline: 2px solid #aa8a72;
  outline-offset: 2px;
}

.preference-series-controls input:disabled + .preference-series-check {
  opacity: 0.45;
}

.preference-series-controls label:has(input:disabled) {
  cursor: default;
  opacity: 0.7;
}

.preference-series-help,
.preference-series-message {
  margin: 6px 0 0;
  color: #8a8178;
  font-size: 10px;
}

.preference-series-message {
  padding: 38px 8px;
  text-align: center;
}

.preference-value-group h4 {
  margin: 12px 0 0;
  color: #5b4b40;
  font-size: 10px;
  font-weight: 600;
}

.preference-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px 12px;
  margin-top: 5px;
  padding: 12px 0;
  border-top: 1px solid #e8e2da;
  border-bottom: 1px solid #e8e2da;
  color: #6b625b;
  font-size: 11px;
}

.preference-values-saved strong {
  color: #9a7459;
}

.preference-value-group[hidden],
.preference-series-help[hidden],
.preference-series-message[hidden],
.preference-chart-area canvas[hidden] {
  display: none !important;
}

.preference-values span {
  display: flex;
  justify-content: space-between;
}

.preference-values strong {
  color: #593f2e;
  font-weight: 600;
}

.preference-save-placeholder {
  width: 100%;
  margin-top: 12px;
  padding: 9px 12px;
  background: transparent;
  color: #8c7d72;
  border: 1px solid #cfc4ba;
  border-radius: 7px;
  font-size: 11px;
  cursor: pointer;
}

.preference-save-placeholder:disabled {
  cursor: default;
  opacity: 0.75;
}

.preference-save-message {
  min-height: 1.4em;
  margin: 7px 0 0;
  color: #6f4e37;
  font-size: 10px;
  text-align: center;
}

@media (max-width: 600px) {
  .preference-chart-area canvas {
    height: 200px !important;
  }
}

.roast-scale-dots span.active {
  width: 12px;
  height: 12px;
  background: #ffffff;
  border: 3px solid #795030;
  box-sizing: border-box;
}

.bean-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bean-setting-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brew-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brew-setting-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.records-mini-chart canvas {
  margin-top: 0;
}

/* ================================
   すべての記録・ミニカードの産地名
   国名や地域名の文字サイズ・太さを調整
================================ */

.records-page .records-list-card .record-origin {
  text-align: center;
  font-size: 12px;
  font-weight: 650;
}

.records-page h1 {
  width: 100%;
  box-sizing: border-box;

  margin: 60px 0 0;
  padding: 19px 32px;

  border-top: none;
  border-bottom: 0;

  font-family: Arial, "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;

  text-align: left;

  max-width: 1100px;
margin: 60px auto 0;
padding: 19px 0;
}

.bean-name {
  font-size: 14px;
  font-weight: 600;
}

.bean-count {
  font-size: 10px;
  font-weight: 400;
  color: #8a857e;
}

.records-page input,

.records-page select {
  border: 0;
  border-radius: 0;
  outline: none;
   box-shadow: none;
   background: transparent;
}



.records-page .back-link {
  position: relative;
  top: 72px;
  left: max(0px, calc((100% - 1100px) / 2));
  display: inline-block;
  margin-bottom: 20px;
  width: fit-content;
  color: #3B2A20;
  text-decoration: none;
  font-size: 14px;
  font-weight: 550;
}

.records-page .country-reset-row {
  display: contents;
}

.records-page .country-reset-row #recordsResetButton {
  width: auto;
  /* Each grid gap (12px) plus the matching margin gives 34px. */
  margin: 0 22px;
  padding: 10px 18px;
  justify-self: center;
  align-self: end;
}

.records-page .records-top-area {
  max-width: none;
  margin: 0;
  padding: 0 40px;
  padding-top: 24px;


}

.records-page .records-summary-row {
  max-width: 1100px;
  margin: 0 auto 10px;
}


.records-page .records-browser {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px 50px;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 10px;
  align-items: start;
}

.records-page .bean-group-button {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  margin: 0 0 8px;
  padding: 8px 4px;

  background: transparent;
  color: #171717;

  border: 0;
  border-radius: 0;

  font-size: 14px;
  text-align: left;
}

.records-page .bean-group-button:hover {
  background: transparent;
}

.records-page #beanGroupList {
  padding-top: 0;
}

.records-page .bean-group-button.active {
  background: transparent;
  border-left: 3px solid #171717;
  padding-left: 10px;
}

.records-page .bean-group-button.active .bean-name {
  font-weight: 700;
}

.bean-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.bean-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 32px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #444;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.bean-pagination button:disabled {
  opacity: 0.35;
  cursor: default;
}

.bean-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-size: 14px;
  line-height: 1;
  color: #444;
}

.bean-pagination button {
  font-size: 0;
}

.bean-pagination button[aria-label="前のページ"]::before {
  content: "➜";
  display: inline-block;
  transform: scaleX(-1);
  font-size: 17px;
}

.bean-pagination button[aria-label="次のページ"]::before {
  content: "➜";
  font-size: 17px;
}


/* ================================
   ミニカードの日付を控えめに表示
================================ */

.records-page .record-date {
  margin: 4px 0 10px;
  text-align: center;
  font-size: 12px;
  color: #444;
}

/* ================================
   記録一覧の操作メニュー
   PCの広い画面は横一列、狭い画面は表示操作・条件・件数の3段
================================ */

.records-page .records-sort {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  align-items: center;
  column-gap: clamp(6px, 1.5vw, 16px);
  row-gap: 12px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 14px;
}

@media (min-width: 701px) {
  .records-page .records-sort {
    grid-template-columns: repeat(3, minmax(0, 180px));
    column-gap: 24px;
    width: 100%;
    max-width: 1100px;
  }

  .records-page .records-sort > .records-sort-select,
  .records-page .records-sort > .records-visibility-setting {
    justify-content: flex-start;
  }

  .records-page .preference-score-criteria-status {
    justify-self: start;
  }
}

@media (min-width: 1001px) {
  .records-page .records-sort {
    grid-template-columns: max-content max-content max-content minmax(150px, 1fr) minmax(180px, 1fr) max-content;
  }

  .records-page .preference-score-criteria:not([hidden]) {
    display: contents;
  }

  .records-page .preference-score-criteria-status {
    grid-column: auto;
  }
}



/* ================================
   記録の並び替えプルダウン
   細い茶色の枠と専用の矢印を表示
================================ */

.records-page .records-sort-select {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  
}

/* ================================
   プルダウン右側の矢印
================================ */

.records-sort-select::before {
  position: absolute;
  right: 12px;

  content: "";
  width: 10px;
  height: 5px;

  background: #6f4d36;
  clip-path: polygon(0 0, 100% 0, 50% 100%);

  pointer-events: none;
}


/* ================================
   並び替えメニューのざらつき
   枠の部分だけに細かなムラを重ねる
================================ */
/*
.records-sort-select::after {
  content: "";
  position: absolute;
  inset: -2px;

  border: 2px solid transparent;
  border-radius: 8px;

  background:
    radial-gradient(
      circle,
      rgba(82, 57, 42, 0.35) 0.6px,
      transparent 0.8px
    )
    border-box;

  background-size: 4px 3px;

   中央部分をくり抜いて枠だけ残す 
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);

  mask-composite: exclude;

  pointer-events: none;

}

*/

/* ================================
   並び替えメニュー本体
   既存selectの枠線を完全に消す
================================ */

.records-page .records-sort-select select,
.records-page .preference-score-criteria select,
.records-page .records-visibility-setting .visibility-setting-label,
.records-page .preference-score-criteria label {
  font-size: 12px;
  font-weight: 400;
  color: #444;
}

.records-page .records-sort-select select,
.records-page .preference-score-criteria select {
  width: auto;
  min-width: 80px;
  padding: 3px 32px 7px 10px;

  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;

  appearance: none;
  background: transparent;

  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .records-page .preference-score-criteria select {
    padding-right: 12px;
  }
}

.records-page .records-sort-select select {
  min-width: 0;
  padding-inline: 0;
}

#preferenceScoreCriteria select {
  flex: 1;
  width: 0;
  min-width: 0;
  padding-inline: 4px;
}

#preferenceScoreRoast,
#preferenceScoreBrew {
  padding: 3px 28px 0 28px;
  text-align: center;
  text-align-last: center;
  background-image: none;
}


@media (max-width: 878px) {
  .records-page .records-browser {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* ===== 焙煎度　抽出方法　並びのレイアウト ===== */

#preferenceScoreRoast,
#preferenceScoreBrew {
  text-align: center;
  text-align-last: center;
  padding-left: 28px;
  padding-right: 28px;
}

@media (max-width: 600px) {
  #preferenceScoreRoast,
  #preferenceScoreBrew {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ================================
   マキネッタ画像
   記録カード内の画像サイズを調整
================================ */

.records-page .moka-image {
  width: 50px;
  height: auto;
}

/* ================================
   記録カードのコーヒー写真
   カード内に収まるサイズで表示する
================================ */

.records-page .records-photo {
  width: 100%;
  margin: 8px 0;
}

.records-page .records-coffee-photo {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}


.rating-area {
  display: grid;
  grid-template-columns: 1fr 180px;
  grid-template-rows: auto auto auto;
  column-gap: 24px;
  row-gap: 6px;
  align-items: start;
}


/* ================
   総合評価のラベル
==================*/
.rating-label {
  grid-column: 1;
  grid-row: 1;

  color: #55514c;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.rating-stars {
  grid-column: 1;
  grid-row: 2;

}

.photo-input-area {
  grid-column: 1;
  grid-row: 3;
}

.coffee-photo-preview {
  grid-column: 2;
  grid-row: 1 / 4;
  display: none;
}

#coffeePhotoPreview {
  width: 180px;
  height: 180px;
  object-fit: cover;
  display: block;
  border-radius: 8px;

  margin-left: auto;
  margin-right: auto;
}

.records-page .records-main {
  min-width: 0;
  padding-left: 20px;
}


.records-sort-select::before {
  display: none;
}

.photo-display-select::before {
  display: block;
  position: absolute;
  right: 12px;
  content: "";
  width: 10px;
  height: 5px;
  background: #6f4d36;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}


.record-buttons-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
}

.record-buttons-actions button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: #444;
  cursor: pointer;
}

.record-buttons-actions button:hover {
  text-decoration: underline;
}

.records-card-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
 
}

.records-card-actions button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  color: #444;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 0;
  width: auto;
}

.records-card-actions button:hover {
  text-decoration: underline;
}

.records-card-actions .records-memo-indicator {
  align-self: center;
  font-size: 10px;
  color: #777;
  white-space: nowrap;
}

.records-memo-popup {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 260px;
  max-width: calc(100vw - 24px);
  max-height: min(360px, 60dvh);
  padding: 12px;
  background: #f7f3ec;
  border: 1px solid #ded4cb;
  border-radius: 6px;
  box-shadow: 0 3px 12px rgb(0 0 0 / 14%);
  font-size: 12px;
  line-height: 1.7;
  color: #444;
}

.records-memo-popup[hidden] {
  display: none;
}

.records-memo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 12px;
  margin-bottom: 8px;
  font-weight: 600;
}

.records-memo-close {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #444;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.records-memo-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  text-align: left;
}

@media (max-width: 878px) {
  .records-memo-popup {
    width: 320px;
  }
}