.ok { background: #d4dded; min-height: 100%; font: 12px Verdana, sans-serif; color: #222; }
.ok-top { background: linear-gradient(#3a6ed8, #1a3fa8); padding: 8px 14px; color: #fff; display: flex; align-items: center; gap: 12px; } .ok-logo { font: bold italic 28px Georgia, serif; color: #ff9ad0; text-shadow: 1px 1px #000; } .ok-ti { font-size: 11px; }
.ok-cols { display: flex; gap: 10px; padding: 10px; } .ok-side { width: 170px; flex: none; } .ok-main { flex: 1; min-width: 0; }
.ok-pic { background: #fff; border: 1px solid #89a; padding: 8px; text-align: center; margin-bottom: 8px; } .ok-pho { font-size: 64px; } .ok-pic small { display: block; color: #666; font-style: italic; }
.ok-nav { background: #fff; border: 1px solid #89a; display: flex; flex-direction: column; } .ok-nav a { padding: 5px 8px; color: #0000cc; border-bottom: 1px solid #e0e0f0; } .ok-nav a.on { background: #c0d0f0; font-weight: bold; color: #000; text-decoration: none; }
.ok-card { background: #fff; border: 1px solid #89a; margin-bottom: 10px; } .ok-ch { background: #c0d0f0; padding: 3px 8px; font-weight: bold; color: #1a3a7a; } .ok-cb { padding: 8px; }
.ok-small { color: #666; font-size: 11px; margin-top: 8px; } .ok-scrap { padding: 6px 0; border-bottom: 1px dotted #aab; } .ok-ac { display: flex; gap: 6px; margin: 6px 0; } .ok-ta { width: 100%; font: 12px Verdana; box-sizing: border-box; }
.ok-testi { border-bottom: 2px dotted #aab; padding: 8px 0; } .ok-testi p { margin: 4px 0; line-height: 1.5; }
.ok-fan { margin: 4px 0; } .ok-fn { font-size: 16px; margin: 0 6px; } .ok-ph { display: flex; gap: 8px; flex-wrap: wrap; } .ok-photo { text-align: center; } .ok-photo small { display: block; }
.ok-fr { display: flex; flex-wrap: wrap; gap: 8px; } .ok-f { width: 84px; text-align: center; cursor: pointer; } .ok-fa { font-size: 36px; background: #eef; border: 1px solid #99a; } .ok-cm { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted #ccd; }