style.css
body{

font-family: "Yu Mincho", serif;
background:#ffffff ;
margin:0;
padding:30px;

}

.container{

max-width:700px;
margin:auto;
padding:30px;


}

h1{

text-align:center;

}

label{

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

}

input:not([type="range"])
select,
textarea{

width:100%;
padding:10px;
margin-top:5px;
box-sizing:border-box;
border: 3px solid #444;
border-radius:10px;
background: transparent;
}

.coffee-form 
input:not([type="range"]):not([type="checkbox"]):not([type="hidden"]):not([type="file"]),

.coffee-form select,
.coffee-form textarea {
  width: 100%;
  box-sizing: border-box;
}

.coffee-form input[type="number"] {
    border: solid 3px #444;
    border-radius: 6px;
    background: transparent;
    padding: 8px 12px;
}

canvas{

margin-top:30px;

}

button{

margin-top:20px;

width:100%;

padding:10px;

background:#363636;

color:white;

border:none;

border-radius:6px;

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: #3B2A20;
  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: #3B2A20;
}

.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: #3B2A20;
  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: #363636 ;
}

.edit-button:hover {
  background: #363636;
}

.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;
  padding: 20px;
   border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* 左側の保存一覧 タイトル */
.sidebar h2 {
    font-family: Arial, "Noto Sans JP", sans-serif"BIZ UDPGothic", "Yu Gothic", Meiryo, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #000000;
}



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

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

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

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

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

/* スマホ・画面が狭い場合 */
@media (max-width: 900px) {
  .container {
    order: 1;
  }
}

.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;
}

.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: 600;
  color: #3B2A20;
}

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

.sidebar .filter-area select {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  font-size: 11px;
  background: #f3f0e9;
  
}

.sidebar .filter-area select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    font-size: 11px;
    background: #f3f0e9;

    border: none;
    border-radius: 12px;
    outline: none;
    box-shadow: none;
}

.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;
}

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

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

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

/* 全体 */
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
  
  
}

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

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

    padding: 28px 22px;

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

    box-shadow: none;
}

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

    background: var(--bg);
    border-radius: 16px;
    box-shadow: none;

    box-sizing: border-box;
}

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

font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
letter-spacing: 0.1em;
font-size: 36px;
}

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

/* ラベルなど */
label {
    margin-top: 0;
    font-size: 11px;
    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%;
        max-height: none;
        overflow-y: visible;
        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: 1px;
    background: #444;
    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: -6px;

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


/* Firefox の線 */
.coffee-form input[type="range"]::-moz-range-track {
    height: 1px;
    background: #444;
    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: #fbfaf6;
    border: none;
    border-radius: 22px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    
}


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

    color: #3B2A20;
    font-family: "Yu Mincho", serif;
    font-size: 18px;
    font-weight: 500;
}


/*ミニカード 産地 タイトル*/
.record-origin {
    margin: 4px;
    color: #3B2A20;
    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: #3B2A20;
    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: #3B2A20;
    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: #3B2A20;
    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: #3B2A20;
    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: #3B2A20;
    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: 10px;
  letter-spacing: 0.08em;
  color: #3B2A20;
}

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




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

    gap: 7px;

    color: #3B2A20;
    font-size: 10px;
    text-align: center;
}

/* 豆量 */
.coffee-number-input {
  display: block;
  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: 1px auto 0px;
}


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

    padding-top: 6px;

    border-top: 1px solid #e5e1da;

    color: #3B2A20;
    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: #3B2A20;

    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: 8px 12px;
    margin: 0 0 4px;

    background: transparent;
    border: 3px solid #444;
    border-radius: 6px;
    height: 38px;
    font-size: 12px;
    color: #3B2A20;
    outline: none;
}

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


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

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

    color: #3B2A20;
    font-size: 11px;

    outline: none;
    cursor: pointer;
}


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


/* 各ラベル 豆量　抽出温度*/
.coffee-form label {
    margin-top: 4px;
    color: #3B2A20;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

label[for="otherCountry"] {
    margin-bottom: 8px;
}

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

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

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

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

    color: #3B2A20;
    font-size: 10px;
}


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

    margin: 0 0 15px;
    padding: 10px 0;

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

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

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

    margin-bottom: 6px;

    color: #3B2A20;
    font-size: 9px;
    letter-spacing: 0.08em;
}

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

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

.coffee-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 0 0 38px;
    padding-bottom: 28px;

    border-bottom: 1px solid #ded9d0;
}

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

.meta-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 9px;

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

.meta-item span {
    display: block;

    color: #3B2A20;
    font-size: 8px;
    letter-spacing: 0.18em;
}

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

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

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

.coffee-identity {
    margin: 0 0 34px;
}

.coffee-identity h2{
    margin: 0;

    font-family: Arial, "Yu Gothic", "Meiryo", Helvetica, sans-serif;
    font-weight: 900;
    letter-spacing: 0.1em;
    font-size: 24px;
    line-height: 1;
}

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

    color: #3B2A20;
    font-size: 11px;
    letter-spacing: 0.05em;
}

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

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

/* レーダーを少し大きく */
.coffee-result .chart-container {
    width: 100%;
    max-width: 280px;
    height: 250px;
    margin: 0 auto 28px;
}

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

/* メモ */
.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: 0;
    width: 100%;
    padding: 14px 20px;

    background: #FCC144;
    color: #3B2A20;

    border: none;
    border-radius: 16px;

    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: #fff;
}

/* ===== 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: #3B2A20;

    font-size: 11px;
    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: #3B2A20;
  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: -85px;
}

@media (max-width: 950px) {
  .coffee-result {
    margin-top: 0;
  }
}

@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: #3B2A20;
    font-weight: 600;
    font-size: 14px;
}


/* ========================================
   記録一覧ページ
======================================== */
/* ================================
   すべての記録の豆名
================================ */

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

.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: 8px 0 6px;
  gap: 4px;
}

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

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

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

.records-page .records-list-card {
  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-brew {
  display: flex;
  justify-content: space-between;
  gap: 0;
  margin-bottom: 8px;
  font-size: 9px;
  text-align: center;
}

.records-brew span {
  flex: 1;
  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-top: 2px;
  margin-bottom: 15px;
  text-align: center;
}

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

.records-mini-chart {
  position: relative;
  width: 90px;
  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: transparent;
    -webkit-text-stroke: 1px #444;
    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}

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

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

.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 {
  max-width: 480px;
  margin: 20px auto;
}

.records-page #recordCount {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

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

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

.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: #3B2A20;
  z-index: 0;
}

.roast-scale-dots span {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  background: #3B2A20;
  border-radius: 50%;
  display: block;
}

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

.roast-scale-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 11px;
  margin-top: 6px;
  
}

.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: #3B2A20;
  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: #3B2A20;;
}

.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 3px;
  padding: 9px 10px;
  background: #fffdf9;
  border: 1px solid #ded4cb;
  border-radius: 9px;
}

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

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

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

.records-visibility-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px;
  box-sizing: border-box;
  background: #fffdf9;
  border: 1px solid #8a684f;
  border-radius: 7px;
}

.preference-score-criteria {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) minmax(140px, 1fr) auto;
  align-items: end;
  gap: 8px 12px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: #fffdf9;
  border: 1px solid #ded4cb;
  border-radius: 9px;
}

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

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

.preference-score-criteria label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  color: #3B2A20;
  font-size: 9px;
}

.preference-score-criteria select {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 6px 8px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #c9b7a7;
  border-radius: 7px;
  color: #3B2A20;
  font-size: 11px;
}

.preference-score-criteria-status {
  align-self: center;
  color: #796f67;
  font-size: 10px;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .preference-score-criteria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preference-score-criteria-title,
  .preference-score-criteria-status {
    grid-column: 1 / -1;
  }

  .preference-score-criteria-status {
    white-space: normal;
  }
}

.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: #3B2A20;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 500;
}

#preferenceAnalysisMessage,
.preference-analysis-description {
  color: #3B2A20;
  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: #3B2A20;
  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: #3B2A20;
  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: #3B2A20;
  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: #3B2A20;
  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;
}

@media (max-width: 600px) {
  .bean-settings-grid,
  .brew-settings-grid {
    grid-template-columns: 1fr;
  }
}

.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 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  text-align: center;
}

.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: 1px solid #aaa;
  border-radius: 12px;
  outline: none;
   box-shadow: none;
}

.records-page .records-controls select {
  border: none;
  background: #f3f0e9;
  border-radius: 12px;
}

.records-page .back-link {
    display: block;
  width: fit-content;
  margin: 0 auto 20px;
  color: #171717;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.records-page .country-reset-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.records-page .country-reset-row #recordsResetButton {
  width: auto;
  margin: 0;
  padding: 10px 18px;
  align-self: flex-end;
}

.records-page .records-top-area {
  max-width: 900px;
  margin: 0 auto;
}

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

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

  width: 100%;
  margin: 0 0 8px;
  padding: 12px 14px;

  background: #fbfaf7;
  color: #171717;

  border: 1px solid #e5e1da;
  border-radius: 12px;

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

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

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

.records-page .bean-group-button.active {
  background: #f3eee7;
  border-left: 4px solid #7b563d;
  padding-left: 11px;
}

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

.bean-pagination button {
  width: auto;
  min-width: 36px;
  padding: 6px 10px;
  border: 1px solid #c9b7a7;
  border-radius: 8px;
  background: #fff;
  color: #6f4d36;
  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: #6f4d36;
}
/* ================================
   ミニカードの日付を控えめに表示
================================ */

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

/* ================================
   記録一覧の操作メニュー
   並び替えと写真表示を横に並べる
================================ */

.records-page .records-sort {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}


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

.records-sort-select {
  position: relative;
  display: flex;
  align-items: center;
  width: 130px;
  border: 1px solid #8a684f;
  border-radius: 7px;
  
}

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

.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 {
  width: 100%;
  padding: 3px 32px 7px 10px;

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

  appearance: none;
  background: transparent;

  color: #52392a;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

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

.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: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 6px;
  align-items: center;

  margin-bottom: 36px;
}


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

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

.rating-stars {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display:flex; align-items:center;
 
}

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

  display: block;
  align-items: center;
  line-height: 1;
}

.coffee-photo-preview {
  margin-left: auto;
  margin-right: auto;
}


#coffeePhotoPreview {
  margin-left: auto;
  margin-right: auto;
}




@media (max-width: 600px) {
  #coffeePhotoPreview {
    width: 180px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin-top: 12px;
  }
}

#recordScreen .photo-choice-field {
  margin: 0;
  border: 0;
}

#recordScreen .photo-choice-field legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #3B2A20;
}




#originPreview {
    display: none;
}

/* ===== Home screen: styles scoped to the landing screen. ===== */
.home-screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  /* Scale the composition with its width, without stretching it on tall screens. */
  padding: clamp(96px, 14.85vw, 190px) 0 40px;
  overflow: hidden;
  background: var(--bg);
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
}
.home-title {
  margin: 0 24px 64px;
  font-size: clamp(34px, 5.3125vw, 68px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-align: center;
}
.home-menu {
  display: flex;
  justify-content: center;
  gap: clamp(32px, 7.8vw, 100px);
  width: 100%;
}
.home-menu-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  width: 140px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #444;
  transition: transform 180ms ease;
}
.home-menu-button:hover { background: transparent; color: #444; }
.home-menu-button:not(.home-menu-page-button):hover { transform: translateY(-4px); }
.home-menu-button:focus-visible,
.home-gear-scroll:focus-visible { outline: 2px solid #444; outline-offset: 6px; }
.home-menu-icon { display: block; width: 80px; height: 64px; object-fit: contain; }
.home-menu-subtitle { font-size: 20px; font-weight: 900; line-height: 1.2; letter-spacing: -0.04em; }
.home-menu-button.home-menu-page-button { cursor: pointer; }
.home-gears { width: 100%; min-width: 0; margin-top: 96px; }
.home-gears-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 20px 38px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.home-gears-title::before,
.home-gears-title::after { content: ""; width: 54px; border-top: 2px dashed currentColor; flex-shrink: 0; }
.home-gear-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 0 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.home-gear-scroll::-webkit-scrollbar { display: none; }
.home-gear-scroll { cursor: grab; user-select: none; }
.home-gear-scroll.is-dragging { cursor: grabbing; }
.home-gear-scroll.has-mouse-carousel { overflow-x: hidden; }
.home-gear-scroll.has-mouse-carousel .home-gear-list { width: auto; padding-right: 0; }
.home-gear-scroll.has-mouse-carousel .home-gear:last-child { margin-right: 40px; }
.home-gear-list {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0 40px;
}
.home-gear {
  display: flex;
  flex: 0 0 96px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #171717;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
.home-gear img { display: block; width: 76px; height: 72px; margin-bottom: 8px; object-fit: contain; object-position: center bottom; }
.home-gear:first-child img { width: 34px; }

.screen[hidden],
.home-screen[hidden],
.app-layout[hidden] { display: none !important; }
@media (max-width: 700px) {
  .home-screen { padding-top: 80px; }
  .home-title { margin-bottom: 44px; }
  .home-menu { gap: 12px; }
  .home-menu-button { width: 100px; gap: 14px; }
  .home-menu-icon { width: 62px; height: 54px; }
  .home-menu-subtitle { font-size: 15px; }
  .home-gears { margin-top: 64px; }
  .home-gears-title { font-size: 18px; margin-bottom: 28px; }
  .home-gears-title::before,
  .home-gears-title::after { width: 24px; }
  .home-gear-list { padding: 0 24px; }
  .home-gear-scroll.has-mouse-carousel .home-gear:last-child { margin-right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-menu-button { transition: none; }
}

/* ===== Record page: input-focused layout ===== */

#recordScreen {
  display: block;
  max-width: 760px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 32px 24px 64px;
  box-sizing: border-box;
}

#recordScreen .sidebar,
#recordScreen .coffee-result {
  display: none;
}

#recordScreen .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

#recordScreen .coffee-workspace {
  display: block;
}

#recordScreen .coffee-form {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.record-page-header {
  width: 100%;
  max-width: 680px;
  margin: 0 auto 48px;
}

.record-page-header h1 {
  margin: 32px 0 0;
}

.home-return-button {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #59514a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.home-return-button:hover {
  background: transparent;
  color: #2f2a26;
  text-decoration: underline;
}

.home-return-button:focus-visible {
  outline: 2px solid #b78a68;
  outline-offset: 6px;
}

@media (max-width: 700px) {
  #recordScreen {
    padding: 24px 20px 48px;
  }

  .record-page-header {
    margin-bottom: 36px;
  }
}




/* ===== Record page: compact live taste preview ===== */

.taste-entry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px;
  align-items: center;
  margin-top: 32px;
}

.taste-entry-layout .taste-controls {
  min-width: 0;
}

.record-taste-preview {
  min-width: 0;
  padding: 24px 20px 18px;
  border: 3px solid #444;
  border-radius: 18px;
  box-sizing: border-box;
}

.record-taste-preview h2 {
  margin: 0 0 12px;
  color: #3b2a20;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
}

.record-taste-preview .chart-container {
  width: 210px;
  max-width: 100%;
  height: 190px;
  margin: 0 auto 12px;
}

.record-taste-preview canvas {
  margin-top: 0;
}

.record-taste-preview .live-taste-values {
  margin: 0;
  padding: 10px 0 0;
  border-bottom: 0;
}

@media (max-width: 700px) {
  .taste-entry-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .record-taste-preview {
    width: min(100%, 300px);
    margin: 0 auto;
  }
}

/* ===== Record page: two-column form test ===== */

#recordScreen {
  max-width: 1020px;
}

#recordScreen .coffee-form,
.record-page-header {
  max-width: 920px;
}

.basic-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr);
  grid-template-areas:
    "bean country"
    "region other";
  gap: 18px 24px;
}

.basic-info-bean {
  grid-area: bean;
}

.basic-info-country {
  grid-area: country;
}

.basic-info-region {
  grid-area: region;
}

.basic-info-other-country {
  grid-area: other;
}

.basic-info-item label {
  margin-top: 20px;
}

.taste-entry-layout {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
}

.record-taste-preview .chart-container {
  width: 230px;
  height: 205px;
}

#recordScreen .rating-area {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 38px;
}

#recordScreen .rating-label,
#recordScreen .rating-stars {
  grid-column: auto;
  grid-row: auto;

}

.record-finish-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.4fr);
  gap: 48px;
  align-items: start;
  margin-top: 28px;
}

.record-photo-column,
.record-memo-column {
  min-width: 0;
}

.record-photo-column .photo-input-area,
.record-memo-column label {
  margin-top: 0;
}

.record-memo-column textarea {
  min-height: 170px;
}

@media (max-width: 700px) {
  .basic-info-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "bean"
      "country"
      "region"
      "other";
  }

  .taste-entry-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .record-finish-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ===== Record page: tactile choices ===== */

.visual-choice-field {
  margin: 30px 0 0;
  padding: 0;
  border: 0;
}

.visual-choice-field legend,
.choice-label {
  display: block;
  margin: 0 0 10px;
  color: #3b2a20;
  font-size: 12px;
  font-weight: 650;
}

.visual-choice-source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.roast-choices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.roast-choice {
  width: 100%;
  margin: 0;
  border: 1px solid #d8d1c9;
  background: #ffffff;
  color: #444;
  min-height: 92px;
  padding: 12px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 16px;
  font-size: 12px;
}

.roast-choice:hover {
  background: #f5f1eb;
  color: #3b2a20;
}

.roast-choice[aria-pressed="true"] {
  border-color: #6f4e37;
  background: #eee5db;
  color: #3b2a20;
  box-shadow: 0 0 0 2px rgba(111, 78, 55, 0.12);
}

.roast-choice:focus-visible,
.temperature-choice:focus-visible {
  outline: 3px solid #b78a68;
  outline-offset: 3px;
}

.roast-bean {
  position: relative;
  width: 38px;
  height: 27px;
  display: block;
  border-radius: 55% 45% 52% 48%;
  transform: rotate(-13deg);
  box-shadow: inset -4px -3px 7px rgba(46, 27, 17, 0.16);
}

.roast-bean::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 1px;
  height: 21px;
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(12deg);
}

.roast-bean-light {
  background: #c67d30;
}

.roast-bean-medium-light {
  background: #9b6137;
}

.roast-bean-medium {
  background: #804e2c;
}

.roast-bean-medium-dark {
  background: #67422e;
}

.roast-bean-dark {
  background: #423128;
}

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

.temperature-choice {
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.58;
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.temperature-choice:hover {
  background: transparent;
  color: #444;
  opacity: 0.85;
}

.temperature-choice[aria-pressed="true"] {
  background: transparent;
  color: #444;
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: none;
}

.temperature-choice svg {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.purchase-details {
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid #ded9d0;
  border-bottom: 1px solid #ded9d0;
}

.purchase-details summary {
  padding: 15px 2px;
  color: #444;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  margin-top: 24px;
}

.purchase-details summary::-webkit-details-marker {
  display: none;
}

.purchase-details[open] summary {
  color: #3b2a20;
}

.purchase-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin-top: 24px;
}

.purchase-details-grid label {
  margin-top: 0;
}

@media (max-width: 700px) {
  .roast-choices {
    gap: 6px;
  }

  .roast-choice {
    min-height: 82px;
    padding-inline: 3px;
    font-size: 9px;
  }

  .roast-bean {
    width: 30px;
    height: 22px;
  }

  .roast-bean::after {
    top: 3px;
    height: 16px;
  }

  .purchase-details-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Record page: compact choice row test ===== */

.visual-brew-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(190px, 0.8fr);
  gap: 48px;
  align-items: end;
}

.visual-brew-grid .roast-choices {
  grid-template-columns: repeat(5, 74px);
  justify-content: start;
  gap: 8px;
}

.visual-brew-grid .roast-choice {
  min-height: 72px;
  padding: 6px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 0.62;
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.visual-brew-grid .roast-choice:hover {
  background: transparent;
  opacity: 0.86;
}

.visual-brew-grid .roast-choice[aria-pressed="true"] {
  border: 0;
  background: transparent;
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: none;
}

.visual-brew-grid .temperature-choices {
  grid-template-columns: repeat(2, 72px);
  justify-content: start;
  gap: 12px;
}

#recordScreen .brew-settings-grid {
  grid-template-columns: minmax(0, 420px);
  margin-top: 24px;
}

#recordScreen .brew-measurement-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
}

#recordScreen .purchase-details {
  margin-top: 16px;
}

@media (max-width: 700px) {
  .visual-brew-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .visual-brew-grid .roast-choices {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .visual-brew-grid .temperature-choices {
    grid-template-columns: repeat(2, 78px);
  }

  #recordScreen .brew-settings-grid,
  #recordScreen .brew-measurement-grid {
    grid-template-columns: 1fr;
  }
}

#coffeePhoto {
  font-size: 11px;
  color: #444 ;
}

#coffeePhoto::file-selector-button {
  border: 3px solid #444;
  border-radius: 12px;
  background: #BBB2A1 ;
  color: var(--text);
  padding: 8px 14px;
  margin-right: 10px;
  font-size: 11px;
  cursor: pointer;
}

/* 記録画面の評価欄を横一列に揃える */
#recordScreen .rating-area {
  display: flex;
  align-items: center;
}

@media (max-width: 600px) {
  #recordScreen .rating-area {
    justify-content: center;
  }
}

#recordScreen .rating-star {
  margin-top: 0;
}

.temperature-choice-field {
  margin: 0;
}

/* ========================================
   記録入力ページ上部ナビ
   HOME と「すべての記録」を左右に配置
======================================== */

.record-page-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* ========================================
   「すべての記録」へのリンク
   ボタンにせず、静かな文字リンクとして表示
======================================== */

.records-page-link {
  color: #444;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding-left: 30px;
}


/* ========================================
   「すべての記録」リンクのホバー時
   マウスを乗せた時だけ下線を表示
======================================== */

.records-page-link:hover {
  text-decoration: underline;
}